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

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

@@ -1,109 +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";
+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 style 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 highest allowed value of the component.
-     *
-     * @default 100
-     */
-    max: number;
-    /**
-     * Specifies the lowest allowed value of the component.
-     *
-     * @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 current value of the component. */
-    value: number;
-    /**
-     * When `true`, displays the current 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,11 +1,14 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
+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 { b as getSupportedLocale, n as numberStringFormatter } from "../../chunks/locale.js";
-import { j as intersects } from "../../chunks/dom.js";
+import { n as numberStringFormatter } from "../../chunks/locale.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 = {
@@ -23,7 +26,7 @@ const CSS = {
   warning: "fill-warning",
   danger: "fill-danger"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host{display:flex;--calcite-internal-meter-space: var(--calcite-spacing-base);--calcite-internal-meter-height: var(--calcite-spacing-lg);--calcite-internal-meter-font-size: var(--calcite-font-size--1);--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand));--calcite-internal-meter-background-color: var(--calcite-meter-background-color, var(--calcite-color-foreground-2));--calcite-internal-meter-border-color: var(--calcite-meter-border-color, var(--calcite-color-border-3));--calcite-internal-meter-shadow: var(--calcite-meter-shadow, var(--calcite-shadow-none));--calcite-internal-meter-corner-radius: var(--calcite-meter-corner-radius, 9999px);--calcite-internal-meter-value-text-color: var(--calcite-meter-value-text-color, var(--calcite-color-text-1));--calcite-internal-meter-range-text-color: var(--calcite-meter-range-text-color, var(--calcite-color-text-3))}:host([scale=s]){--calcite-internal-meter-height: var(--calcite-spacing-md);--calcite-internal-meter-font-size: var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-meter-height: var(--calcite-spacing-xxl);--calcite-internal-meter-font-size: var(--calcite-font-size-0)}:host([appearance=solid]){--calcite-internal-meter-border-color: var(--calcite-color-foreground-3);--calcite-internal-meter-background-color: var(--calcite-color-foreground-3)}:host([appearance=outline]){--calcite-internal-meter-background-color: transparent}.fill{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand))}.fill-danger{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-danger))}.fill-success{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-success))}.fill-warning{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-warning))}.container{position:relative;display:flex;align-items:center;margin:0;inline-size:var(--calcite-container-size-content-fluid);block-size:var(--calcite-internal-meter-height);background-color:var(--calcite-internal-meter-background-color);border:var(--calcite-border-width-sm) solid var(--calcite-internal-meter-border-color);border-radius:var(--calcite-internal-meter-corner-radius);box-shadow:var(--calcite-internal-meter-shadow)}.value-visible{margin-block-start:var(--calcite-spacing-xxl)}.steps-visible{margin-block-end:var(--calcite-spacing-xxl)}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-internal-meter-space);background-color:var(--calcite-internal-meter-border-color)}.label{position:absolute;font-size:var(--calcite-internal-meter-font-size)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + .5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-internal-meter-value-text-color)}.label-range{color:var(--calcite-internal-meter-range-text-color);inset-block-start:calc(100% + .5em)}.label-range .unit-label{font-weight:var(--calcite-font-weight-medium)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;transition-timing-function:cubic-bezier(.4,0,.2,1);inset-inline-start:var(--calcite-internal-meter-space);inset-block:var(--calcite-internal-meter-space);border-radius:var(--calcite-internal-meter-corner-radius);max-inline-size:calc(100% - var(--calcite-internal-meter-space) * 2);min-inline-size:calc(var(--calcite-internal-meter-height) - var(--calcite-internal-meter-space) * 2);background-color:var(--calcite-internal-meter-fill-color);transition-property:inline-size,background-color,box-shadow}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-internal-meter-height));box-shadow:0 0 0 1px var(--calcite-internal-meter-fill-color)}`;
+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([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host{display:flex;--calcite-internal-meter-space: var(--calcite-spacing-base);--calcite-internal-meter-height: var(--calcite-spacing-lg);--calcite-internal-meter-font-size: var(--calcite-font-size--1);--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand));--calcite-internal-meter-background-color: var(--calcite-meter-background-color, var(--calcite-color-foreground-2));--calcite-internal-meter-border-color: var(--calcite-meter-border-color, var(--calcite-color-border-3));--calcite-internal-meter-shadow: var(--calcite-meter-shadow, var(--calcite-shadow-none));--calcite-internal-meter-corner-radius: var(--calcite-meter-corner-radius, 9999px);--calcite-internal-meter-value-text-color: var(--calcite-meter-value-text-color, var(--calcite-color-text-1));--calcite-internal-meter-range-text-color: var(--calcite-meter-range-text-color, var(--calcite-color-text-3))}:host([scale=s]){--calcite-internal-meter-height: var(--calcite-spacing-md);--calcite-internal-meter-font-size: var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-meter-height: var(--calcite-spacing-xxl);--calcite-internal-meter-font-size: var(--calcite-font-size-0)}:host([appearance=solid]){--calcite-internal-meter-border-color: var(--calcite-color-foreground-3);--calcite-internal-meter-background-color: var(--calcite-color-foreground-3)}:host([appearance=outline]){--calcite-internal-meter-background-color: transparent}.fill{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand))}.fill-danger{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-danger))}.fill-success{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-success))}.fill-warning{--calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-warning))}.container{position:relative;display:flex;align-items:center;margin:0;inline-size:var(--calcite-container-size-content-fluid);block-size:var(--calcite-internal-meter-height);background-color:var(--calcite-internal-meter-background-color);border:var(--calcite-border-width-sm) solid var(--calcite-internal-meter-border-color);border-radius:var(--calcite-internal-meter-corner-radius);box-shadow:var(--calcite-internal-meter-shadow)}.value-visible{margin-block-start:var(--calcite-spacing-xxl)}.steps-visible{margin-block-end:var(--calcite-spacing-xxl)}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-internal-meter-space);background-color:var(--calcite-internal-meter-border-color)}.label{position:absolute;font-size:var(--calcite-internal-meter-font-size)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + .5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-internal-meter-value-text-color)}.label-range{color:var(--calcite-internal-meter-range-text-color);inset-block-start:calc(100% + .5em)}.label-range .unit-label{font-weight:var(--calcite-font-weight-medium)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;transition-timing-function:cubic-bezier(.4,0,.2,1);inset-inline-start:var(--calcite-internal-meter-space);inset-block:var(--calcite-internal-meter-space);border-radius:var(--calcite-internal-meter-corner-radius);max-inline-size:calc(100% - var(--calcite-internal-meter-space) * 2);min-inline-size:calc(var(--calcite-internal-meter-height) - var(--calcite-internal-meter-space) * 2);background-color:var(--calcite-internal-meter-fill-color);transition-property:inline-size,background-color,box-shadow}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-internal-meter-height));box-shadow:0 0 0 1px var(--calcite-internal-meter-fill-color)}`;
 class Meter extends LitElement {
   constructor() {
     super(...arguments);
@@ -121,7 +124,7 @@ class Meter extends LitElement {
   formatLabel(value, labelType) {
     if (labelType === "percent") {
       if (!this.percentFormatting) {
-        const locale = getSupportedLocale(this.messages._lang);
+        const locale = this.messages._lang;
         const formatter = new Intl.NumberFormat(locale, {
           useGrouping: this.groupSeparator,
           style: "percent"

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";
 
 /**
+ * @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,22 +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 - 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,8 +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.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
+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",
@@ -27,7 +30,7 @@ const SLOTS = {
 const ICONS = {
   hamburger: "hamburger"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([hidden]){display:none}[hidden]{display:none}:host{display:block}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary,.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0}`;
+const styles = css`:host([hidden]){display:none}[hidden]{display:none}:host{display:block}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary,.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0}slot[name=navigation-action] calcite-action{align-self:center;margin-inline-start:var(--calcite-spacing-sm)}`;
 class Navigation extends LitElement {
   constructor() {
     super(...arguments);

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

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

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

@@ -1,52 +1,58 @@
 /// <reference path="../../index.d.ts" />
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { HeadingLevel } from '../functional/Heading';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { HeadingLevel } from "../functional/Heading.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
-export declare class NavigationLogo extends LitElement {
-    /**
-     * When `true`, the component is highlighted.
-     *
-     * @default false
-     */
-    active: boolean;
-    /** A description for the component, which displays below the `heading`. */
-    description: string;
-    /** Specifies heading text for the component, such as a product or organization name. */
-    heading: string;
-    /** Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. */
-    headingLevel: HeadingLevel;
-    /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
-    href: string;
-    /** Specifies an icon to display. */
-    icon: IconName;
-    /**
-     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
-     *
-     * @default false
-     */
-    iconFlipRtl: boolean;
-    /** Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. */
-    label: 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;
-    /**
-     * 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 `src` to an image. */
-    thumbnail: 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>;
-}
+/**
+ * @cssproperty [--calcite-navigation-accent-color] - When `active`, specifies the component's border color.
+ * @cssproperty [--calcite-navigation-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-navigation-logo-heading-text-color] - Specifies the component's `heading` text color.
+ * @cssproperty [--calcite-navigation-logo-text-color] - Specifies the component's `description` text color.
+ */
+export abstract class NavigationLogo extends LitElement {
+  /**
+   * When `true`, the component is highlighted.
+   *
+   * @default false
+   */
+  accessor active: boolean;
+  /** Specifies a description for the component. Displays below the `heading`. */
+  accessor description: string;
+  /** 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 the URL destination of the component, which can be set as an absolute or relative path. */
+  accessor href: string;
+  /** Specifies an icon to display. */
+  accessor icon: IconName;
+  /**
+   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   *
+   * @default false
+   */
+  accessor iconFlipRtl: boolean;
+  /** Specifies an accessible label for the component. */
+  accessor label: 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)
+   */
+  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 `src` to an image. */
+  accessor thumbnail: 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>;
+}

