@arcgis/toolkit 5.2.0-next.98 → 6.0.0-next.0

package/dist/{dom-Bnc7oSYx.js → chunks/dom.js}

@@ -1,5 +1,5 @@
-import { getSlotAssignedElements as getSlotAssignedElements$1, slotChangeGetAssignedElements as slotChangeGetAssignedElements$1, slotChangeGetAssignedNodes as slotChangeGetAssignedNodes$1, slotChangeGetTextContent as slotChangeGetTextContent$1, slotChangeHasAssignedElement as slotChangeHasAssignedElement$1, slotChangeHasAssignedNode as slotChangeHasAssignedNode$1, slotChangeHasContent as slotChangeHasContent$1, slotChangeHasTextContent as slotChangeHasTextContent$1 } from "./dom/slots.js";
-import { log } from "./log.js";
+import { getSlotAssignedElements as getSlotAssignedElements$1, slotChangeGetAssignedElements as slotChangeGetAssignedElements$1, slotChangeGetAssignedNodes as slotChangeGetAssignedNodes$1, slotChangeGetTextContent as slotChangeGetTextContent$1, slotChangeHasAssignedElement as slotChangeHasAssignedElement$1, slotChangeHasAssignedNode as slotChangeHasAssignedNode$1, slotChangeHasContent as slotChangeHasContent$1, slotChangeHasTextContent as slotChangeHasTextContent$1 } from "../dom/slots.js";
+import { log } from "../log.js";
 const allowedTags = ["arcgis-map", "arcgis-scene", "arcgis-link-chart"];
 function resolveReferenceElement$1(component, referenceElementString) {
   const referenceElement = referenceElementString ?? component.referenceElement;
@@ -187,22 +187,26 @@ const setFocus = (ref, selector = "") => {
   }
   return false;
 };
