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

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

@@ -1,132 +1,130 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FormOwner } from '../../utils/form';
-import { LabelableComponent } from '../../utils/label';
-import { Appearance, FlipContext, Kind, Scale, Width } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
-import { Label } from '../calcite-label/customElement.js';
-import { ButtonAlignment } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
+import type { ButtonAlignment } from "./interfaces.js";
 
 /**
  * Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this.
  *
  * It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission
  *
+ * @cssproperty [--calcite-button-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-button-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-button-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-button-icon-color] - Specifies the component's `iconStart` and `iconEnd` color.
+ * @cssproperty [--calcite-button-loader-color] - Specifies the component's loader color.
+ * @cssproperty [--calcite-button-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-button-shadow] - Specifies the component's shadow.
  * @slot  - A slot for adding text.
  */
-export declare class Button extends LitElement {
-    /**
-     * Specifies the alignment of the component's elements.
-     *
-     * @default "center"
-     */
-    alignment: ButtonAlignment;
-    /**
-     * Specifies the appearance style of the component.
-     *
-     * @default "solid"
-     */
-    appearance: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
-     * Without a value, the browser will suggest a filename/extension.
-     *
-     * @default false
-     * @see [Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
-     */
-    download: string | boolean;
-    /**
-     * 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;
-    /** Specifies the URL of the linked resource, 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;
-    /**
-     * Specifies the kind of the component, which will apply to the border and background if applicable.
-     *
-     * @default "brand"
-     */
-    kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
-    /** Accessible name for the component. */
-    label: string;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /** Specifies the name of the component on form submission. */
-    name?: string;
-    /**
-     * 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;
-    /**
-     * When `true`, adds a round style to the component.
-     *
-     * @default false
-     */
-    round: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Specifies if the component is a child of a `calcite-split-button`.
-     *
-     * @default false
-     */
-    splitChild: "primary" | "secondary" | false;
-    /**
-     * 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 default behavior of the component.
-     *
-     * @default "button"
-     * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
-     */
-    type: HTMLButtonElement["type"];
-    /**
-     * Specifies the width of the component.
-     *
-     * @default "auto"
-     */
-    width: Extract<Width, "auto" | "half" | "full">;
-    /**
-     * 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>;
-    private messages: Partial<{
-        loading: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        loading: string;
-    }>;
-}
+export abstract class Button extends LitElement {
+  /**
+   * Specifies the alignment of the component's elements.
+   *
+   * @default "center"
+   */
+  accessor alignment: ButtonAlignment;
+  /**
+   * Specifies the appearance style of the component.
+   *
+   * @default "solid"
+   */
+  accessor appearance: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
+   * Without a value, the browser will suggest a filename/extension.
+   *
+   * @default false
+   * @see [Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
+   */
+  accessor download: string | boolean;
+  /**
+   * 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;
+  /** Specifies the URL of the linked resource, 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 the kind of the component, which will apply to the border and background if applicable.
+   *
+   * @default "brand"
+   */
+  accessor kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: { loading?: string; };
+  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  accessor name: string | undefined;
+  /**
+   * 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;
+  /**
+   * When `true`, adds a round style to the component.
+   *
+   * @default false
+   */
+  accessor round: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Specifies if the component is a child of a `calcite-split-button`.
+   *
+   * @default false
+   */
+  accessor splitChild: "primary" | "secondary" | false;
+  /**
+   * 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 default behavior of the component.
+   *
+   * @default "button"
+   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
+   */
+  accessor type: HTMLButtonElement["type"];
+  /**
+   * Specifies the width of the component.
+   *
+   * @default "auto"
+   */
+  accessor width: Extract<Width, "auto" | "half" | "full">;
+  /**
+   * 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>;
+}

package/dist/components/calcite-button/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.73 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -12,7 +12,7 @@ import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../.
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { D as hasVisibleContent } from "../../chunks/dom.js";
+import { i as hasVisibleContent } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {

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

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

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

@@ -1,2 +1,3 @@
 export type ButtonAlignment = "start" | "end" | "center" | "space-between" | "icon-start-space-between" | "icon-end-space-between";
-export type DropdownIconType = "chevron" | "caret" | "ellipsis" | "overflow";
+
+export type DropdownIconType = "chevron" | "caret" | "ellipsis" | "overflow";

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

@@ -1,8 +1,20 @@
 /// <reference path="../../index.d.ts" />
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { LogicalFlowPosition, SelectionMode } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { LogicalFlowPosition } from "../interfaces.js";
 
 /**
+ * @cssproperty [--calcite-card-accent-color-selected] - Specifies the component's accent color when `selected`.
+ * @cssproperty [--calcite-card-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-card-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-card-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-card-selection-background-color-hover] - Specifies the component's selection element background color when hovered.
+ * @cssproperty [--calcite-card-selection-background-color-press] - Specifies the component's selection element background color when active.
+ * @cssproperty [--calcite-card-selection-background-color] - [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color.
+ * @cssproperty [--calcite-card-selection-color-hover] - Specifies the component's selection element color when hovered or focused.
+ * @cssproperty [--calcite-card-selection-color] - Specifies the component's selection element color.
+ * @cssproperty [--calcite-card-selection-icon-color-hover] - [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered.
+ * @cssproperty [--calcite-card-selection-icon-color-selected] - [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`.
+ * @cssproperty [--calcite-card-shadow] - Specifies the component's shadow.
  * @slot  - A slot for adding content.
  * @slot [thumbnail] - A slot for adding a thumbnail.
  * @slot [heading] - A slot for adding a heading.
@@ -10,57 +22,55 @@ import { LogicalFlowPosition, SelectionMode } from '../interfaces';
  * @slot [footer-start] - A slot for adding a leading footer.
  * @slot [footer-end] - A slot for adding a trailing footer.
  */
-export declare class Card extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Accessible name for the component. */
-    label: string;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * When `true`, the component is selectable.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 - Use the `selectionMode` property on a parent `calcite-card-group` instead.
-     * @default false
-     */
-    selectable: boolean;
-    /**
-     * When `true`, the component is selected.
-     *
-     * @default false
-     */
-    selected: boolean;
-    /**
-     * Sets the placement of the thumbnail defined in the `thumbnail` slot.
-     *
-     * @default "block-start"
-     */
-    thumbnailPosition: LogicalFlowPosition;
-    /**
-     * 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>;
-    /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */
-    readonly calciteCardSelect: TargetedEvent<this, void>;
-    private messages: Partial<{
-        select: string;
-        loading: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        select: string;
-        loading: string;
-    }>;
-}
+export abstract class Card extends LitElement {
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      select?: string;
+      loading?: string;
+  };
+  /**
+   * When `true`, the component is selectable.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use the `selectionMode` property on a parent `calcite-card-group` instead.
+   * @default false
+   */
+  accessor selectable: boolean;
+  /**
+   * When `true`, the component is selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * Sets the placement of the thumbnail defined in the `thumbnail` slot.
+   *
+   * @default "block-start"
+   */
+  accessor thumbnailPosition: LogicalFlowPosition;
+  /**
+   * 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>;
+  /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */
+  readonly calciteCardSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteCardSelect: Card["calciteCardSelect"]["detail"];
+  };
+}

