@esri/calcite-components 5.0.0-next.8 → 5.0.0-next.81

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

@@ -1,13 +1,36 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { HeadingLevel } from '../functional/Heading';
-import { OverlayPositioning } from '../../utils/floating-ui';
-import { CollapseDirection, Scale } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { HeadingLevel } from "../functional/Heading.js";
+import type { OverlayPositioning } from "../../utils/floating-ui.js";
+import type { Scale } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @cssproperty [--calcite-flow-item-footer-padding] - [Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer.
+ * @cssproperty [--calcite-flow-item-header-border-block-end] - [Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border.
+ * @cssproperty [--calcite-flow-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-flow-heading-text-color] - Specifies the text color of the component's `heading`.
+ * @cssproperty [--calcite-flow-icon-color] - Specifies the color of the component's icon.
+ * @cssproperty [--calcite-flow-description-text-color] - Specifies the text color of the component's `description`.
+ * @cssproperty [--calcite-flow-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-flow-header-background-color] - Specifies the background color of the component's header.
+ * @cssproperty [--calcite-flow-footer-background-color] - Specifies the background color of the component's footer.
+ * @cssproperty [--calcite-flow-space] - Specifies the padding of the component's `"unnamed (default)"` slot.
+ * @cssproperty [--calcite-flow-header-content-space] - Specifies the padding of the `"header-content"` slot.
+ * @cssproperty [--calcite-flow-footer-space] - Specifies the padding of the component's footer.
+ * @cssproperty [--calcite-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
+ * @cssproperty [--calcite-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
+ * @cssproperty [--calcite-action-background-color-pressed] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
+ * @cssproperty [--calcite-action-text-color-hover] - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
+ * @cssproperty [--calcite-action-text-color-pressed] - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
+ * @cssproperty [--calcite-popover-border-color] - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
+ * @cssproperty [--calcite-flow-header-action-background-color-hover] - Specifies the background color of the component's `calcite-action` items  in the flow item header when hovered.
+ * @cssproperty [--calcite-flow-header-action-background-color-press] - Specifies the background color of the component's `calcite-action` items  in the flow item header when pressed.
+ * @cssproperty [--calcite-flow-header-action-background-color] - Specifies the background color of the component's `calcite-action` items  in the flow item header.
+ * @cssproperty [--calcite-flow-header-action-indicator-color] - Specifies the color of the component's `calcite-action` items' indicator in the flow item header.
+ * @cssproperty [--calcite-flow-header-action-text-color-press] - Specifies the text color of the component's `calcite-action` items in the flow item header when pressed.
+ * @cssproperty [--calcite-flow-header-action-text-color] - Specifies the text color of the component's `calcite-action` items in the flow item header.
  * @slot  - A slot for adding custom content.
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
  * @slot [alerts] - A slot for adding `calcite-alert`s to the component.
@@ -22,138 +45,150 @@ import { IconName } from '../calcite-icon/interfaces';
  * @slot [footer-end] - A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot.
  * @slot [footer-start] - A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot.
  */
-export declare class FlowItem extends LitElement {
-    /** When provided, the method will be called before it is removed from its parent `calcite-flow`. */
-    beforeBack?: () => Promise<void>;
-    /** Passes a function to run before the component closes. */
-    beforeClose: () => Promise<void>;
-    /**
-     * When `true`, displays a close button in the trailing side of the component's header.
-     *
-     * @default false
-     */
-    closable: boolean;
-    /**
-     * When `true`, the component will be hidden.
-     *
-     * @default false
-     */
-    closed: boolean;
-    /**
-     * When `true`, hides the component's content area.
-     *
-     * @default false
-     */
-    collapsed: boolean;
-    /**
-     * When `true`, the component is collapsible.
-     *
-     * @default false
-     */
-    collapsible: boolean;
-    /** A description for the component. */
-    description: string;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** The component header text. */
-    heading: string;
-    /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
-    headingLevel: HeadingLevel;
-    /** 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;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /**
-     * When `true`, the action menu items in the `header-menu-actions` slot are open.
-     *
-     * @default false
-     */
-    menuOpen: boolean;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     * @default "absolute"
-     */
-    overlayPositioning: OverlayPositioning;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * When `true`, the component is displayed within a parent flow.
-     *
-     * @default false
-     */
-    selected: boolean;
-    /**
-     * When `true`, displays a back button in the component's header.
-     *
-     * @internal
-     * @default false
-     */
-    showBackButton: boolean;
-    /**
-     * Scrolls the component's content to a specified set of coordinates.
-     *
-     * @example
-     * myCalciteFlowItem.scrollContentTo({
-     *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
-     *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
-     *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
-     * });
-     * @param options - allows specific coordinates to be defined.
-     * @returns - promise that resolves once the content is scrolled to.
-     */
-    scrollContentTo(options?: ScrollToOptions): Promise<void>;
-    /**
-     * 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)
-     * @returns promise.
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the back button is clicked. */
-    readonly calciteFlowItemBack: TargetedEvent<this, void>;
-    /** Fires when the close button is clicked. */
-    readonly calciteFlowItemClose: TargetedEvent<this, void>;
-    /** Fires when the component's content area is collapsed. */
-    readonly calciteFlowItemCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteFlowItemExpand: TargetedEvent<this, void>;
-    /** Fires when the content is scrolled. */
-    readonly calciteFlowItemScroll: TargetedEvent<this, void>;
-    /** Fires when the collapse button is clicked. */
-    readonly calciteFlowItemToggle: TargetedEvent<this, void>;
-    private messages: Partial<{
-        back: string;
-        close: string;
-        options: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        back: string;
-        close: string;
-        options: string;
-    }>;
-}
+export abstract class FlowItem extends LitElement {
+  /** When provided, the method will be called before it is removed from its parent `calcite-flow`. */
+  accessor beforeBack: (() => Promise<void>) | undefined;
+  /** Passes a function to run before the component closes. */
+  accessor beforeClose: () => Promise<void>;
+  /**
+   * When `true`, displays a close button in the trailing side of the component's header.
+   *
+   * @default false
+   */
+  accessor closable: boolean;
+  /**
+   * When `true`, hides the component.
+   *
+   * @default false
+   */
+  accessor closed: boolean;
+  /**
+   * When `true`, hides the component's content area.
+   *
+   * @default false
+   */
+  accessor collapsed: boolean;
+  /**
+   * When `true`, the component is collapsible.
+   *
+   * @default false
+   */
+  accessor collapsible: boolean;
+  /** Specifies a description for the component. */
+  accessor description: string;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies the component's heading text. */
+  accessor heading: string;
+  /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
+  accessor headingLevel: HeadingLevel;
+  /** 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;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /**
+   * When `true`, the action menu items in the `header-menu-actions` slot are open.
+   *
+   * @default false
+   */
+  accessor menuOpen: boolean;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      back?: string;
+      close?: string;
+      options?: string;
+  };
+  /**
+   * Specifies the type of positioning to use for overlaid content, where:
+   *
+   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   *
+   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   *
+   * @default "absolute"
+   */
+  accessor overlayPositioning: OverlayPositioning;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * When `true`, the component is displayed within a parent flow.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * When `true`, displays a back button in the component's header.
+   *
+   * @default false
+   * @internal
+   */
+  accessor showBackButton: boolean;
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /**
+   * Scrolls the component's content to a specified set of coordinates.
+   *
+   * @param options - allows specific coordinates to be defined.
+   * @returns promise that resolves once the content is scrolled to.
+   * @example
+   * myCalciteFlowItem.scrollContentTo({
+   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+   *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+   * });
+   */
+  scrollContentTo(options?: ScrollToOptions): Promise<void>;
+  /**
+   * 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.
+   * @returns promise.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the back button is clicked. */
+  readonly calciteFlowItemBack: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the close button is clicked. */
+  readonly calciteFlowItemClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is collapsed. */
+  readonly calciteFlowItemCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteFlowItemExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the content is scrolled. */
+  readonly calciteFlowItemScroll: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the collapse button is clicked. */
+  readonly calciteFlowItemToggle: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteFlowItemBack: FlowItem["calciteFlowItemBack"]["detail"];
+    calciteFlowItemClose: FlowItem["calciteFlowItemClose"]["detail"];
+    calciteFlowItemCollapse: FlowItem["calciteFlowItemCollapse"]["detail"];
+    calciteFlowItemExpand: FlowItem["calciteFlowItemExpand"]["detail"];
+    calciteFlowItemScroll: FlowItem["calciteFlowItemScroll"]["detail"];
+    calciteFlowItemToggle: FlowItem["calciteFlowItemToggle"]["detail"];
+  };
+}

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

@@ -1,13 +1,16 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.81 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { g as getElementDir } from "../../chunks/dom.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
-import { S as SLOTS$1 } from "../../chunks/resources3.js";
+import { S as SLOTS$1 } from "../../chunks/resources5.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   backButton: "back-button"
 };
@@ -29,7 +32,7 @@ const SLOTS = {
   footerEnd: "footer-end",
   footerStart: "footer-start"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:none;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([selected]){display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.back-button{border-width:0px;border-style:solid;border-inline-end-width:1px;border-color:var(--calcite-flow-border-color, var(--calcite-color-border-3))}calcite-panel{--calcite-panel-background-color: var(--calcite-flow-background-color);--calcite-panel-border-color: var(--calcite-flow-border-color, var(--calcite-flow-item-header-border-block-end));--calcite-panel-corner-radius: var(--calcite-flow-corner-radius);--calcite-panel-description-text-color: var(--calcite-flow-description-text-color);--calcite-panel-footer-background-color: var(--calcite-flow-footer-background-color);--calcite-panel-footer-space: var(--calcite-flow-footer-space, var(--calcite-flow-item-footer-padding));--calcite-panel-header-action-background-color-hover: var(--calcite-flow-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-flow-header-action-background-color-press);--calcite-panel-header-action-background-color: var(--calcite-flow-header-action-background-color);--calcite-panel-header-action-indicator-color: var(--calcite-flow-header-action-indicator-color);--calcite-panel-header-action-text-color-press: var(--calcite-flow-header-action-text-color-press);--calcite-panel-header-action-text-color: var(--calcite-flow-header-action-text-color);--calcite-panel-header-background-color: var(--calcite-flow-header-background-color);--calcite-panel-header-content-space: var(--calcite-flow-header-content-space);--calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);--calcite-panel-icon-color: var(--calcite-flow-icon-color);--calcite-panel-space: var(--calcite-flow-space)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:none;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([selected]){display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-panel{--calcite-panel-background-color: var(--calcite-flow-background-color);--calcite-panel-border-color: var(--calcite-flow-border-color, var(--calcite-flow-item-header-border-block-end));--calcite-panel-corner-radius: var(--calcite-flow-corner-radius);--calcite-panel-description-text-color: var(--calcite-flow-description-text-color);--calcite-panel-footer-background-color: var(--calcite-flow-footer-background-color);--calcite-panel-footer-space: var(--calcite-flow-footer-space, var(--calcite-flow-item-footer-padding));--calcite-panel-header-action-background-color-hover: var(--calcite-flow-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-flow-header-action-background-color-press);--calcite-panel-header-action-background-color: var(--calcite-flow-header-action-background-color);--calcite-panel-header-action-indicator-color: var(--calcite-flow-header-action-indicator-color);--calcite-panel-header-action-text-color-press: var(--calcite-flow-header-action-text-color-press);--calcite-panel-header-action-text-color: var(--calcite-flow-header-action-text-color);--calcite-panel-header-background-color: var(--calcite-flow-header-background-color);--calcite-panel-header-content-space: var(--calcite-flow-header-content-space);--calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);--calcite-panel-icon-color: var(--calcite-flow-icon-color);--calcite-panel-space: var(--calcite-flow-space)}:host([hidden]){display:none}[hidden]{display:none}`;
 class FlowItem extends LitElement {
   constructor() {
     super(...arguments);
@@ -37,6 +40,7 @@ class FlowItem extends LitElement {
     this.containerRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.closable = false;
     this.closed = false;
     this.collapseDirection = "down";
@@ -50,6 +54,7 @@ class FlowItem extends LitElement {
     this.scale = "m";
     this.selected = false;
     this.showBackButton = false;
+    this.topLayerDisabled = false;
     this.calciteFlowItemBack = createEvent();
     this.calciteFlowItemClose = createEvent({ cancelable: false });
     this.calciteFlowItemCollapse = createEvent({ cancelable: false });
@@ -59,7 +64,7 @@ class FlowItem extends LitElement {
     this.calciteInternalFlowItemChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { beforeBack: [0, {}, { attribute: false }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], showBackButton: [5, {}, { type: Boolean }] };
+    this.properties = { beforeBack: [0, {}, { attribute: false }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], showBackButton: [5, {}, { type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -82,9 +87,6 @@ class FlowItem extends LitElement {
       }
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   handleInternalPanelScroll(event) {
     if (event.target !== this.containerRef.value) {
       return;
@@ -117,11 +119,11 @@ class FlowItem extends LitElement {
     const { showBackButton, backButtonClick, messages } = this;
     const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
-    return showBackButton ? keyed("flow-back-button", html`<calcite-action .ariaLabel=${label} class=${safeClassMap(CSS.backButton)} .icon=${icon} @click=${backButtonClick} scale=s slot=${SLOTS.headerActionsStart} .text=${label} title=${label ?? nothing} ${ref(this.backButtonRef)}></calcite-action>`) : null;
+    return showBackButton ? keyed("flow-back-button", html`<calcite-action .ariaLabel=${label} class=${safeClassMap(CSS.backButton)} .icon=${icon} @click=${backButtonClick} .scale=${this.scale} slot=${SLOTS.headerActionsStart} .text=${label} title=${label ?? nothing} ${ref(this.backButtonRef)}></calcite-action>`) : null;
   }
   render() {
     const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, icon, iconFlipRtl } = this;
-    return InteractiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapseDirection=${collapseDirection} .collapsed=${collapsed} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messages} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
+    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapseDirection=${collapseDirection} .collapsed=${collapsed} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messages} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
   }
 }
 customElement("calcite-flow-item", FlowItem);

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

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

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

@@ -1,32 +1,33 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { ColorStop, DataSeries } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ColorStop, DataSeries } from "./interfaces.js";
 
-export declare class Graph extends LitElement {
-    /**
-     * Array of values describing a single color stop ([offset, color, opacity])
-     * These color stops should be sorted by offset value.
-     */
-    colorStops: ColorStop[];
-    /**
-     * Array of tuples describing a single data point ([x, y])
-     * These data points should be sorted by x-axis value.
-     */
-    data: DataSeries;
-    /** End of highlight color if highlighting range. */
-    highlightMax: number;
-    /** Start of highlight color if highlighting range. */
-    highlightMin: number;
-    /**
-     * Highest point of the range.
-     *
-     * @required
-     */
-    max: number;
-    /**
-     * Lowest point of the range.
-     *
-     * @required
-     */
-    min: number;
-}
+/** @cssproperty [--calcite-graph-highlight-fill-color] - Specifies the fill color of the `highlight` element, when present. */
+export abstract class Graph extends LitElement {
+  /**
+   * Array of values describing a single color stop ([offset, color, opacity])
+   * These color stops should be sorted by offset value.
+   */
+  accessor colorStops: ColorStop[];
+  /**
+   * Array of tuples describing a single data point ([x, y])
+   * These data points should be sorted by x-axis value.
+   */
+  accessor data: DataSeries;
+  /** End of highlight color if highlighting range. */
+  accessor highlightMax: number;
+  /** Start of highlight color if highlighting range. */
+  accessor highlightMin: number;
+  /**
+   * Highest point of the range.
+   *
+   * @required
+   */
+  accessor max: number;
+  /**
+   * Lowest point of the range.
+   *
+   * @required
+   */
+  accessor min: number;
+}

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

@@ -1,3 +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.81 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html, svg } from "lit";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
@@ -74,7 +77,7 @@ function area({ data, min, max, t }) {
   const end = bezier(p1, last, m, slopeSingle(p1, last, m), t);
   return `${commands} ${end} L ${maxX},${minY} Z`;
 }
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:block;block-size:100%}.svg{fill:currentColor;stroke:transparent;margin:0;display:block;block-size:100%;inline-size:100%;padding:0}.svg .graph-path--highlight{fill:var(--calcite-graph-highlight-fill-color, var(--calcite-color-brand));opacity:.5}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:block;block-size:100%}.svg{fill:currentColor;stroke:transparent;margin:0;display:block;block-size:100%;inline-size:100%;padding:0}.svg .graph-path--highlight{fill:var(--calcite-graph-highlight-fill-color, var(--calcite-color-brand));opacity:.5}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   svg: "svg",
   graphPath: "graph-path",

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

@@ -1,23 +1,14 @@
-import { Dimensions } from '../interfaces';
-/** x,y coordinate set */
-export type Point = [number, number];
 /** array of coordinates */
 export type DataSeries = Point[];
-/** Function that converts point from data space to pixels */
-export type Translator = (p: Point) => Point;
-/** Min/Max from all values of a given data set */
-export interface Extent {
-    min: Point;
-    max: Point;
-}
-export interface Graph extends Extent {
-    data: DataSeries;
-    t: Translator;
-}
-export interface TranslateOptions extends Dimensions, Extent {
-}
+
 export interface ColorStop {
-    offset: number;
-    color: string;
-    opacity?: number;
+  offset: number;
+  color: string;
+  opacity?: number;
 }
+
+/** x,y coordinate set */
+export type Point = [
+    number,
+    number
+];