package/dist/components/calcite-navigation-logo/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.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
@@ -14,7 +17,7 @@ const CSS = {
   standalone: "standalone",
   icon: "icon"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:inline-flex}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent);transition-property:background-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.image,.icon{margin:0;display:flex;block-size:1.75rem;padding-inline:1rem;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, inherit)))}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1))}.standalone{font-size:var(--calcite-font-size-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:inline-flex}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent);transition-property:background-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.image,.icon{margin:0;display:flex;block-size:1.75rem;padding-inline:1rem;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, var(--calcite-ui-icon-color, inherit))))}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-relative-md);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1))}.standalone{font-size:var(--calcite-font-size-relative-lg)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}`;
 class NavigationLogo extends LitElement {
   constructor() {
     super(...arguments);

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

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

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

@@ -1,34 +1,42 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
-export declare class NavigationUser extends LitElement {
-    /**
-     * When `true`, the component is highlighted.
-     *
-     * @default false
-     */
-    active: boolean;
-    /** Specifies the full name of the user. */
-    fullName: string;
-    /** Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies. */
-    label: string;
-    /**
-     * When `true`, hides the `fullName` and `username` contents.
-     *
-     * @default false
-     */
-    textDisabled: boolean;
-    /** Specifies the `src` to an image (remember to add a token if the user is private). */
-    thumbnail: string;
-    /** Specifies the unique id of the user. */
-    userId: string;
-    /** Specifies the username of the user. */
-    username: 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>;
-}
+/**
+ * @cssproperty [--calcite-navigation-accent-color] - When `active`, specifies the components's border color.
+ * @cssproperty [--calcite-navigation-user-avatar-corner-radius] - Specifies the component's avatar corner radius.
+ * @cssproperty [--calcite-navigation-user-avatar-color] - Specifies the component's avatar icon color.
+ * @cssproperty [--calcite-navigation-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-navigation-user-full-name-text-color] - Specifies the component's `fullName` text color.
+ * @cssproperty [--calcite-navigation-user-name-text-color] - Specifies the component's `username` text color.
+ */
+export abstract class NavigationUser extends LitElement {
+  /**
+   * When `true`, the component is highlighted.
+   *
+   * @default false
+   */
+  accessor active: boolean;
+  /** Specifies the full name of the user. */
+  accessor fullName: string;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * When `true`, hides the `fullName` and `username` contents.
+   *
+   * @default false
+   */
+  accessor textDisabled: boolean;
+  /** Specifies the `src` to an image (remember to add a token if the user is private). */
+  accessor thumbnail: string;
+  /** Specifies the unique id of the user. */
+  accessor userId: string;
+  /** Specifies the username of the user. */
+  accessor username: 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>;
+}

package/dist/components/calcite-navigation-user/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.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
@@ -9,7 +12,7 @@ const CSS = {
   username: "username",
   button: "button"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{margin:0;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;outline-color:transparent;font-family:inherit;border:none;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent)));border-block-end:2px solid var(--calcite-color-transparent)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}calcite-avatar{padding-inline:1rem;--calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius);--calcite-avatar-color: var(--calcite-navigation-user-avatar-color)}calcite-avatar~.text-container{padding-inline-start:0px}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1))}.username{font-size:var(--calcite-font-size--1);color:var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2))}:host(:hover) .button,:host(:focus) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-2)}:host(:focus) .button{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:active) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-3)}:host([active]) .button{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{margin:0;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;font-family:inherit;border:none;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent)));border-block-end:2px solid var(--calcite-color-transparent)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}calcite-avatar{padding-inline:1rem;--calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius);--calcite-avatar-color: var(--calcite-navigation-user-avatar-color)}calcite-avatar~.text-container{padding-inline-start:0px}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-relative-md);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1))}.username{font-size:var(--calcite-font-size--1);color:var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2))}:host(:hover) .button,:host(:focus) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-2)}:host(:focus) .button{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:active) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-3)}:host([active]) .button{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
 class NavigationUser extends LitElement {
   constructor() {
     super(...arguments);