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

package/dist/components/calcite-menu/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.72 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { d as focusElementInGroup, s as slotChangeGetAssignedElements, b as focusElement } from "../../chunks/dom.js";
+import { f as focusElementInGroup, b as slotChangeGetAssignedElements, j as focusElement } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const styles = css`:host{display:flex}ul{margin:0;display:inline-flex;block-size:100%;align-items:center;padding:0}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}`;

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

@@ -1,74 +1,78 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FlipContext, Layout } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
-import { MenuItemCustomEvent } 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";
 
-/** @slot [submenu-item] - A slot for adding `calcite-menu-item`s in a submenu. */
-export declare class MenuItem extends LitElement {
-    /**
-     * When `true`, the component is highlighted.
-     *
-     * @default false
-     */
-    active: boolean;
-    /**
-     * When `true`, the component displays a breadcrumb trail for use as a navigational aid.
-     *
-     * @default false
-     */
-    breadcrumb: boolean;
-    /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
-    href: string;
-    /** Specifies an icon to display at the end of the component. */
-    iconEnd: IconName;
-    /** Displays the `iconStart` and/or `iconEnd` as 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.
-     *
-     * @required
-     */
-    label: string;
-    /** Overrides individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.
-     *
-     * @default false
-     */
-    open: boolean;
-    /**
-     * Defines the relationship between the `href` value and the current document.
-     *
-     * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
-     */
-    rel: string;
-    /**
-     * Specifies where to open the linked document defined in the `href` property.
-     *
-     * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
-     */
-    target: string;
-    /** Specifies the text to display. */
-    text: string;
-    /**
-     * Sets focus on the component.
-     *
-     * @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>;
-    /** Emits when the component is selected. */
-    readonly calciteMenuItemSelect: TargetedEvent<this, void>;
-    private messages: Partial<{
-        submenu: string;
-        open: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        submenu: string;
-        open: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-menu-item-accent-color] - When `active`, specifies the component's border color.
+ * @cssproperty [--calcite-menu-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-menu-item-sub-menu-border-color] - Specifies the submenu's border color.
+ * @cssproperty [--calcite-menu-item-sub-menu-corner-radius] - Specifies the submenu's border radius.
+ * @cssproperty [--calcite-menu-text-color] - Specifies the component's text color.
+ * @slot [submenu-item] - A slot for adding `calcite-menu-item`s in a submenu.
+ */
+export abstract class MenuItem extends LitElement {
+  /**
+   * When `true`, the component is highlighted.
+   *
+   * @default false
+   */
+  accessor active: boolean;
+  /**
+   * When `true`, the component displays a breadcrumb trail for use as a navigational aid.
+   *
+   * @default false
+   */
+  accessor breadcrumb: boolean;
+  /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
+  accessor href: string;
+  /** Specifies an icon to display at the end of the component. */
+  accessor iconEnd: IconName;
+  /** Displays the `iconStart` and/or `iconEnd` as 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.
+   *
+   * @required
+   */
+  accessor label: string;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      submenu?: string;
+      open?: string;
+  };
+  /**
+   * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * Defines the relationship between the `href` value and the current document.
+   *
+   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+   */
+  accessor rel: string;
+  /**
+   * Specifies where to open the linked document defined in the `href` property.
+   *
+   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
+   */
+  accessor target: string;
+  /** Specifies the text to display. */
+  accessor text: string;
+  /**
+   * Sets focus on the component.
+   *
+   * @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>;
+  /** Emits when the component is selected. */
+  readonly calciteMenuItemSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteMenuItemSelect: MenuItem["calciteMenuItemSelect"]["detail"];
+  };
+}

