@esri/calcite-components 5.2.0-next.9 → 5.2.0-next.91

package/dist/chunks/useLabel.js

@@ -0,0 +1,150 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
+import { i as isBefore, q as queryElementRoots, c as closestElementCrossShadowBoundary } from "./dom.js";
+const useLabel = makeGenericController((component, controller) => {
+  controller.onConnected(() => {
+    connectLabel(component);
+  });
+  controller.onDisconnected(() => {
+    disconnectLabel(component);
+  });
+});
+const labelClickEvent = "calciteInternalLabelClick";
+const labelConnectedEvent = "calciteInternalLabelConnected";
+const labelDisconnectedEvent = "calciteInternalLabelDisconnected";
+const labelTagName = "calcite-label";
+const labelToLabelables = /* @__PURE__ */ new WeakMap();
+const onLabelClickMap = /* @__PURE__ */ new WeakMap();
+const onLabelConnectedMap = /* @__PURE__ */ new WeakMap();
+const onLabelDisconnectedMap = /* @__PURE__ */ new WeakMap();
+const unlabeledComponents = /* @__PURE__ */ new Set();
+const findLabelForComponent = (componentEl) => {
+  const { id } = componentEl;
+  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
+  if (forLabel) {
+    return forLabel;
+  }
+  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
+  if (!parentLabel || // labelable components within other custom elements are not considered labelable
+  hasAncestorCustomElements(parentLabel, componentEl)) {
+    return null;
+  }
+  return parentLabel;
+};
+function hasAncestorCustomElements(label, componentEl) {
+  let traversedElements;
+  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+  const listener = ((event) => {
+    event.stopImmediatePropagation();
+    const composedPath = event.composedPath();
+    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+  });
+  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+  label.removeEventListener(customElementAncestorCheckEventType, listener);
+  const ancestorCustomElements = traversedElements.filter((el) => el !== componentEl && el !== label).filter((el) => el.tagName?.includes("-"));
+  return ancestorCustomElements.length > 0;
+}
+function connectLabel(component) {
+  if (!component) {
+    return;
+  }
+  const labelEl = findLabelForComponent(component.el);
+  if (labelEl && onLabelClickMap.has(labelEl) && labelEl === component.labelEl || !labelEl && unlabeledComponents.has(component)) {
+    return;
+  }
+  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
+  if (labelEl) {
+    component.labelEl = labelEl;
+    const labelables = labelToLabelables.get(labelEl) || [];
+    labelables.push(component);
+    labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));
+    if (!onLabelClickMap.has(component.labelEl)) {
+      onLabelClickMap.set(component.labelEl, onLabelClick);
+      component.labelEl.addEventListener(labelClickEvent, onLabelClick);
+    }
+    unlabeledComponents.delete(component);
+    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
+    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
+  } else if (!unlabeledComponents.has(component)) {
+    boundOnLabelDisconnected();
+    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+  }
+}
+function disconnectLabel(component) {
+  if (!component) {
+    return;
+  }
+  unlabeledComponents.delete(component);
+  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+  onLabelConnectedMap.delete(component);
+  onLabelDisconnectedMap.delete(component);
+  if (!component.labelEl) {
+    return;
+  }
+  const labelables = labelToLabelables.get(component.labelEl);
+  if (labelables.length === 1) {
+    component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));
+    onLabelClickMap.delete(component.labelEl);
+  }
+  labelToLabelables.set(
+    component.labelEl,
+    labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder)
+  );
+  component.labelEl = void 0;
+}
+function sortByDOMOrder(a, b) {
+  return isBefore(a.el, b.el) ? -1 : 1;
+}
+function onLabelClick(event) {
+  const labelClickTarget = event.detail.sourceEvent.target;
+  const labelables = labelToLabelables.get(this);
+  const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);
+  const labelableChildClicked = clickedLabelable && labelables.includes(clickedLabelable);
+  if (labelableChildClicked) {
+    return;
+  }
+  const firstLabelable = labelables[0];
+  if (firstLabelable.disabled) {
+    return;
+  }
+  firstLabelable.onLabelClick(event);
+}
+function onLabelConnected() {
+  if (unlabeledComponents.has(this)) {
+    connectLabel(this);
+  }
+}
+function onLabelDisconnected() {
+  unlabeledComponents.add(this);
+  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
+  onLabelConnectedMap.set(this, boundOnLabelConnected);
+  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
+}
+async function associateExplicitLabelToUnlabeledComponent(label) {
+  await label.componentOnReady();
+  const alreadyLabeled = labelToLabelables.has(label);
+  if (alreadyLabeled) {
+    return;
+  }
+  const forComponentEl = label.for && label.ownerDocument?.getElementById(label.for);
+  if (!forComponentEl) {
+    return;
+  }
+  requestAnimationFrame(() => {
+    for (const labelable of unlabeledComponents) {
+      if (labelable.el === forComponentEl) {
+        connectLabel(labelable);
+        break;
+      }
+    }
+  });
+}
+export {
+  associateExplicitLabelToUnlabeledComponent as a,
+  labelDisconnectedEvent as b,
+  labelConnectedEvent as l,
+  useLabel as u
+};