+function getElementWindow(element) {
+  return element.ownerDocument.defaultView || window;
+}
 export {
-  getClosestElement as a,
-  getSlotAssignedElements as b,
+  getElementAttribute as a,
+  getClosestElement as b,
   classes as c,
-  resolveReferenceElement as d,
-  slotChangeGetAssignedElements as e,
+  getSlotAssignedElements as d,
+  resolveReferenceElement as e,
   focusElement as f,
-  getElementAttribute as g,
-  slotChangeGetAssignedNodes as h,
-  slotChangeGetTextContent as i,
-  slotChangeHasAssignedElement as j,
-  slotChangeHasAssignedNode as k,
-  slotChangeHasContent as l,
-  slotChangeHasTextContent as m,
-  unsafeGetElementDirection as n,
+  getElementWindow as g,
+  slotChangeGetAssignedElements as h,
+  slotChangeGetAssignedNodes as i,
+  slotChangeGetTextContent as j,
+  slotChangeHasAssignedElement as k,
+  slotChangeHasAssignedNode as l,
+  slotChangeHasContent as m,
+  slotChangeHasTextContent as n,
   observeAncestorsMutation as o,
+  unsafeGetElementDirection as p,
   resolveReferenceElement$1 as r,
   setFocusOnElement as s,
   unsafeGetCalciteModeName as u

package/dist/dom/color.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Get the resolved color from a CSS custom property on an element.
+ *
+ * Resolves `light-dark()` values using the element's inherited color scheme,
+ * including styles in its shadow root. Returns `undefined` if the property is
+ * missing. The returned value is a CSS color string, not a parsed color.
+ *
+ * @public
+ * @param element The element on which to read the custom property.
+ * @param propertyName The CSS custom property containing a color.
+ * @returns The resolved CSS color, or `undefined` if the property is missing.
+ *
+ * @example
+ * ```ts
+ * const textColor = getCssColor(element, "--app-text-color");
+ * const fallbackColor = getCssColor(element, "--optional-color") ?? "black";
+ * ```
+ *
+ * @example
+ * ```css
+ * .panel {
+ *   color-scheme: dark;
+ *   --panel-color: light-dark(#ffffff, #202020);
+ * }
+ * ```
+ * ```ts
+ * // Resolves to the dark color in the context of the panel.
+ * const panelColor = getCssColor(panel, "--panel-color");
+ * ```
+ */
+export declare function getCssColor(element: Element, propertyName: string): string | undefined;
+/**
+ * Get the effective light or dark color scheme for an element.
+ *
+ * A computed `color-scheme` containing only `light` or only `dark` takes
+ * precedence. If both or neither are allowed, the system color preference
+ * determines the result. This is a snapshot; call again after styles or the
+ * system preference change.
+ *
+ * @public
+ * @param element The element whose computed color scheme is used.
+ * @returns The effective color scheme.
+ *
+ * @example
+ * ```ts
+ * // An element with `color-scheme: dark` returns "dark".
+ * const scheme = getEffectiveColorScheme(element);
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With `color-scheme: light dark`, the preferred system scheme is returned.
+ * const preferredScheme = getEffectiveColorScheme(element);
+ * ```
+ */
+export declare function getEffectiveColorScheme(element: Element): "dark" | "light";

package/dist/dom/color.js

@@ -0,0 +1,37 @@
+import { g as getElementWindow } from "../chunks/dom.js";
+function getCssColor(element, propertyName) {
+  const elWindow = getElementWindow(element);
+  const cssColor = elWindow.getComputedStyle(element).getPropertyValue(propertyName).trim();
+  if (!cssColor) {
+    return void 0;
+  }
+  if (!/light-dark\(/iu.test(cssColor)) {
+    return cssColor;
+  }
+  const sampleElement = element.ownerDocument.createElement("test");
+  Object.assign(sampleElement.style, {
+    color: cssColor,
+    display: "none"
+  });
+  if (!sampleElement.style.color) {
+    return cssColor;
+  }
+  (element.shadowRoot ?? element).append(sampleElement);
+  const color = elWindow.getComputedStyle(sampleElement).color || cssColor;
+  sampleElement.remove();
+  return color;
+}
+function getEffectiveColorScheme(element) {
+  const elWindow = getElementWindow(element);
+  const colorSchemes = elWindow.getComputedStyle(element).colorScheme.split(/\s+/u);
+  const hasDark = colorSchemes.includes("dark");
+  const hasLight = colorSchemes.includes("light");
+  if (hasDark !== hasLight) {
+    return hasDark ? "dark" : "light";
+  }
+  return elWindow.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+export {
+  getCssColor,
+  getEffectiveColorScheme
+};

package/dist/dom/referenceElement.js

@@ -1,4 +1,4 @@
-import { r } from "../dom-Bnc7oSYx.js";
+import { r } from "../chunks/dom.js";
 import "../log.js";
 export {
   r as resolveReferenceElement

package/dist/dom.d.ts

@@ -175,3 +175,12 @@ export interface FocusableElement extends HTMLElement {
 export declare const setFocusOnElement: (ref: (Element & {
     componentOnReady?: () => Promise<void>;
 }) | null | undefined, selector: string) => void;
+/**
+ * Get the window associated with an element's document.
+ * Falls back to the current global window if the document has no associated window.
+ *
+ * @public
+ * @param element The element whose document determines the window.
+ * @returns The element's document window, or the current global window as a fallback.
+ */
+export declare function getElementWindow(element: Element): Window;

package/dist/dom.js

@@ -1,21 +1,22 @@
 import "./dom/slots.js";
-import { c, f, a, g, b, o, d, s, e, h, i, j, k, l, m, u, n } from "./dom-Bnc7oSYx.js";
+import { c, f, b, a, g, d, o, e, s, h, i, j, k, l, m, n, u, p } from "./chunks/dom.js";
 export {
   c as classes,
   f as focusElement,
-  a as getClosestElement,
-  g as getElementAttribute,
-  b as getSlotAssignedElements,
+  b as getClosestElement,
+  a as getElementAttribute,
+  g as getElementWindow,
+  d as getSlotAssignedElements,
   o as observeAncestorsMutation,
-  d as resolveReferenceElement,
+  e as resolveReferenceElement,
   s as setFocusOnElement,
-  e as slotChangeGetAssignedElements,
-  h as slotChangeGetAssignedNodes,
-  i as slotChangeGetTextContent,
-  j as slotChangeHasAssignedElement,
-  k as slotChangeHasAssignedNode,
-  l as slotChangeHasContent,
-  m as slotChangeHasTextContent,
+  h as slotChangeGetAssignedElements,
+  i as slotChangeGetAssignedNodes,
+  j as slotChangeGetTextContent,
+  k as slotChangeHasAssignedElement,
+  l as slotChangeHasAssignedNode,
+  m as slotChangeHasContent,
+  n as slotChangeHasTextContent,
   u as unsafeGetCalciteModeName,
-  n as unsafeGetElementDirection
+  p as unsafeGetElementDirection
 };

package/dist/intl/dom.d.ts

@@ -1,14 +1,18 @@
 import { type GenericT9nStrings, type SupportedLocale } from "../intl.ts";
 /**
  * Get the locale of the given element.
- * It will look for the lang attribute on the element and its ancestors.
- * If not lang is found, it will default to 'en'.
+ *
+ * The locale precedence order:
+ *
+ * 1. `lang` on the provided element
+ * 2. `lang` attribute on any parent DOM element (closest parent first)
+ * 3. Browser's default language (from [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language))
+ * 4. `en` as the default fallback
  *
  * @public
  * @param element
  * @returns an object with the `lang` and `t9nLocale` properties.
- *
- * @see [lang vs t9nLocale](https://webgis.esri.com/references/lumina/controllers/useT9n#difference-between-lang-and-t9nlocale).
+ * @see [lang vs t9nLocale](https://webgis.esri.com/references/lumina/controllers/useT9n#accessing-current-locale-information).
  */
 export declare const getElementLocale: (element: HTMLElement) => {
     readonly lang: string;
@@ -35,6 +39,8 @@ export declare const getElementLocale: (element: HTMLElement) => {
  *   Default file name is the element tag name without the part before the
  *   first dash (e.g. `arcgis-map` becomes `map`).
  *
+ *   Provide a custom asset name if `element` is not a web component.
+ *
  *   Set to null if the component has no localization strings, but you still
  *   wish to use `startLocaleObserver` to get the locale information.
  *

package/dist/intl/dom.js

@@ -1,5 +1,5 @@
 import { log } from "../log.js";
-import { g as getElementAttribute, o as observeAncestorsMutation } from "../dom-Bnc7oSYx.js";
+import { a as getElementAttribute, o as observeAncestorsMutation } from "../chunks/dom.js";
 const getElementLocale$1 = (element) => {
   const lang = getElementAttribute(element, "lang", globalThis.navigator?.language || defaultLocale);
   return { lang, t9nLocale: normalizeLocale(lang) };

package/dist/promise.d.ts

@@ -45,6 +45,14 @@ export interface Deferred<T> {
      */
     reject(_error: unknown): void;
 }
+/**
+ * Adds abort semantics to an existing promise. The input promise continues running after the signal aborts.
+ *
+ * @public
+ * @param promise The promise to race against the abort signal.
+ * @param signalOrOptions The signal that aborts the returned promise.
+ */
+export declare function whenOrAbort<T>(promise: Promise<T>, signalOrOptions: AbortOptions | AbortSignal | null | undefined): Promise<T>;
 /**
  * Execute async callbacks against a list with a fixed number of in-flight
  * operations.
@@ -73,3 +81,7 @@ export declare function forEachWithConcurrency<T>(items: readonly T[], concurren
  * @see https://devtopia.esri.com/WebGIS/arcgis-js-api/discussions/60405
  */
 export declare const devToolsAwareTimeout: (callback: () => void, timeout: number) => ReturnType<typeof setInterval>;
+interface AbortOptions {
+    signal?: AbortSignal | null | undefined;
+}
+export {};

package/dist/promise.js

@@ -11,6 +11,23 @@ class Deferred {
     });
   }
 }
+async function whenOrAbort(promise, signalOrOptions) {
+  const signal = signalFromSignalOrOptions(signalOrOptions);
+  if (!signal) {
+    return await promise;
+  }
+  signal.throwIfAborted();
+  const abort = Promise.withResolvers();
+  const onAbort = () => {
+    try {
+      signal.throwIfAborted();
+    } catch (error) {
+      abort.reject(error);
+    }
+  };
+  signal.addEventListener("abort", onAbort, { once: true });
+  return await Promise.race([promise, abort.promise]).finally(() => signal.removeEventListener("abort", onAbort));
+}
 async function forEachWithConcurrency(items, concurrency, callback) {
   if (items.length === 0) {
     return;
@@ -40,8 +57,12 @@ const devToolsAwareTimeout = (callback, timeout) => {
 const longTimeoutThreshold = 4e3;
 const longTimeoutInterval = 2e3;
 const shortTimeoutIntervals = 4;
+function signalFromSignalOrOptions(params) {
+  return params instanceof AbortSignal ? params : params?.signal ?? void 0;
+}
 export {
   Deferred,
   devToolsAwareTimeout,
-  forEachWithConcurrency
+  forEachWithConcurrency,
+  whenOrAbort
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/toolkit",
-  "version": "5.2.0-next.98",
+  "version": "6.0.0-next.0",
   "description": "Collection of common internal patterns and utilities for ArcGIS Maps SDK for JavaScript components.",
   "homepage": "https://developers.arcgis.com/javascript/latest/",
   "sideEffects": false,
@@ -8,6 +8,7 @@
   "exports": {
     "./array": "./dist/array.js",
     "./dom": "./dist/dom.js",
+    "./dom/color": "./dist/dom/color.js",
     "./dom/slots": "./dist/dom/slots.js",
     "./dom/referenceElement": "./dist/dom/referenceElement.js",
     "./error": "./dist/error.js",