package/dist/components/calcite-card/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.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 { i as isActivationKey } from "../../chunks/key.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";

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

@@ -1,5 +1 @@
-import "../calcite-label/index.js";
-import "../calcite-checkbox/index.js";
-import "../calcite-icon/index.js";
-import "../calcite-loader/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-card-group/customElement.d.ts

@@ -1,39 +1,44 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { SelectionMode } from '../interfaces';
-import { Card } from '../calcite-card/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { SelectionMode } from "../interfaces.js";
+import type { Card } from "../calcite-card/customElement.js";
 
-/** @slot  - A slot for adding one or more `calcite-card`s. */
-export declare class CardGroup extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Accessible name for the component.
-     *
-     * @required
-     */
-    label: string;
-    /** Specifies the component's selected items. */
-    readonly selectedItems: HTMLCalciteCardElement[];
-    /**
-     * Specifies the selection mode of the component.
-     *
-     * @default "none"
-     */
-    selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
-    /**
-     * 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>;
-    /** Emits when the component's selection changes and the `selectionMode` is not `none`. */
-    readonly calciteCardGroupSelect: TargetedEvent<this, void>;
-}
+/**
+ * @cssproperty [--calcite-card-group-gap] - [Deprecated] Use `--calcite-card-group-space`. Specifies the gap between slotted elements.
+ * @cssproperty [--calcite-card-group-space] - Specifies the space between slotted elements.
+ * @slot  - A slot for adding one or more `calcite-card`s.
+ */
+export abstract class CardGroup extends LitElement {
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /** Specifies the component's selected items. */
+  get selectedItems(): Card[];
+  /**
+   * Specifies the selection mode of the component.
+   *
+   * @default "none"
+   */
+  accessor selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
+  /**
+   * 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>;
+  /** Emits when the component's selection changes and the `selectionMode` is not `none`. */
+  readonly calciteCardGroupSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteCardGroupSelect: CardGroup["calciteCardGroupSelect"]["detail"];
+  };
+}

package/dist/components/calcite-card-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.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 { d as focusElementInGroup } from "../../chunks/dom.js";
+import { f as focusElementInGroup } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-spacing-md)))}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;