package/dist/components/calcite-menu-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 { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
-import { s as slotChangeGetAssignedElements, g as getElementDir } from "../../chunks/dom.js";
+import { b as slotChangeGetAssignedElements, g as getElementDir } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const CSS = {

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

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

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

@@ -1,111 +1,116 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Appearance, Scale } from '../interfaces';
-import { FormComponent } from '../../utils/form';
-import { NumberingSystem } from '../../utils/locale';
-import { Label } from '../calcite-label/customElement.js';
-import { MeterFillType, MeterLabelType } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { Appearance, Scale } from "../interfaces.js";
+import type { NumberingSystem } from "../../utils/locale.js";
+import type { MeterFillType, MeterLabelType } from "./interfaces.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-export declare class Meter extends LitElement {
-    /**
-     * Specifies the appearance of the component.
-     *
-     * @default "outline-fill"
-     */
-    appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Specifies the component's display, where
-     * `"single"` displays a single color, and
-     * `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
-     *
-     * @default "range"
-     */
-    fillType: MeterFillType;
-    /**
-     * The `id` of the form that will be associated with the component.
-     *
-     * When not set, the component will be associated with its ancestor form element, if any.
-     */
-    form: string;
-    /**
-     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
-     *
-     * @default false
-     */
-    groupSeparator: boolean;
-    /** Specifies a high value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
-    high: number;
-    /**
-     * Accessible name for the component.
-     *
-     * @required
-     */
-    label: string;
-    /** Specifies a low value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
-    low: number;
-    /**
-     * Specifies the component's highest allowed value.
-     *
-     * @default 100
-     */
-    max: number;
-    /**
-     * Specifies the component's lowest allowed value.
-     *
-     * @default 0
-     */
-    min: number;
-    /**
-     * Specifies the name of the component.
-     *
-     * Required to pass the component's `value` on form submission.
-     */
-    name: string;
-    /** Specifies the Unicode numeral system used by the component for localization. */
-    numberingSystem: NumberingSystem;
-    /**
-     * When `rangeLabels` is `true`, specifies the format of displayed labels.
-     *
-     * @default "percent"
-     */
-    rangeLabelType: MeterLabelType;
-    /**
-     * When `true`, displays the values of `high`, `low`, `min`, and `max`.
-     *
-     * @default false
-     */
-    rangeLabels: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values.
-     *
-     * @default ""
-     */
-    unitLabel: string;
-    /** Specifies the component's value. */
-    value: number;
-    /**
-     * When `true`, displays the `value`.
-     *
-     * @default false
-     */
-    valueLabel: boolean;
-    /**
-     * When `valueLabel` is `true`, specifies the format of displayed label.
-     *
-     * @default "percent"
-     */
-    valueLabelType: MeterLabelType;
-}
+/**
+ * @cssproperty [--calcite-meter-background-color] - Specifies the background color of the component.
+ * @cssproperty [--calcite-meter-border-color] - Specifies the border color of the component and displayed step lines.
+ * @cssproperty [--calcite-meter-shadow] - Specifies the box shadow of the component.
+ * @cssproperty [--calcite-meter-corner-radius] - Specifies the corner radius of the component.
+ * @cssproperty [--calcite-meter-fill-color] - Specifies the color of the component's fill.
+ * @cssproperty [--calcite-meter-range-text-color] - Specifies the color of the component's range labels.
+ * @cssproperty [--calcite-meter-value-text-color] - Specifies the color of the component's value label.
+ */
+export abstract class Meter extends LitElement {
+  /**
+   * Specifies the appearance of the component.
+   *
+   * @default "outline-fill"
+   */
+  accessor appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the component's display, where
+   * `"single"` displays a single color, and
+   * `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
+   *
+   * @default "range"
+   */
+  accessor fillType: MeterFillType;
+  /**
+   * Specifies the `id` of the component's associated form.
+   *
+   * When not set, the component is associated with its ancestor form element, if one exists.
+   */
+  accessor form: string;
+  /**
+   * When `true`, number values are displayed with a group separator corresponding to the language and country format.
+   *
+   * @default false
+   */
+  accessor groupSeparator: boolean;
+  /** Specifies a high value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
+  accessor high: number;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /** Specifies a low value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
+  accessor low: number;
+  /**
+   * Specifies the component's highest allowed value.
+   *
+   * @default 100
+   */
+  accessor max: number;
+  /** @internal */
+  protected messages: Partial<Record<string, never>> & T9nMeta<Record<string, never>>;
+  /**
+   * Specifies the component's lowest allowed value.
+   *
+   * @default 0
+   */
+  accessor min: number;
+  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  accessor name: string;
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  accessor numberingSystem: NumberingSystem;
+  /**
+   * When `true`, displays the values of `high`, `low`, `min`, and `max`.
+   *
+   * @default false
+   */
+  accessor rangeLabels: boolean;
+  /**
+   * When `rangeLabels` is `true`, specifies the format of displayed labels.
+   *
+   * @default "percent"
+   */
+  accessor rangeLabelType: MeterLabelType;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values.
+   *
+   * @default ""
+   */
+  accessor unitLabel: string;
+  /** Specifies the component's value. */
+  accessor value: number;
+  /**
+   * When `true`, displays the `value`.
+   *
+   * @default false
+   */
+  accessor valueLabel: boolean;
+  /**
+   * When `valueLabel` is `true`, specifies the format of displayed label.
+   *
+   * @default "percent"
+   */
+  accessor valueLabelType: MeterLabelType;
+}

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

