@esri/calcite-components 5.0.0-next.72 → 5.0.0-next.74

package/dist/components/calcite-tree/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.72 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";
-import { b as focusElement, n as nodeListToArray, s as slotChangeGetAssignedElements, t as toAriaBoolean } from "../../chunks/dom.js";
+import { j as focusElement, o as nodeListToArray, b as slotChangeGetAssignedElements, t as toAriaBoolean } from "../../chunks/dom.js";
 function isTreeItem(element) {
   return element?.tagName === "CALCITE-TREE-ITEM";
 }

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

@@ -1,44 +1,50 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FlipContext, Scale, SelectionMode } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
-import { TreeItemSelectDetail } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { FlipContext } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @cssproperty [--calcite-tree-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-tree-text-color-selected] - Specifies the component's text color when selected.
+ * @cssproperty [--calcite-tree-selected-icon-color] - Specifies the component's selection icon color.
  * @slot  - A slot for adding text.
  * @slot [children] - A slot for adding nested `calcite-tree` elements.
  * @slot [actions-end] - A slot for adding actions to the end of the component. It is recommended to use two or fewer actions.
  */
-export declare class TreeItem extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @default false
-     */
-    expanded: boolean;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
-    iconFlipRtl: FlipContext;
-    /** Specifies an icon to display at the start of the component. */
-    iconStart: IconName;
-    /** Accessible name for the component. */
-    label: string;
-    /**
-     * When `true`, the component is selected.
-     *
-     * @default false
-     */
-    selected: boolean;
-    /** Fires when the component's content area is collapsed. */
-    readonly calciteTreeItemCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteTreeItemExpand: TargetedEvent<this, void>;
-    /** Fires when the component is selected or deselected. */
-    readonly calciteTreeItemSelect: TargetedEvent<this, void>;
-}
+export abstract class TreeItem extends LitElement {
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @default false
+   */
+  accessor expanded: boolean;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  accessor iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  accessor iconStart: IconName;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * When `true`, the component is selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /** Fires when the component's content area is collapsed. */
+  readonly calciteTreeItemCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteTreeItemExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is selected or deselected. */
+  readonly calciteTreeItemSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTreeItemCollapse: TreeItem["calciteTreeItemCollapse"]["detail"];
+    calciteTreeItemExpand: TreeItem["calciteTreeItemExpand"]["detail"];
+    calciteTreeItemSelect: TreeItem["calciteTreeItemSelect"]["detail"];
+  };
+}

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

@@ -1,12 +1,12 @@
 /*! 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.72 */