package/dist/chunks/useSortable.js

@@ -15,12 +15,36 @@ function onGlobalDragEnd() {
   Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
 }
 const globalDragState = { active: false };
+const activeSortableComponentSet = /* @__PURE__ */ new Set();
+function syncGlobalDragState() {
+  const active = activeSortableComponentSet.size > 0;
+  if (globalDragState.active === active) {
+    return;
+  }
+  globalDragState.active = active;
+  if (active) {
+    onGlobalDragStart();
+    return;
+  }
+  onGlobalDragEnd();
+}
+function markDragActive(component) {
+  activeSortableComponentSet.add(component);
+  syncGlobalDragState();
+}
+function markDragInactive(component) {
+  activeSortableComponentSet.delete(component);
+  syncGlobalDragState();
+}
 function createSortable(component) {
   const dataIdAttr = "id";
   const { el, group, handleSelector: handle, dragSelector: draggable, sortDisabled } = component;
   return Sortable.create(el, {
     dataIdAttr,
     swapThreshold: 0.5,
+    // Keep the fallback ghost out of nested list DOM updates during touch drag startup.
+    // Applied globally so all sortable hosts use the same stable fallback behavior.
+    fallbackOnBody: true,
     ...CSS,
     ...!!draggable && { draggable },
     ...!!group && {
@@ -59,14 +83,18 @@ function createSortable(component) {
     },
     handle,
     filter: `${handle}[disabled]`,
+    onChoose: () => {
+      markDragActive(component);
+    },
+    onUnchoose: () => {
+      markDragInactive(component);
+    },
     onStart: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      globalDragState.active = true;
-      onGlobalDragStart();
+      markDragActive(component);
       component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onEnd: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      globalDragState.active = false;
-      onGlobalDragEnd();
+      markDragInactive(component);
       component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onSort: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
@@ -103,6 +131,8 @@ const useSortable = () => {
       setUpSortable(component);
     });
     controller.onDisconnected(() => {
+      sortableComponentSet.delete(component);
+      markDragInactive(component);
       tearDownSortable(component);
     });
     return {

package/dist/chunks/useTime.js

@@ -1,9 +1,8 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { toFunction, GenericController } from "@arcgis/lumina/controllers";
 import { createEvent } from "@arcgis/lumina";
-import { l as localizedTwentyFourHourMeridiems, i as isValidNumber, n as numberStringFormatter, g as getDateTimeFormat, b as getSupportedNumberingSystem } from "./locale.js";
+import { i as isValidNumber, l as localizedTwentyFourHourMeridiems, n as numberStringFormatter, g as getDateTimeFormat, a as getSupportedNumberingSystem } from "./locale.js";
 import { d as decimalPlaces, g as getDecimals } from "./math.js";
-import { c as capitalizeWord } from "./text.js";
 import { n as numberKeys } from "./key.js";
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter({
@@ -55,6 +54,7 @@ function formatTimePart(number, minLength) {
   if (number >= 10) {
     return numberAsString;
   }
+  return;
 }
 function fractionalSecondPartToMilliseconds(fractionalSecondPart) {
   return parseInt((parseFloat(`0.${fractionalSecondPart}`) / 1e-3).toFixed(3), 10);
@@ -391,6 +391,11 @@ function toISOTimeString(value, step = 60) {
   }
   return isoTimeString;
 }
+const localizedTimePartProperty = {
+  hour: "localizedHour",
+  minute: "localizedMinute",
+  second: "localizedSecond"
+};
 class TimeController extends GenericController {
   constructor() {
     super(...arguments);
@@ -827,7 +832,7 @@ class TimeController extends GenericController {
     } else {
       const oldValue = this[key];
       this[key] = typeof value === "number" ? formatTimePart(value) : value;
-      this[`localized${capitalizeWord(key)}`] = localizeTimePart({
+      this[localizedTimePartProperty[key]] = localizeTimePart({
         value: this[key],
         part: key,
         locale,

package/dist/chunks/utils.js

@@ -1,315 +1,111 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import Color from "color";
-import { c as calciteSpacingFixedXl, a as calciteSpacingFixedMd, b as calciteSpacingFixedSm } from "./global.js";
-import { omit } from "es-toolkit";
-const CSS = {
-  channel: "channel",
-  channels: "channels",
-  colorField: "color-field",
-  colorFieldScope: "scope--color-field",
-  colorMode: "color-mode",
-  colorModeContainer: "color-mode-container",
-  container: "container",
-  control: "control",
-  controlAndScope: "control-and-scope",
-  controlSection: "control-section",
-  deleteColor: "delete-color",
-  header: "header",
-  hexAndChannelsGroup: "hex-and-channels-group",
-  hexOptions: "color-hex-options",
-  hueScope: "scope--hue",
-  hueSlider: "hue-slider",
-  opacityScope: "scope--opacity",
-  opacitySlider: "opacity-slider",
-  preview: "preview",
-  previewAndSliders: "preview-and-sliders",
-  saveColor: "save-color",
-  savedColor: "saved-color",
-  savedColorsButtons: "saved-colors-buttons",
-  savedColorsSection: "saved-colors-section",
-  scope: "scope",
-  section: "section",
-  slider: "slider",
-  sliders: "sliders",
-  splitSection: "section--split",
-  swatchGroup: "swatch-group"
-};
-const DEFAULT_COLOR = Color("#007AC2");
-const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
-const RGB_LIMITS = {
-  r: 255,
-  g: 255,
-  b: 255
-};
-const HSV_LIMITS = {
-  h: 360,
-  s: 100,
-  v: 100
-};
-const HUE_LIMIT_CONSTRAINED = HSV_LIMITS.h - 1;
-const OPACITY_LIMITS = {
-  min: 0,
-  max: 100
-};
-const STATIC_DIMENSIONS = {
-  s: {
-    gap: parseInt(calciteSpacingFixedSm, 10),
-    slider: {
-      height: 12
-    },
-    thumb: {
-      radius: 7
-    },
-    preview: {
-      size: 20
-    },
-    minWidth: 200
-  },
-  m: {
-    gap: parseInt(calciteSpacingFixedMd, 10),
-    slider: {
-      height: 12
-    },
-    thumb: {
-      radius: 7
-    },
-    preview: {
-      size: 24
-    },
-    minWidth: 240
-  },
-  l: {
-    gap: parseInt(calciteSpacingFixedXl, 10),
-    slider: {
-      height: 12
-    },
-    thumb: {
-      radius: 7
-    },
-    preview: {
-      size: 32
-    },
-    minWidth: 304
+import { isServer } from "lit";
+import { n as nodeListToArray } from "./dom.js";
+import { A as AllComboboxChildrenSelector, C as ComboboxItemSelector, a as ComboboxItemGroupSelector } from "./resources10.js";
+function getAncestors(element) {
+  const parent = element.parentElement?.closest(AllComboboxChildrenSelector);
+  const grandparent = parent?.parentElement?.closest(AllComboboxChildrenSelector);
+  return [parent, grandparent].filter((el) => !!el);
+}
+function getItemAncestors(item) {
+  return item.ancestors?.filter((el) => el.nodeName === "CALCITE-COMBOBOX-ITEM") || [];
+}
+function getItemChildren(item) {
+  return nodeListToArray(item.querySelectorAll("calcite-combobox-item"));
+}
+function hasActiveChildren(node) {
+  const items = nodeListToArray(node.querySelectorAll("calcite-combobox-item"));
+  return items.filter((item) => item.selected).length > 0;
+}
+function getDepth(element) {
+  if (isServer) {
+    return 0;
   }
-};
-const SCOPE_SIZE = 1;
-const ICONS = {
-  minus: "minus",
-  plus: "plus"
-};
-const hexChar = /^[0-9A-F]$/i;
-const shorthandHex = /^#[0-9A-F]{3}$/i;
-const longhandHex = /^#[0-9A-F]{6}$/i;
-const shorthandHexWithAlpha = /^#[0-9A-F]{4}$/i;
-const longhandHexWithAlpha = /^#[0-9A-F]{8}$/i;
-function colorFromValue(value, clearable = false, mode) {
-  if (clearable && !value) {
-    return void 0;
-  }
-  return Color(
-    value != null && typeof value === "object" && alphaCompatible(mode) ? normalizeColor(value) : value
+  const result = document.evaluate(
+    "ancestor::calcite-combobox-item | ancestor::calcite-combobox-item-group",
+    element,
+    null,
+    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
+    null
   );
-}
-const alphaToOpacity = (alpha) => Number((alpha * 100).toFixed());
-const opacityToAlpha = (opacity) => Number((opacity / 100).toFixed(2));
-function isValidHex(hex, hasAlpha = false) {
-  return isShorthandHex(hex, hasAlpha) || isLonghandHex(hex, hasAlpha);
-}
-function evaluateHex(hex, length, pattern) {
-  if (!hex) {
-    return false;
-  }
-  return hex.length === length && pattern.test(hex);
-}
-function isShorthandHex(hex, hasAlpha = false) {
-  const hexLength = hasAlpha ? 5 : 4;
-  const hexPattern = hasAlpha ? shorthandHexWithAlpha : shorthandHex;
-  return evaluateHex(hex, hexLength, hexPattern);
-}
-function isLonghandHex(hex, hasAlpha = false) {
-  const hexLength = hasAlpha ? 9 : 7;
-  const hexPattern = hasAlpha ? longhandHexWithAlpha : longhandHex;
-  return evaluateHex(hex, hexLength, hexPattern);
-}
-function normalizeHex(hex, hasAlpha = false, convertFromHexToHexa = false) {
-  hex = hex.toLowerCase();
-  if (!hex.startsWith("#")) {
-    hex = `#${hex}`;
-  }
-  if (isShorthandHex(hex, hasAlpha)) {
-    return rgbToHex(hexToRGB(hex));
-  }
-  if (hasAlpha && convertFromHexToHexa && isValidHex(
-    hex,
-    false
-    /* we only care about RGB hex for conversion */
-  )) {
-    const isShorthand = isShorthandHex(hex, false);
-    return rgbToHex(hexToRGB(`${hex}${isShorthand ? "f" : "ff"}`));
+  const depth = result.snapshotLength;
+  if (depth > 0 && element.nodeName === ComboboxItemSelector) {
+    for (let i = 0; i < depth; i++) {
+      const parent = result.snapshotItem(i);
+      if (parent.nodeName === ComboboxItemGroupSelector) {
+        return depth;
+      }
+    }
+  } else if (element.nodeName === ComboboxItemGroupSelector) {
+    return depth;
   }
-  return hex;
-}
-function hexify(color, hasAlpha = false) {
-  return hasAlpha ? color.hexa() : color.hex();
-}
-function rgbToHex(color) {
-  const { r, g, b } = color;
-  const rChars = numToHex(r);
-  const gChars = numToHex(g);
-  const bChars = numToHex(b);
-  const alphaChars = "a" in color ? numToHex(color.a * 255) : "";
-  return `#${rChars}${gChars}${bChars}${alphaChars}`.toLowerCase();
-}
-function numToHex(num) {
-  return num.toString(16).padStart(2, "0");
+  return depth + 1;
 }
-function normalizeAlpha(colorObject) {
-  return {
-    ...omit(colorObject, ["alpha"]),
-    a: colorObject.alpha ?? 1
-    /* Color() will omit alpha if 1 */
-  };
+function isSingleLike(selectionMode) {
+  return selectionMode.includes("single");
 }
-function normalizeColor(alphaColorObject) {
-  return { ...omit(alphaColorObject, ["a"]), alpha: alphaColorObject.a ?? 1 };
+function getLabel(item) {
+  return item.shortHeading || item.heading;
 }
-function hexToRGB(hex) {
-  hex = hex.replace("#", "");
-  let r;
-  let g;
-  let b;
-  let a;
-  const isShorthand = hex.length === 3 || hex.length === 4;
-  if (isShorthand) {
-    const [first, second, third, fourth] = hex.split("");
-    r = parseInt(`${first}${first}`, 16);
-    g = parseInt(`${second}${second}`, 16);
-    b = parseInt(`${third}${third}`, 16);
-    a = parseInt(`${fourth}${fourth}`, 16) / 255;
-  } else {
-    r = parseInt(hex.slice(0, 2), 16);
-    g = parseInt(hex.slice(2, 4), 16);
-    b = parseInt(hex.slice(4, 6), 16);
-    a = parseInt(hex.slice(6, 8), 16) / 255;
+function orderByPrevious(items, previousItems) {
+  if (items.length < 2 || previousItems.length === 0) {
+    return items;
   }
-  return isNaN(a) ? { r, g, b } : { r, g, b, a };
-}
-const enumify = (x) => x;
-const CSSColorMode = enumify({
-  HEX: "hex",
-  HEXA: "hexa",
-  RGB_CSS: "rgb-css",
-  RGBA_CSS: "rgba-css",
-  HSL_CSS: "hsl-css",
-  HSLA_CSS: "hsla-css"
-});
-const ObjectColorMode = enumify({
-  RGB: "rgb",
-  RGBA: "rgba",
-  HSL: "hsl",
-  HSLA: "hsla",
-  HSV: "hsv",
-  HSVA: "hsva"
-});
-function parseMode(colorValue) {
-  if (typeof colorValue === "string") {
-    if (colorValue.startsWith("#")) {
-      const { length } = colorValue;
-      if (length === 4 || length === 7) {
-        return CSSColorMode.HEX;
-      }
-      if (length === 5 || length === 9) {
-        return CSSColorMode.HEXA;
-      }
-    }
-    if (colorValue.startsWith("rgba(")) {
-      return CSSColorMode.RGBA_CSS;
-    }
-    if (colorValue.startsWith("rgb(")) {
-      return CSSColorMode.RGB_CSS;
+  const previousItemOrder = new Map(previousItems.map((item, index) => [item, index]));
+  return [...items].sort((a, b) => {
+    const aOrder = previousItemOrder.get(a);
+    const bOrder = previousItemOrder.get(b);
+    if (aOrder !== void 0 && bOrder !== void 0) {
+      return aOrder - bOrder;
     }
-    if (colorValue.startsWith("hsl(")) {
-      return CSSColorMode.HSL_CSS;
+    if (aOrder !== void 0) {
+      return -1;
     }
-    if (colorValue.startsWith("hsla(")) {
-      return CSSColorMode.HSLA_CSS;
+    if (bOrder !== void 0) {
+      return 1;
     }
+    return 0;
+  });
+}
+function consumeValue(counts, value) {
+  const count = counts.get(value) ?? 0;
+  if (count === 0) {
+    return false;
   }
-  if (typeof colorValue === "object") {
-    if (hasChannels(colorValue, "r", "g", "b")) {
-      return hasChannels(colorValue, "a") ? ObjectColorMode.RGBA : ObjectColorMode.RGB;
-    }
-    if (hasChannels(colorValue, "h", "s", "l")) {
-      return hasChannels(colorValue, "a") ? ObjectColorMode.HSLA : ObjectColorMode.HSL;
-    }
-    if (hasChannels(colorValue, "h", "s", "v")) {
-      return hasChannels(colorValue, "a") ? ObjectColorMode.HSVA : ObjectColorMode.HSV;
-    }
+  if (count === 1) {
+    counts.delete(value);
+  } else {
+    counts.set(value, count - 1);
   }
-  return void 0;
-}
-function hasChannels(colorObject, ...channels) {
-  return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
-}
-function colorEqual(value1, value2) {
-  return value1?.rgb().array().toString() === value2?.rgb().array().toString();
-}
-function alphaCompatible(mode) {
-  return mode === CSSColorMode.HEXA || mode === CSSColorMode.RGBA_CSS || mode === CSSColorMode.HSLA_CSS || mode === ObjectColorMode.RGBA || mode === ObjectColorMode.HSLA || mode === ObjectColorMode.HSVA;
-}
-function toAlphaMode(mode) {
-  const alphaMode = mode === CSSColorMode.HEX ? CSSColorMode.HEXA : mode === CSSColorMode.RGB_CSS ? CSSColorMode.RGBA_CSS : mode === CSSColorMode.HSL_CSS ? CSSColorMode.HSLA_CSS : mode === ObjectColorMode.RGB ? ObjectColorMode.RGBA : mode === ObjectColorMode.HSL ? ObjectColorMode.HSLA : mode === ObjectColorMode.HSV ? ObjectColorMode.HSVA : mode;
-  return alphaMode;
+  return true;
 }
-function toNonAlphaMode(mode) {
-  const nonAlphaMode = mode === CSSColorMode.HEXA ? CSSColorMode.HEX : mode === CSSColorMode.RGBA_CSS ? CSSColorMode.RGB_CSS : mode === CSSColorMode.HSLA_CSS ? CSSColorMode.HSL_CSS : mode === ObjectColorMode.RGBA ? ObjectColorMode.RGB : mode === ObjectColorMode.HSLA ? ObjectColorMode.HSL : mode === ObjectColorMode.HSVA ? ObjectColorMode.HSV : mode;
-  return nonAlphaMode;
-}
-const borderWidthInPx = 1;
-const inlineSizeBorderTotalWidth = borderWidthInPx * 2;
-function getSliderWidth(availableWidth, activeStaticDimensions, hasAlpha) {
-  const previewWidth = hasAlpha ? STATIC_DIMENSIONS["l"].preview.size : activeStaticDimensions.preview.size;
-  const effectiveWidth = availableWidth - inlineSizeBorderTotalWidth;
-  const inlineSpaceAroundElements = activeStaticDimensions.gap * 3;
-  return Math.max(effectiveWidth - inlineSpaceAroundElements - previewWidth, 0);
-}
-function getColorFieldDimensions(availableWidth) {
-  const colorFieldAspectRatio = 1.8;
-  const effectiveWidth = availableWidth - inlineSizeBorderTotalWidth;
-  return {
-    width: Math.max(effectiveWidth, 0),
-    height: Math.max(Math.floor(effectiveWidth / colorFieldAspectRatio), 0)
-  };
+function orderValuesByPrevious(selectedValues, previousValues) {
+  if (selectedValues.length < 2 || previousValues.length === 0) {
+    return selectedValues;
+  }
+  const selectedValueCounts = /* @__PURE__ */ new Map();
+  selectedValues.forEach((value) => {
+    selectedValueCounts.set(value, (selectedValueCounts.get(value) ?? 0) + 1);
+  });
+  const orderedSelectedValues = previousValues.filter((value) => consumeValue(selectedValueCounts, value));
+  if (orderedSelectedValues.length === 0) {
+    return selectedValues;
+  }
+  selectedValues.forEach((value) => {
+    if (consumeValue(selectedValueCounts, value)) {
+      orderedSelectedValues.push(value);
+    }
+  });
+  return orderedSelectedValues;
 }
 export {
-  CSSColorMode as C,
-  DEFAULT_COLOR as D,
-  HSV_LIMITS as H,
-  ICONS as I,
-  OPACITY_LIMITS as O,
-  RGB_LIMITS as R,
-  STATIC_DIMENSIONS as S,
-  getColorFieldDimensions as a,
-  hexify as b,
-  colorFromValue as c,
-  DEFAULT_STORAGE_KEY_PREFIX as d,
-  alphaCompatible as e,
-  colorEqual as f,
-  getSliderWidth as g,
-  hexToRGB as h,
-  isValidHex as i,
-  CSS as j,
-  HUE_LIMIT_CONSTRAINED as k,
-  normalizeAlpha as l,
-  alphaToOpacity as m,
-  normalizeHex as n,
-  opacityToAlpha as o,
-  parseMode as p,
-  SCOPE_SIZE as q,
-  toAlphaMode as r,
-  isLonghandHex as s,
-  toNonAlphaMode as t,
-  isShorthandHex as u,
-  rgbToHex as v,
-  hexChar as w
+  orderByPrevious as a,
+  getItemAncestors as b,
+  getItemChildren as c,
+  getAncestors as d,
+  getDepth as e,
+  getLabel as g,
+  hasActiveChildren as h,
+  isSingleLike as i,
+  orderValuesByPrevious as o
 };