@@ -1,6 +1,6 @@
 /*! 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 { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
@@ -8,7 +8,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm } from "../../chunks/form.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-import { j as intersects } from "../../chunks/dom.js";
+import { y as intersects } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {

package/dist/components/calcite-meter/interfaces.d.ts

@@ -1,2 +1,3 @@
 export type MeterLabelType = "percent" | "units";
-export type MeterFillType = "single" | "range";
+
+export type MeterFillType = "single" | "range";

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

@@ -1,7 +1,11 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
 
 /**
+ * @cssproperty [--calcite-navigation-width] - Specifies the width of the component's content area.
+ * @cssproperty [--calcite-navigation-background] - [Deprecated] Use `--calcite-navigation-background-color`. Specifies the background color of the component.
+ * @cssproperty [--calcite-navigation-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-navigation-border-color] - Specifies the component's border color.
  * @slot [logo] - A slot for adding a `calcite-logo` component to the primary navigation level.
  * @slot [user] - A slot for adding a `calcite-user` component to the primary navigation level.
  * @slot [progress] - A slot for adding a `calcite-progress` component to the primary navigation level.
@@ -12,23 +16,25 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
  * @slot [navigation-secondary] - A slot for adding a `calcite-navigation` component in the secondary navigation level. Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.
  * @slot [navigation-tertiary] - A slot for adding a `calcite-navigation` component in the tertiary navigation level.  Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.
  */
-export declare class Navigation extends LitElement {
-    /** When `navigationAction` is `true`, specifies the label of the `calcite-action`. */
-    label: string;
-    /**
-     * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.
-     *
-     * @default false
-     */
-    navigationAction: boolean;
-    /**
-     * When `navigationAction` is `true`, sets focus on the component's action 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>;
-    /** When `navigationAction` is `true`, emits when the displayed action selection changes. */
-    readonly calciteNavigationActionSelect: TargetedEvent<this, void>;
-}
+export abstract class Navigation extends LitElement {
+  /** When `navigationAction` is `true`, specifies an accessible label for the `calcite-action`. */
+  accessor label: string;
+  /**
+   * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.
+   *
+   * @default false
+   */
+  accessor navigationAction: boolean;
+  /**
+   * When `navigationAction` is `true`, sets focus on the component's action 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>;
+  /** When `navigationAction` is `true`, emits when the displayed action selection changes. */
+  readonly calciteNavigationActionSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteNavigationActionSelect: Navigation["calciteNavigationActionSelect"]["detail"];
+  };
+}

package/dist/components/calcite-navigation/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.72 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const CSS = {
   container: "container",

package/dist/components/calcite-navigation/index.d.ts

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