+v5.0.0-next.74 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
-import { f as filterDirectChildren, s as slotChangeGetAssignedElements, a as slotChangeHasAssignedElement, g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
+import { B as filterDirectChildren, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement, g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {

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

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

package/dist/components/functional/Heading.d.ts

@@ -1,11 +1 @@
-import { TemplateResult } from 'lit';
-import { JsxNode, LuminaJsx } from '@arcgis/lumina';
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-interface HeadingProps extends Pick<LuminaJsx.HTMLAttributes, "class" | "key"> {
-    level?: HeadingLevel;
-}
-export declare function constrainHeadingLevel(level: number): HeadingLevel;
-export declare const Heading: ({ children, ...props }: HeadingProps & {
-    children: JsxNode;
-}) => TemplateResult;
-export {};
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/components/interfaces.d.ts

@@ -1,36 +1,40 @@
-import { LuminaJsx } from '@arcgis/lumina';
-import { CamelCase, ReadonlyTuple } from 'type-fest';
+import type { LuminaJsx } from "@arcgis/lumina";
+import type { CamelCase } from "type-fest";
+
 export type Alignment = "start" | "center" | "end";
+
 export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
-export type Axis = "inline" | "block";
-export interface Dimensions {
-    width: number;
-    height: number;
-}
+
 export type FlipContext = "both" | "start" | "end";
+
 export type Height = Scale;
+
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
+
 export type Layout = "horizontal" | "vertical" | "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single";
+
 export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end";
-export type ModeClass = "calcite-mode-light" | "calcite-mode-dark" | "calcite-mode-auto";
-export type ModeName = "light" | "dark" | "auto";
+
 export type Position = "start" | "end" | "top" | "bottom";
+
 export type SelectionAppearance = "icon" | "border" | "neutral" | "highlight";
+
 export type SelectionMode = "single" | "none" | "children" | "single-persist" | "multichildren" | "ancestors" | "multiple";
+
 export type Scale = "s" | "m" | "l";
+
 export type Status = "invalid" | "valid" | "idle";
+
 export type Width = Scale | "auto" | "half" | "full";
+
 export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus";
+
 export type CollapseDirection = "down" | "up";
-export type Dir = "ltr" | "rtl";
+
 export type InteractionMode = "interactive" | "static";
-/**
- * Helper type for properties decorated with @queryAssignedElements or @queryAssignedNodes
- * that are intended to support exactly one slotted element or node.
- */
-export type SingleItemSlotArray<T extends HTMLElement | Node> = ReadonlyTuple<T, 1>;
-type RemoveAriaPrefix<K extends string> = K extends `aria-${infer Rest}` ? Rest : K extends `aria${infer Rest}` ? Uncapitalize<Rest> : K;
+
 export type AriaAttributesCamelCased = {
     [K in Exclude<keyof LuminaJsx.AriaAttributes, "role"> as CamelCase<RemoveAriaPrefix<K & string>>]: LuminaJsx.AriaAttributes[K];
 };
-export {};
+
+export type RemoveAriaPrefix<K extends string> = K extends `aria-${infer Rest}` ? Rest : K extends `aria${infer Rest}` ? Uncapitalize<Rest> : K;

package/dist/controllers/useFocusTrap.d.ts

@@ -1,88 +1,14 @@
-import { makeGenericController } from '@arcgis/lumina/controllers';
-import { FocusTrap, Options } from 'focus-trap';
-import { LitElement } from '@arcgis/lumina';
-import { SetReturnType } from 'type-fest';
-export { type FocusTrap } from 'focus-trap';
-export interface UseFocusTrap {
-    /**
-     * The underlying FocusTrap instance.
-     *
-     * Note: this is only exposed in test environments.
-     *
-     * @internal
-     */
-    readonly _instance?: FocusTrap;
-    /**
-     * Activates the focus trap.
-     */
-    activate: () => void;
-    /**
-     * Deactivates the focus trap.
-     */
-    deactivate: () => void;
-    /**
-     * By default, the host element will be used as the focus-trap element, but if the focus-trap element needs to be a different element, use this method prior to activating to set the focus-trap element.
-     */
-    overrideFocusTrapEl: (el: HTMLElement) => void;
-    /**
-     * Sets the extra containers to be used in the focus trap.
-     *
-     * @see https://github.com/focus-trap/focus-trap#trapupdatecontainerelements
-     */
-    setExtraContainers: (extraContainers?: FocusTrapOptions["extraContainers"]) => void;
-    /**
-     * Updates focusable elements within the trap.
-     */
-    updateContainerElements: () => void;
-}
-interface UseFocusTrapOptions<T extends LitElement = LitElement> {
-    /**
-     * The name of the prop that will trigger the focus trap to activate.
-     */
-    triggerProp: keyof T;
-    /**
-     * Options to pass to the focus-trap library.
-     */
-    focusTrapOptions?: Options;
-}
-interface FocusTrapComponent extends LitElement {
-    focusTrapDisabled?: boolean;
-    /**
-     * When defined, provides a condition to disable focus trapping. When `true`, prevents focus trapping.
-     */
-    focusTrapDisabledOverride?: () => boolean;
-    /**
-     * Additional options to configure the focus trap.
-     */
-    focusTrapOptions?: Partial<FocusTrapOptions>;
-}
-export type FocusTrapOptions = 
-/**
- * @see https://github.com/focus-trap/focus-trap#createoptions
- */
-Pick<Options, "allowOutsideClick" | "initialFocus" | "returnFocusOnDeactivate"> & {
-    /**
-     * Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus-trap element.
-     */
-    extraContainers: Parameters<FocusTrap["updateContainerElements"]>[0];
-    /**
-     * By default, when the focus trap is deactivated, focus will return to the element that was focused before the trap was activated. This option allows customizing that behavior.
-     *
-     * Returning undefined will use the default behavior of returning focus to the element focused before activation.
-     */
-    setReturnFocus?: Options["setReturnFocus"] | undefined | SetReturnType<Extract<Options["setReturnFocus"], Function>, undefined>;
-};
-/**
- * Helper to create the FocusTrap options.
- */
-export declare function createFocusTrapOptions(hostEl: HTMLElement, options?: Omit<Options, "setReturnFocus"> & {
-    setReturnFocus?: FocusTrapOptions["setReturnFocus"];
-}): Options;
-/**
- * A controller for managing focus traps.
- *
- * Note: traps will be deactivated automatically when the component is disconnected.
- *
- * @param options
- */
-export declare const useFocusTrap: <T extends FocusTrapComponent>(options: UseFocusTrapOptions<T>) => ReturnType<typeof makeGenericController<UseFocusTrap, T>>;
+import type { FocusTrap, Options } from "focus-trap";
+import type { SetReturnType } from "type-fest";
+
+export type FocusTrapOptions = Pick<Options, "allowOutsideClick" | "initialFocus" | "returnFocusOnDeactivate">
+  & {
+  /** Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus-trap element. */
+  extraContainers: Parameters<FocusTrap["updateContainerElements"]>[0];
+  /**
+   * By default, when the focus trap is deactivated, focus will return to the element that was focused before the trap was activated. This option allows customizing that behavior.
+   *
+   * Returning undefined will use the default behavior of returning focus to the element focused before activation.
+   */
+  setReturnFocus?: Options["setReturnFocus"] | undefined | SetReturnType<Extract<Options["setReturnFocus"], Function>, undefined>;
+};

package/dist/controllers/useTime.d.ts

@@ -1,161 +1,135 @@
-import { PropertyValues } from 'lit';
-import { GenericController, T9nMeta } from '@arcgis/lumina/controllers';
-import { GenericT9nStrings } from '@arcgis/toolkit/intl';
-import { LitElement } from '@arcgis/lumina';
-import { EffectiveHourFormat, HourFormat, Meridiem } from '../utils/time';
-import { Locale, NumberingSystem } from '../utils/locale';
+import type { PropertyValues } from "lit";
+import type { GenericController, T9nMeta } from "@arcgis/lumina/controllers";
+import type { GenericT9nStrings } from "@arcgis/toolkit/intl";
+import type { LitElement, EventEmitter } from "@arcgis/lumina";
+import type { EffectiveHourFormat, HourFormat, Meridiem } from "../utils/time.js";
+import type { Locale, NumberingSystem } from "../utils/locale.js";
+
+export const useTime: (component: LitElement & TimeComponent) => TimeController;
+
 export interface TimeComponent extends LitElement {
-    /**
-     * Specifies the component's hour format, where:
-     *
-     * `"user"` displays the user's locale format,
-     * `"12"` displays a 12-hour format, and
-     * `"24"` displays a 24-hour format.
-     *
-     * @default "user"
-     */
-    hourFormat: HourFormat;
-    /**
-     * Translated messages and locale information
-     *
-     * @internal
-     */
-    messages: Partial<GenericT9nStrings> | T9nMeta<GenericT9nStrings>;
-    /**
-     * Specifies the Unicode numeral system used by the component for localization.
-     */
-    numberingSystem: NumberingSystem;
-    /**
-     * Specifies the granularity the component's `value` must adhere to (in seconds).
-     */
-    step: number;
-    /**
-     * The component's time value in ISO (24-hour) format.
-     */
-    value: string;
+  /**
+   * Specifies the component's hour format, where:
+   *
+   * `"user"` displays the user's locale format,
+   * `"12"` displays a 12-hour format, and
+   * `"24"` displays a 24-hour format.
+   *
+   * @default "user"
+   */
+  hourFormat: HourFormat;
+  /**
+   * Translated messages and locale information
+   *
+   * @internal
+   */
+  messages: Partial<GenericT9nStrings> | T9nMeta<GenericT9nStrings>;
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  numberingSystem: NumberingSystem;
+  /** Specifies the granularity the component's `value` must adhere to (in seconds). */
+  step: number;
+  /** The component's time value in ISO (24-hour) format. */
+  value: string;
 }
-type TimeProperties = {
-    /**
-     * Change event that fires when the value is committed on Enter keypress or blur
-     */
-    calciteTimeChange: CustomEvent<string>;
-    /**
-     * The fractional second portion of the time value.
-     */
-    fractionalSecond: string;
-    /**
-     * The hour portion of the time value (in ISO 24-hour format).
-     */
-    hour: string;
-    /**
-     * The effective hour format, calculated based on the component's hour-format property.
-     * The component's hour-format of "user" will resolve to the locale's default hour format.
-     *
-     * `"12"` displays a 12-hour format, and
-     * `"24"` displays a 24-hour format.
-     */
-    hourFormat: EffectiveHourFormat;
-    /**
-     * The language and region code to localize the time value.
-     */
-    locale: Locale;
-    /**
-     * The decimal separator used by the locale.
-     */
-    localizedDecimalSeparator: string;
-    /**
-     * The decimal separator used by the locale.
-     */
-    localizedFractionalSecond: string;
-    /**
-     * The localized fractional second portion of the time value.
-     */
-    localizedHour: string;
-    /**
-     * The hour suffix used by the locale.
-     */
-    localizedHourSuffix: string;
-    /**
-     * The localized meridiem portion of the time value, when hourFormat resolves to 12.
-     */
-    localizedMeridiem: string;
-    /**
-     * The localized minute portion of the time value.
-     */
-    localizedMinute: string;
-    /**
-     * The localized minute suffix used by the locale.
-     */
-    localizedMinuteSuffix: string;
-    /**
-     * The localized second portion of the time value.
-     */
-    localizedSecond: string;
-    /**
-     * The localized second suffix used by the locale.
-     */
-    localizedSecondSuffix: string;
-    /**
-     * The effective meridiem of the time value, when hourFormat resolves to 12.
-     *
-     * `"AM"` for hours between 0 and 12
-     * `"PM"` for hours between 12 and 23
-     */
-    meridiem: Meridiem;
-    /**
-     * An integer representing the order in which the meridiem appears for the locale within an array of values returned by Intl.DateTimeFormat.
-     */
-    meridiemOrder: number;
-    /**
-     * The minute portion of the time value.
-     */
-    minute: string;
-    /**
-     * The second portion of the time value.
-     */
-    second: string;
-};
-declare class TimeController extends GenericController<TimeProperties, TimeComponent> {
-    fractionalSecond: string;
-    hour: string;
-    hourFormat: EffectiveHourFormat;
-    locale: Locale;
-    localizedDecimalSeparator: string;
-    localizedFractionalSecond: string;
-    localizedHour: string;
-    localizedHourSuffix: string;
-    localizedMeridiem: string;
-    localizedMinute: string;
-    localizedMinuteSuffix: string;
-    localizedSecond: string;
-    localizedSecondSuffix: string;
-    meridiem: Meridiem;
-    meridiemOrder: number;
-    minute: string;
-    second: string;
-    userChangedValue: boolean;
-    handleHourKeyDownEvent: (event: KeyboardEvent) => void;
-    handleMinuteKeyDownEvent: (event: KeyboardEvent) => void;
-    handleSecondKeyDownEvent: (event: KeyboardEvent) => void;
-    handleFractionalSecondKeyDownEvent: (event: KeyboardEvent) => void;
-    handleMeridiemKeyDownEvent: (event: KeyboardEvent) => void;
-    calciteTimeChange: import('@arcgis/lumina').EventEmitter<string>;
-    decrementHour(): void;
-    decrementMinute(): void;
-    decrementSecond(): void;
-    incrementHour(): void;
-    incrementMinute(): void;
-    incrementSecond(): void;
-    nudgeFractionalSecond(direction: "up" | "down"): void;
-    toggleMeridiem(direction: "down" | "up"): void;
-    hostConnected(): void;
-    hostUpdate(changes: PropertyValues): void;
-    private decrementMinuteOrSecond;
-    private incrementMinuteOrSecond;
-    private setHourFormat;
-    private setMeridiemOrder;
-    setValue(value: string, userChangedValue?: boolean): void;
-    setValuePart(key: "hour" | "minute" | "second" | "fractionalSecond" | "meridiem", value?: number | string | Meridiem): void;
+
+export class TimeController extends GenericController<TimeProperties, TimeComponent> {
+  calciteTimeChange: EventEmitter<string>;
+  fractionalSecond: string;
+  handleFractionalSecondKeyDownEvent: (event: KeyboardEvent) => void;
+  handleHourKeyDownEvent: (event: KeyboardEvent) => void;
+  handleMeridiemKeyDownEvent: (event: KeyboardEvent) => void;
+  handleMinuteKeyDownEvent: (event: KeyboardEvent) => void;
+  handleSecondKeyDownEvent: (event: KeyboardEvent) => void;
+  hour: string;
+  hourFormat: EffectiveHourFormat;
+  locale: Locale;
+  /** @default "." */
+  localizedDecimalSeparator: string;
+  localizedFractionalSecond: string;
+  localizedHour: string;
+  localizedHourSuffix: string;
+  localizedMeridiem: string;
+  localizedMinute: string;
+  localizedMinuteSuffix: string;
+  localizedSecond: string;
+  localizedSecondSuffix: string;
+  meridiem: Meridiem;
+  meridiemOrder: number;
+  minute: string;
+  second: string;
+  /** @default false */
+  userChangedValue: boolean;
+  decrementHour(): void;
+  decrementMinute(): void;
+  decrementSecond(): void;
+  hostConnected(): void;
+  /** @param changes */
+  hostUpdate(changes: PropertyValues): void;
+  incrementHour(): void;
+  incrementMinute(): void;
+  incrementSecond(): void;
+  /** @param direction */
+  nudgeFractionalSecond(direction: "up" | "down"): void;
+  /**
+   * @param value
+   * @param userChangedValue
+   */
+  setValue(value: string, userChangedValue?: boolean): void;
+  /**
+   * @param key
+   * @param value
+   */
+  setValuePart(key: "hour" | "minute" | "second" | "fractionalSecond" | "meridiem", value?: number | string | Meridiem): void;
+  /** @param direction */
+  toggleMeridiem(direction: "down" | "up"): void;
 }
-export declare const useTime: (component: LitElement & TimeComponent) => TimeController;
-export {};
+
+export type TimeProperties = {
+  /** Change event that fires when the value is committed on Enter keypress or blur */
+  calciteTimeChange: CustomEvent<string>;
+  /** The fractional second portion of the time value. */
+  fractionalSecond: string;
+  /** The hour portion of the time value (in ISO 24-hour format). */
+  hour: string;
+  /**
+   * The effective hour format, calculated based on the component's hour-format property.
+   * The component's hour-format of "user" will resolve to the locale's default hour format.
+   *
+   * `"12"` displays a 12-hour format, and
+   * `"24"` displays a 24-hour format.
+   */
+  hourFormat: EffectiveHourFormat;
+  /** The language and region code to localize the time value. */
+  locale: Locale;
+  /** The decimal separator used by the locale. */
+  localizedDecimalSeparator: string;
+  /** The decimal separator used by the locale. */
+  localizedFractionalSecond: string;
+  /** The localized fractional second portion of the time value. */
+  localizedHour: string;
+  /** The hour suffix used by the locale. */
+  localizedHourSuffix: string;
+  /** The localized meridiem portion of the time value, when hourFormat resolves to 12. */
+  localizedMeridiem: string;
+  /** The localized minute portion of the time value. */
+  localizedMinute: string;
+  /** The localized minute suffix used by the locale. */
+  localizedMinuteSuffix: string;
+  /** The localized second portion of the time value. */
+  localizedSecond: string;
+  /** The localized second suffix used by the locale. */
+  localizedSecondSuffix: string;
+  /**
+   * The effective meridiem of the time value, when hourFormat resolves to 12.
+   *
+   * `"AM"` for hours between 0 and 12
+   * `"PM"` for hours between 12 and 23
+   */
+  meridiem: Meridiem;
+  /** An integer representing the order in which the meridiem appears for the locale within an array of values returned by Intl.DateTimeFormat. */
+  meridiemOrder: number;
+  /** The minute portion of the time value. */
+  minute: string;
+  /** The second portion of the time value. */
+  second: string;
+};