@esri/calcite-components 5.1.0-next.2 → 5.1.0-next.20

package/dist/chunks/useReferenceElement.js

@@ -0,0 +1,505 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { ref } from "lit/directives/ref.js";
+import { keyed } from "lit/directives/keyed.js";
+import { nothing, svg, html } from "lit";
+import { safeClassMap } from "@arcgis/lumina";
+import { y as getShadowRootNode, j as isPrimaryPointerButton, z as isKeyboardTriggeredClick, q as queryElementRoots } from "./dom.js";
+import { i as isActivationKey } from "./key.js";
+import { t as toAriaBoolean } from "./aria.js";
+import { makeGenericController } from "@arcgis/lumina/controllers";
+const CSS = {
+  arrow: "calcite-floating-ui-arrow",
+  arrowStroke: "calcite-floating-ui-arrow__stroke"
+};
+const DEFAULTS = {
+  width: 12,
+  height: 6,
+  strokeWidth: 1
+};
+const FloatingArrow = ({ floatingLayout, key, ref: ref$1 }) => {
+  const { width, height, strokeWidth } = DEFAULTS;
+  const svgX = width / 2;
+  const isVertical = floatingLayout === "vertical";
+  const dValue = `M0,0 H${width} L${width - svgX},${height} Q${svgX},${height} ${svgX},${height} Z`;
+  return keyed(key, html`<svg aria-hidden=true class=${safeClassMap(CSS.arrow)} height=${width} viewBox=${`0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`} width=${width + (isVertical ? strokeWidth : 0)} ${ref(ref$1)}>${svg`${svg`<path class=${safeClassMap(CSS.arrowStroke)} d=${dValue ?? nothing} fill=none stroke-width=${strokeWidth + 1} />` || ""}<path d=${dValue ?? nothing} stroke=none />`}</svg>`);
+};
+function haveSameComponents(components, activeComponents) {
+  if (components === activeComponents) {
+    return true;
+  }
+  if (components.length !== activeComponents.length) {
+    return false;
+  }
+  const s1 = new Set(components);
+  const s2 = new Set(activeComponents);
+  if (s1.size !== s2.size) {
+    return false;
+  }
+  for (const item of s1) {
+    if (!s2.has(item)) {
+      return false;
+    }
+  }
+  return true;
+}
+const clickTolerance = 5;
+const HOVER_OPEN_DELAY_MS = 300;
+const HOVER_QUICK_OPEN_DELAY_MS = HOVER_OPEN_DELAY_MS / 3;
+const HOVER_CLOSE_DELAY_MS = HOVER_OPEN_DELAY_MS * 1.5;
+function isDrag({
+  startX,
+  startY,
+  endX,
+  endY
+}) {
+  const distance = Math.hypot(endX - startX, endY - startY);
+  return distance > clickTolerance;
+}
+const referenceElementManager = (options) => {
+  const registeredElements = /* @__PURE__ */ new Map();
+  const registeredShadowRootCounts = /* @__PURE__ */ new WeakMap();
+  let activeComponents = null;
+  let clickedComponents = null;
+  let hoverCloseTimeout = null;
+  let hoverOpenTimeout = null;
+  let hoveredComponents = null;
+  let pointerDownPosition = null;
+  let registeredComponentCount = 0;
+  const queryComponents = (composedPath, type) => {
+    const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+    if (!registeredElement) {
+      return void 0;
+    }
+    const components = registeredElements.get(registeredElement);
+    return components?.filter((component) => component.referenceElementType === type);
+  };
+  const toggleComponents = (event, type) => {
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, type);
+    components?.forEach((component) => {
+      if (component && !component.triggerDisabled) {
+        component.open = !component.open;
+      }
+    });
+    Array.from(registeredElements.values()).flat().filter(
+      (component) => !components?.includes(component) && component.autoClose && component.open && !composedPath.includes(component.el)
+    ).forEach((component) => component.open = false);
+  };
+  const clickHandler = (event) => {
+    if (isKeyboardTriggeredClick(event) || event.defaultPrevented || pointerDownPosition && isDrag({
+      endY: event.clientY,
+      endX: event.clientX,
+      startY: pointerDownPosition.y,
+      startX: pointerDownPosition.x
+    })) {
+      return;
+    }
+    pointerDownPosition = null;
+    toggleComponents(event, "click");
+  };
+  const clearHoverOpenTimeout = () => {
+    if (hoverOpenTimeout != null) {
+      window.clearTimeout(hoverOpenTimeout);
+    }
+    hoverOpenTimeout = null;
+  };
+  const clearHoverCloseTimeout = () => {
+    if (hoverCloseTimeout != null) {
+      window.clearTimeout(hoverCloseTimeout);
+    }
+    hoverCloseTimeout = null;
+  };
+  const clearHoverTimeout = () => {
+    clearHoverOpenTimeout();
+    clearHoverCloseTimeout();
+  };
+  const pathHasOpenHoverComponent = (components, composedPath) => {
+    return activeComponents?.some((component) => component?.open && composedPath.includes(component.el)) || components?.some((component) => component?.open && composedPath.includes(component.el));
+  };
+  const toggleHoverComponents = (components, open) => {
+    components?.forEach((component) => component.open = open);
+    activeComponents = open ? components : null;
+  };
+  const closeActiveHoverComponents = () => {
+    toggleHoverComponents(activeComponents, false);
+  };
+  const hoverKeyDownHandler = (event) => {
+    if (event.key === "Escape" && !event.defaultPrevented) {
+      const openActiveHoverComponents = activeComponents?.filter((component) => component?.open);
+      if (openActiveHoverComponents?.length) {
+        clearHoverTimeout();
+        closeActiveHoverComponents();
+        const composedPath = event.composedPath();
+        if (openActiveHoverComponents.some(
+          (component) => component.referenceEl instanceof Element && composedPath.includes(component.referenceEl) || composedPath.includes(component.el)
+        )) {
+          event.preventDefault();
+        }
+      }
+    }
+  };
+  const hoverClickHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    clickedComponents = null;
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    closeActiveHoverComponents();
+    if (!components?.length) {
+      return;
+    }
+    clearHoverTimeout();
+    const closeOnClickHoverComponents = components.filter((component) => component.closeOnClick);
+    const nonCloseOnClickHoverComponents = components.filter((component) => !component.closeOnClick);
+    if (closeOnClickHoverComponents?.length) {
+      clickedComponents = closeOnClickHoverComponents;
+      toggleHoverComponents(closeOnClickHoverComponents, false);
+    }
+    toggleHoverComponents(nonCloseOnClickHoverComponents, true);
+  };
+  const pointerDownHandler = (event) => {
+    if (event.defaultPrevented || !isPrimaryPointerButton(event)) {
+      return;
+    }
+    const { clientX, clientY } = event;
+    pointerDownPosition = { x: clientX, y: clientY };
+  };
+  const keyDownHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (event.key === "Escape") {
+      closeAllComponents();
+    } else if (isActivationKey(event.key)) {
+      toggleComponents(event, "click");
+    }
+  };
+  const closeAllComponents = () => {
+    Array.from(registeredElements.values()).flat().forEach((component) => component.open = false);
+  };
+  const closeComponentsIfNotActive = (components) => {
+    if (!haveSameComponents(components ?? [], activeComponents ?? [])) {
+      closeActiveHoverComponents();
+    }
+  };
+  const openHoveredComponents = (components) => {
+    hoverOpenTimeout = window.setTimeout(
+      () => {
+        if (hoverOpenTimeout === null || !haveSameComponents(components ?? [], hoveredComponents ?? [])) {
+          return;
+        }
+        clearHoverCloseTimeout();
+        closeComponentsIfNotActive(components);
+        toggleHoverComponents(components, true);
+      },
+      activeComponents?.some((component) => component.open) ? HOVER_QUICK_OPEN_DELAY_MS : HOVER_OPEN_DELAY_MS
+    );
+  };
+  const closeHoveredComponents = () => {
+    hoverCloseTimeout = window.setTimeout(() => {
+      if (hoverCloseTimeout === null) {
+        return;
+      }
+      closeActiveHoverComponents();
+    }, HOVER_CLOSE_DELAY_MS);
+  };
+  const pointerMoveHandler = (event) => {
+    if (event.defaultPrevented) {
+      closeActiveHoverComponents();
+      return;
+    }
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    if (components?.some((component) => clickedComponents?.includes(component))) {
+      return;
+    }
+    if (!components?.some((component) => hoveredComponents?.includes(component))) {
+      clearHoverOpenTimeout();
+    }
+    hoveredComponents = components;
+    if (components?.length) {
+      openHoveredComponents(components);
+    } else if (activeComponents?.some((component) => component?.open)) {
+      closeHoveredComponents();
+    }
+    clickedComponents = null;
+  };
+  const blurHandler = () => {
+    closeActiveHoverComponents();
+  };
+  const pointerLeaveHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    clearHoverTimeout();
+    closeHoveredComponents();
+  };
+  const addListeners = () => {
+    if (options.click) {
+      window.addEventListener("click", clickHandler);
+      window.addEventListener("keydown", keyDownHandler);
+      window.addEventListener("pointerdown", pointerDownHandler);
+    }
+    if (options.hover) {
+      window.addEventListener("click", hoverClickHandler);
+      window.addEventListener("keydown", hoverKeyDownHandler);
+      window.addEventListener("pointermove", pointerMoveHandler);
+      window.addEventListener("focusin", focusInHandler);
+      window.addEventListener("blur", blurHandler);
+      document.addEventListener("pointerleave", pointerLeaveHandler);
+    }
+  };
+  const removeListeners = () => {
+    if (options.click) {
+      window.removeEventListener("pointerdown", pointerDownHandler);
+      window.removeEventListener("click", clickHandler);
+      window.removeEventListener("keydown", keyDownHandler);
+    }
+    if (options.hover) {
+      window.removeEventListener("click", hoverClickHandler);
+      window.removeEventListener("keydown", hoverKeyDownHandler);
+      window.removeEventListener("pointermove", pointerMoveHandler);
+      window.removeEventListener("focusin", focusInHandler);
+      window.removeEventListener("blur", blurHandler);
+      document.removeEventListener("pointerleave", pointerLeaveHandler);
+    }
+  };
+  const toggleFocusedComponents = (components, open) => {
+    {
+      clearHoverTimeout();
+    }
+    toggleHoverComponents(components, open);
+  };
+  const getReferenceElShadowRootNode = (referenceEl) => {
+    return referenceEl instanceof Element ? getShadowRootNode(referenceEl) : null;
+  };
+  const focusInHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    if (components?.some((component) => clickedComponents?.includes(component))) {
+      return;
+    }
+    clickedComponents = null;
+    closeComponentsIfNotActive(components);
+    if (!components?.length) {
+      return;
+    }
+    toggleFocusedComponents(components, true);
+  };
+  const updateElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    if (options.click && "ariaExpanded" in referenceEl) {
+      const existingComponents = registeredElements.get(referenceEl) ?? [];
+      const existingComponentOpen = existingComponents?.some((component2) => component2.open) ?? false;
+      referenceEl.ariaExpanded = toAriaBoolean(component.open || existingComponentOpen);
+    }
+  };
+  const addShadowListeners = (shadowRoot) => {
+    shadowRoot.addEventListener("focusin", focusInHandler);
+  };
+  const removeShadowListeners = (shadowRoot) => {
+    shadowRoot.removeEventListener("focusin", focusInHandler);
+  };
+  const registerShadowRoot = (shadowRoot) => {
+    const count = registeredShadowRootCounts.get(shadowRoot);
+    const newCount = (typeof count === "number" ? count : 0) + 1;
+    if (newCount === 1) {
+      addShadowListeners(shadowRoot);
+    }
+    registeredShadowRootCounts.set(shadowRoot, newCount);
+  };
+  const unregisterShadowRoot = (shadowRoot) => {
+    const count = registeredShadowRootCounts.get(shadowRoot);
+    const currentCount = typeof count === "number" ? count : 0;
+    const newCount = Math.max(0, currentCount - 1);
+    if (currentCount > 0 && newCount === 0) {
+      removeShadowListeners(shadowRoot);
+      registeredShadowRootCounts.delete(shadowRoot);
+      return;
+    }
+    if (newCount > 0) {
+      registeredShadowRootCounts.set(shadowRoot, newCount);
+    }
+  };
+  const registerElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    const existingComponents = registeredElements.get(referenceEl) ?? [];
+    if (existingComponents.includes(component)) {
+      return;
+    }
+    if (options.click && "ariaControlsElements" in referenceEl) {
+      const currentElements = referenceEl.ariaControlsElements ?? [];
+      if (!currentElements.includes(component.el)) {
+        const updatedElements = [...currentElements, component.el];
+        referenceEl.ariaControlsElements = updatedElements;
+      }
+    }
+    if (options.hover && "ariaDescribedByElements" in referenceEl) {
+      const currentElements = referenceEl.ariaDescribedByElements ?? [];
+      if (!currentElements.includes(component.el)) {
+        const updatedElements = [...currentElements, component.el];
+        referenceEl.ariaDescribedByElements = updatedElements;
+      }
+    }
+    registeredComponentCount++;
+    registeredElements.set(referenceEl, [...existingComponents, component]);
+    const shadowRoot = options.hover ? getReferenceElShadowRootNode(referenceEl) : null;
+    if (shadowRoot) {
+      registerShadowRoot(shadowRoot);
+    }
+    if (registeredComponentCount === 1) {
+      addListeners();
+    }
+    updateElement(component, referenceEl);
+  };
+  const decrementRegisteredElementCount = (shadowRoot) => {
+    registeredComponentCount--;
+    if (shadowRoot) {
+      unregisterShadowRoot(shadowRoot);
+    }
+  };
+  const unregisterElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    const shadowRoot = options.hover ? getReferenceElShadowRootNode(referenceEl) : null;
+    const existingComponents = registeredElements.get(referenceEl) ?? [];
+    const updatedComponents = existingComponents.filter((p) => p !== component);
+    if (updatedComponents.length > 0) {
+      registeredElements.set(referenceEl, updatedComponents);
+      if (updatedComponents.length !== existingComponents.length) {
+        decrementRegisteredElementCount(shadowRoot);
+      }
+    } else if (registeredElements.delete(referenceEl)) {
+      decrementRegisteredElementCount(shadowRoot);
+    }
+    if (registeredComponentCount === 0) {
+      removeListeners();
+      clearHoverTimeout();
+    }
+    if (options.click && "ariaControlsElements" in referenceEl) {
+      const newElements = referenceEl.ariaControlsElements?.filter((element) => element !== component.el);
+      referenceEl.ariaControlsElements = newElements?.length > 0 ? newElements : null;
+    }
+    if (options.click && "ariaExpanded" in referenceEl) {
+      const hasRegisteredComponents = (updatedComponents?.length ?? 0) > 0;
+      if (hasRegisteredComponents) {
+        const existingComponentOpen = updatedComponents?.some((component2) => component2.open) ?? false;
+        referenceEl.ariaExpanded = toAriaBoolean(existingComponentOpen);
+      } else {
+        referenceEl.ariaExpanded = null;
+      }
+    }
+    if (options.hover && "ariaDescribedByElements" in referenceEl) {
+      const newElements = referenceEl.ariaDescribedByElements?.filter((element) => element !== component.el);
+      referenceEl.ariaDescribedByElements = newElements?.length > 0 ? newElements : null;
+    }
+  };
+  return {
+    registerElement,
+    unregisterElement,
+    updateElement
+  };
+};
+const useReferenceElement = (options) => {
+  const { manager } = options;
+  return makeGenericController((component, controller) => {
+    let animationFrameId = null;
+    let lastRegisteredReferenceEl = null;
+    const canManageReferenceElement = (referenceEl) => {
+      return Boolean(referenceEl && component.referenceElementType);
+    };
+    const registerReferenceElement = (referenceEl) => {
+      if (!canManageReferenceElement(referenceEl)) {
+        return;
+      }
+      manager.registerElement(component, referenceEl);
+      lastRegisteredReferenceEl = referenceEl;
+    };
+    const unregisterReferenceElement = (referenceEl) => {
+      if (!canManageReferenceElement(referenceEl)) {
+        return;
+      }
+      manager.unregisterElement(component, referenceEl);
+      if (lastRegisteredReferenceEl === referenceEl) {
+        lastRegisteredReferenceEl = null;
+      }
+    };
+    const getReferenceElement = (component2) => {
+      const { referenceElement, el } = component2;
+      return (typeof referenceElement === "string" ? queryElementRoots(el, { id: referenceElement }) : referenceElement) || null;
+    };
+    const setUpReferenceElement = (warn = true) => {
+      if (!component.referenceElementType) {
+        return;
+      }
+      component.referenceEl = getReferenceElement(component);
+      const { el, referenceElement, referenceEl } = component;
+      if (warn && referenceElement && !referenceEl) {
+        console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
+          el
+        });
+      }
+    };
+    controller.onConnected(() => {
+      animationFrameId = requestAnimationFrame(() => {
+        if (!component.el.isConnected) {
+          return;
+        }
+        setUpReferenceElement(component.manager.loadedCalled);
+        registerReferenceElement(component.referenceEl);
+      });
+    });
+    controller.onLoaded(() => {
+      if (component.referenceElement && !component.referenceEl) {
+        setUpReferenceElement();
+      }
+    });
+    controller.onUpdate((changes) => {
+      if (!component.hasUpdated) {
+        return;
+      }
+      if (changes.has("referenceElement")) {
+        setUpReferenceElement();
+      }
+      if (changes.has("referenceEl")) {
+        unregisterReferenceElement(changes.get("referenceEl"));
+        registerReferenceElement(component.referenceEl);
+      } else if (changes.has("open")) {
+        manager.updateElement(component, component.referenceEl);
+      }
+    });
+    controller.onDisconnected(() => {
+      if (animationFrameId != null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+      unregisterReferenceElement(lastRegisteredReferenceEl);
+    });
+  });
+};
+export {
+  FloatingArrow as F,
+  referenceElementManager as r,
+  useReferenceElement as u
+};

package/dist/chunks/useSetFocus.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { c as componentFocusable } from "./component.js";
-import { h as getRootNode, j as focusElement } from "./dom.js";
+import { e as getRootNode, i as focusElement } from "./dom.js";
 const useSetFocus = () => {
   return makeGenericController((component, controller) => {
     let abortController;

package/dist/chunks/utils2.js

@@ -1,6 +1,6 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { isServer } from "lit";
-import { o as nodeListToArray } from "./dom.js";
+import { n as nodeListToArray } from "./dom.js";
 import { A as AllComboboxChildrenSelector, a as ComboboxItemSelector, b as ComboboxItemGroupSelector } from "./resources5.js";
 function getAncestors(element) {
   const parent = element.parentElement?.closest(AllComboboxChildrenSelector);

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

@@ -10,8 +10,8 @@ import type { HeadingLevel } from "../functional/Heading.js";
  * @cssproperty [--calcite-accordion-text-color] - Specifies the component's text color.
  * @cssproperty [--calcite-accordion-text-color-hover] - Specifies the component's main text color on hover.
  * @cssproperty [--calcite-accordion-text-color-press] - Specifies the component's main text color when pressed.
- * @cssproperty [--calcite-accordion-item-background-color] - [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color.
- * @cssproperty [--calcite-accordion-item-border-color] - [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color.
+ * @cssproperty [--calcite-accordion-item-background-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-background-color` instead. Specifies the component's background color.
+ * @cssproperty [--calcite-accordion-item-border-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-border-color` instead. Specifies the component's border color.
  * @cssproperty [--calcite-accordion-item-content-space] - Specifies the component's padding.
  * @cssproperty [--calcite-accordion-item-end-icon-color] - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
  * @cssproperty [--calcite-accordion-item-expand-icon-color] - Specifies the component's expand icon color.
@@ -19,10 +19,10 @@ import type { HeadingLevel } from "../functional/Heading.js";
  * @cssproperty [--calcite-accordion-item-header-background-color-hover] - Specifies the component's `heading` background color when hovered.
  * @cssproperty [--calcite-accordion-item-header-background-color-press] - Specifies the component's `heading` background color when pressed.
  * @cssproperty [--calcite-accordion-item-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-accordion-item-icon-color] - [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color.
+ * @cssproperty [--calcite-accordion-item-icon-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-icon-color` instead. Specifies the component's default icon color.
  * @cssproperty [--calcite-accordion-item-start-icon-color] - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @cssproperty [--calcite-accordion-item-text-color] - [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color.
- * @cssproperty [--calcite-accordion-item-text-color-hover] - [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover.
+ * @cssproperty [--calcite-accordion-item-text-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color` instead. Specifies the component's text color.
+ * @cssproperty [--calcite-accordion-item-text-color-hover] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color-hover` instead. Specifies the component's text color on hover.
  * @slot  - A slot for adding custom content, including nested `calcite-accordion-item`s.
  * @slot [actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot [actions-start] - A slot for adding `calcite-action`s or content to the start side of the component's header.

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

@@ -3,8 +3,9 @@ import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { createRef, ref } from "lit/directives/ref.js";
-import { c as closestElementCrossShadowBoundary, s as slotChangeHasAssignedElement, g as getElementDir } from "../../chunks/dom.js";
+import { c as closestElementCrossShadowBoundary, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -51,6 +52,7 @@ const styles = css`.icon-position--end,.icon-position--start{--calcite-internal-
 class AccordionItem extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.headerRef = createRef();
     this.focusSetter = useSetFocus()(this);
     this.messages = useT9n();
@@ -173,7 +175,6 @@ class AccordionItem extends LitElement {
   }
   render() {
     const { iconFlipRtl, heading, headingLevel, messages, expanded } = this;
-    const dir = getElementDir(this.el);
     const expandIconTitle = expanded ? messages.collapse : messages.expand;
     const iconStartEl = this.iconStart ? keyed("icon-start", html`<calcite-icon class=${safeClassMap({ [CSS.icon]: true, [CSS.iconStart]: true })} .flipRtl=${iconFlipRtl === "both" || iconFlipRtl === "start"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`) : null;
     const iconEndEl = this.iconEnd ? keyed("icon-end", html`<calcite-icon class=${safeClassMap({ [CSS.iconEnd]: true, [CSS.icon]: true })} .flipRtl=${iconFlipRtl === "both" || iconFlipRtl === "end"} .icon=${this.iconEnd} .scale=${getIconScale(this.scale)}></calcite-icon>`) : null;
@@ -183,7 +184,7 @@ class AccordionItem extends LitElement {
       [CSS.iconType(this.iconType)]: true
     })}><div class=${safeClassMap({
       [CSS.header]: true,
-      [CSS_UTILITY.rtl]: dir === "rtl",
+      [CSS_UTILITY.rtl]: this.direction === "rtl",
       [CSS.headerAppearance(this.appearance)]: true
     })}>${this.renderActionsStart()}<button aria-controls=${IDS.section} .ariaExpanded=${expanded} class=${safeClassMap(CSS.headerContent)} id=${IDS.sectionToggle} @click=${this.itemHeaderClickHandler} type=button ${ref(this.headerRef)}><div class=${safeClassMap(CSS.headerContainer)}>${this.renderContentStart()}${iconStartEl}<div class=${safeClassMap(CSS.headerText)}>${Heading({ class: CSS.heading, level: headingLevel, children: heading })}${description ? html`<span class=${safeClassMap(CSS.description)}>${description}</span>` : null}</div>${iconEndEl}${this.renderContentEnd()}</div><calcite-icon class=${safeClassMap(CSS.expandIcon)} .icon=${this.iconType === "chevron" ? ICONS.chevronDown : this.iconType === "caret" ? ICONS.caretDown : expanded ? ICONS.minus : ICONS.plus} .scale=${getIconScale(this.scale)} title=${expandIconTitle ?? nothing}></calcite-icon></button>${this.renderActionsEnd()}</div><section aria-labelledby=${IDS.sectionToggle} class=${safeClassMap(CSS.content)} id=${IDS.section}><slot></slot></section></div>`;
   }

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

@@ -6,16 +6,16 @@ import type { IconName } from "../calcite-icon/interfaces.js";
 /**
  * @cssproperty [--calcite-action-background-color-hover] - Specifies the component's background color when hovered.
  * @cssproperty [--calcite-action-background-color-press] - Specifies the component's background color when active.
- * @cssproperty [--calcite-action-background-color-pressed] - [Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active.
+ * @cssproperty [--calcite-action-background-color-pressed] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-background-color-press` instead. Specifies the component's background color when active.
  * @cssproperty [--calcite-action-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-action-corner-radius-end-end] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end.
- * @cssproperty [--calcite-action-corner-radius-end-start] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start.
- * @cssproperty [--calcite-action-corner-radius-start-end] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end.
- * @cssproperty [--calcite-action-corner-radius-start-start] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start.
+ * @cssproperty [--calcite-action-corner-radius-end-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end end.
+ * @cssproperty [--calcite-action-corner-radius-end-start] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end start.
+ * @cssproperty [--calcite-action-corner-radius-start-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius start end.
+ * @cssproperty [--calcite-action-corner-radius-start-start] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius start start.
  * @cssproperty [--calcite-action-corner-radius] - Specifies the component's corner radius.
  * @cssproperty [--calcite-action-indicator-color] - Specifies the component's indicator color.
  * @cssproperty [--calcite-action-text-color-press] - Specifies the component's text color when pressed or hovered.
- * @cssproperty [--calcite-action-text-color-pressed] - [Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered.
+ * @cssproperty [--calcite-action-text-color-pressed] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-text-color-press` instead. Specifies the component's text color when hovered.
  * @cssproperty [--calcite-action-text-color] - Specifies the component's text color.
  * @slot  - A slot for adding non-interactive content, such as a `calcite-icon`.
  */
@@ -97,7 +97,7 @@ export abstract class Action extends LitElement {
    */
   accessor text: string;
   /**
-   * When `true`, indicates whether the text is displayed.
+   * When `true`, displays `text` adjacent to the `icon`.
    *
    * @default false
    */

package/dist/components/calcite-action-bar/customElement.d.ts

@@ -11,11 +11,14 @@ import type { OverlayPositioning } from "../../utils/floating-ui.js";
  * @cssproperty [--calcite-action-bar-shadow] - Specifies the component's shadow when `floating` is `true`.
  * @slot  - A slot for adding `calcite-action`s that will appear at the top of the component.
  * @slot [actions-end] - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
+ * @slot [actions-start] - A slot for adding `calcite-action`s that will appear at the start of the component. When `expandPosition` is `"start"`, actions in this slot will render after the collapse/expand button.
  * @slot [expand-tooltip] - A slot to set the `calcite-tooltip` for the expand toggle.
  */
 export abstract class ActionBar extends LitElement {
   /** Specifies an accessible name for the last `calcite-action-group`. */
   accessor actionsEndGroupLabel: string;
+  /** Specifies an accessible name for the first `calcite-action-group`. */
+  accessor actionsStartGroupLabel: string;
   /**
    * When `true`, the expand-toggling behavior is disabled.
    *
@@ -24,10 +27,17 @@ export abstract class ActionBar extends LitElement {
   accessor expandDisabled: boolean;
   /**
    * When `true`, expands the component and its contents.
+   * When a child `calcite-action` specifies `textEnabled` as `true`, its `text` initially displays adjacent to its `icon` regardless of expansion.
    *
    * @default false
    */
   accessor expanded: boolean;
+  /**
+   * Specifies the position of the expand `calcite-action`.
+   *
+   * @default "end"
+   */
+  accessor expandPosition: Extract<"start" | "end", Position>;
   /**
    * When `true`, the component is in a floating state.
    *
@@ -63,7 +73,14 @@ export abstract class ActionBar extends LitElement {
    * @default "absolute"
    */
   accessor overlayPositioning: OverlayPositioning;
-  /** Specifies the position of the component depending on the element's `dir` property. */
+  /**
+   * When `expandDisabled` is `false`, specifies the expand toggle's chevron direction, where:
+   *
+   * `"start"` positions the expand toggle's chevron away from the start of the component when `expanded` is `false`, and
+   * `"end"` positions the expand toggle's chevron away from the end of the component when `expanded` is `false`.
+   *
+   * When `expanded` is `true`, the chevron direction is reversed.
+   */
   accessor position: Extract<"start" | "end", Position>;
   /**
    * Specifies the size of the expand `calcite-action`.