@esri/calcite-components 5.1.0-next.4 → 5.1.0-next.41

package/dist/chunks/useForm.js

@@ -0,0 +1,294 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController, bypassReadOnly } from "@arcgis/lumina/controllers";
+import { uncapitalize, kebabToPascal } from "@arcgis/toolkit/string";
+import { r as isCalciteFocusable } from "./dom.js";
+import "lit";
+const minMaxStepTypes = ["date", "datetime-local", "month", "number", "range", "time", "week"];
+const patternTypes = ["email", "password", "search", "tel", "text", "url"];
+const minMaxLengthTypes = ["email", "password", "search", "tel", "text", "textarea", "url"];
+function updateConstraintValidation(inputComponent, input, propName, matchesType) {
+  const attributeName = propName.toLowerCase();
+  const value = inputComponent[propName];
+  if (matchesType && value != null) {
+    input.setAttribute(attributeName, `${value}`);
+  } else {
+    input.removeAttribute(attributeName);
+  }
+}
+function syncInputDelegate(type, inputComponent, input) {
+  input.type = type;
+  const isMinMaxStepType = minMaxStepTypes.includes(type);
+  const numericInputComponent = inputComponent;
+  updateConstraintValidation(numericInputComponent, input, "min", isMinMaxStepType);
+  updateConstraintValidation(numericInputComponent, input, "max", isMinMaxStepType);
+  updateConstraintValidation(numericInputComponent, input, "step", isMinMaxStepType);
+  const isMinMaxLengthType = minMaxLengthTypes.includes(type);
+  const textualInputComponent = inputComponent;
+  updateConstraintValidation(textualInputComponent, input, "minLength", isMinMaxLengthType);
+  updateConstraintValidation(textualInputComponent, input, "maxLength", isMinMaxLengthType);
+  const isPatternType = patternTypes.includes(type);
+  updateConstraintValidation(textualInputComponent, input, "pattern", isPatternType);
+}
+function isSupportedType(type) {
+  const effectiveType = type === "textarea" ? "text" : type;
+  return minMaxStepTypes.includes(effectiveType) || patternTypes.includes(effectiveType) || minMaxLengthTypes.includes(effectiveType);
+}
+const joinableValueTypes = ["text", "email", "search", "hidden", "tel", "url"];
+const allValid = Object.freeze({ validity: {}, validationMessage: "" });
+function validate(input, value) {
+  if (!Array.isArray(value)) {
+    if (validateValue(input, value)) {
+      return allValid;
+    }
+    return {
+      validity: getValidityFlags(input.validity),
+      validationMessage: input.validationMessage
+    };
+  }
+  if (joinableValueTypes.includes(input.type)) {
+    if (validateValue(input, value.join(","))) {
+      return allValid;
+    }
+    return {
+      validity: getValidityFlags(input.validity),
+      validationMessage: input.validationMessage
+    };
+  }
+  const mergedValidity = {};
+  const validationMessages = [];
+  for (const item of value) {
+    if (validateValue(input, item)) {
+      continue;
+    }
+    Object.assign(mergedValidity, getValidityFlags(input.validity));
+    if (input.validationMessage) {
+      validationMessages.push(input.validationMessage);
+    }
+  }
+  return {
+    validity: mergedValidity,
+    validationMessage: validationMessages.join("; ")
+  };
+}
+function validateValue(inputDelegate, valueToValidate) {
+  inputDelegate.value = // file will throw if non-empty string is provided
+  inputDelegate.type === "file" || valueToValidate == null ? "" : String(valueToValidate);
+  return inputDelegate.validity.valid;
+}
+function getValidityFlags(validityState) {
+  const validityFlags = {};
+  for (const key in validityState) {
+    if (key !== "valid" && validityState[key]) {
+      validityFlags[key] = true;
+    }
+  }
+  return validityFlags;
+}
+const componentsWithInputEvent = [
+  "calcite-input",
+  "calcite-input-number",
+  "calcite-input-text",
+  "calcite-text-area"
+];
+function getClearValidationEventName(componentTag) {
+  const componentTagCamelCase = uncapitalize(kebabToPascal(componentTag));
+  return `${componentTagCamelCase}${componentsWithInputEvent.includes(componentTag) ? "Input" : "Change"}`;
+}
+function isFormComponentEl(el) {
+  return "form" in el && "name" in el && isCalciteFocusable(el);
+}
+function displayValidationMessage(component, { status, message, icon }) {
+  if ("status" in component) {
+    component.status = status;
+  }
+  if ("validationIcon" in component && typeof component.validationIcon !== "string") {
+    component.validationIcon = icon;
+  }
+  if ("validationMessage" in component && !component.validationMessage) {
+    component.validationMessage = message;
+  }
+}
+function syncInternalInput(component, input) {
+  const { disabled, required } = component;
+  input.disabled = disabled;
+  input.required = !!required;
+  if (isCheckable(component)) {
+    input.checked = component.checked;
+  } else if (isInputComponent(component, input)) {
+    syncInputDelegate(input.type, component, input);
+  }
+}
+function isCheckable(component) {
+  return "checked" in component;
+}
+function isInputComponent(component, input) {
+  return component && isSupportedType(input.type);
+}
+function focusFirstInvalidFormElement(form) {
+  const formElements = Array.from(form.elements);
+  requestAnimationFrame(() => {
+    const invalidEls = formElements.filter(
+      (el) => el.matches("[status=invalid]") && isFormComponentEl(el)
+    );
+    for (const el of invalidEls) {
+      if (el.validationMessage) {
+        el.setFocus();
+        break;
+      }
+    }
+  });
+}
+const useForm = (options) => {
+  return makeGenericController((component, controller) => {
+    let customValidityMessage = "";
+    let inputDelegate;
+    let lastAssociatedForm = null;
+    let effectiveInputType = options.inputType;
+    if (effectiveInputType) {
+      inputDelegate = document.createElement("input");
+    }
+    function invalidFormHandler(event) {
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.preventDefault();
+      const form = event.currentTarget;
+      focusFirstInvalidFormElement(form);
+    }
+    function onFormReset() {
+      if ("status" in component) {
+        component.status = "idle";
+      }
+      if ("validationIcon" in component) {
+        component.validationIcon = false;
+      }
+      if ("validationMessage" in component) {
+        component.validationMessage = "";
+      }
+      if (isCheckable(component)) {
+        component.checked = component.defaultChecked;
+      }
+      component.value = component.defaultValue;
+    }
+    component.listen("luminaFormResetCallback", () => {
+      onFormReset();
+    });
+    component.listen("luminaFormAssociatedCallback", ({ detail: [form] }) => {
+      if (form) {
+        form.addEventListener("invalid", invalidFormHandler, { capture: true });
+      } else {
+        lastAssociatedForm?.removeEventListener("invalid", invalidFormHandler, { capture: true });
+      }
+      lastAssociatedForm = form;
+    });
+    function handleInvalidInput() {
+      const validationMsg = customValidityMessage || inputDelegate?.validationMessage || "";
+      component.el.dispatchEvent(
+        // allows users to set custom validation messages
+        new CustomEvent("calciteInvalid", { bubbles: true, composed: true })
+      );
+      displayValidationMessage(component, {
+        message: validationMsg,
+        icon: true,
+        status: "invalid"
+      });
+      const clearValidationEvent = getClearValidationEventName(component.el.tagName.toLowerCase());
+      component.listen(
+        clearValidationEvent,
+        () => {
+          if ("status" in component) {
+            component.status = "idle";
+          }
+          if ("validationIcon" in component && (!component.validationIcon || component.validationIcon === true)) {
+            component.validationIcon = false;
+          }
+          if ("validationMessage" in component && component.validationMessage === validationMsg) {
+            component.validationMessage = "";
+          }
+        },
+        { once: true }
+      );
+    }
+    controller.onConnected(() => {
+      component.el.addEventListener("invalid", handleInvalidInput);
+    });
+    controller.onDisconnected(() => {
+      component.el.removeEventListener("invalid", handleInvalidInput);
+    });
+    controller.onUpdate((changes) => {
+      if (!component.hasUpdated) {
+        component.defaultValue = component.value;
+        if (isCheckable(component)) {
+          component.defaultChecked = component.checked;
+        }
+      }
+      if (changes.has("name") || changes.has("value") || isCheckable(component) && changes.has("checked")) {
+        component.elementInternals.setFormValue(getFormValue());
+      }
+      updateValidity();
+    });
+    function updateValidity() {
+      const { elementInternals } = component;
+      let validity = {};
+      let validationMessage = "";
+      if (inputDelegate) {
+        inputDelegate.type = effectiveInputType;
+        syncInternalInput(component, inputDelegate);
+        ({ validity, validationMessage } = validate(inputDelegate, getComponentValue()));
+      }
+      if (customValidityMessage) {
+        validity = { ...validity, customError: true };
+        validationMessage = customValidityMessage;
+      }
+      elementInternals.setValidity(validity, validationMessage);
+      if ("validity" in component) {
+        bypassReadOnly(() => {
+          component.validity = elementInternals.validity;
+        });
+      }
+    }
+    function getComponentValue() {
+      if (options.getValue) {
+        return options.getValue();
+      }
+      return component.value;
+    }
+    function getFormValue() {
+      const value = getComponentValue();
+      if (Array.isArray(value)) {
+        const formData = new FormData();
+        value.forEach((value2) => formData.append(component.name, value2));
+        return formData;
+      }
+      if (isCheckable(component)) {
+        if (component.checked) {
+          return value || "on";
+        }
+        return null;
+      }
+      return value;
+    }
+    return {
+      get active() {
+        return !!component.elementInternals.form;
+      },
+      overrideDefaultValue: (value) => {
+        component.defaultValue = value;
+      },
+      overrideInputType: (type) => {
+        effectiveInputType = type;
+        updateValidity();
+      },
+      requestSubmit: () => {
+        component.elementInternals.form?.requestSubmit();
+      },
+      setCustomValidity: (message) => {
+        customValidityMessage = message;
+        updateValidity();
+      }
+    };
+  });
+};
+export {
+  useForm as u
+};

package/dist/chunks/useFormTrigger.js

@@ -0,0 +1,25 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
+const useFormTrigger = (options) => makeGenericController((component) => {
+  function clickHandler(event) {
+    const { form } = component.elementInternals;
+    if (event.defaultPrevented || component.disabled || options?.disabled?.() || !form || component.type === "button") {
+      return;
+    }
+    if (component.type === "submit") {
+      form.requestSubmit();
+      return;
+    }
+    form.reset();
+  }
+  component.listen("luminaFormAssociatedCallback", ({ detail: [form] }) => {
+    if (form) {
+      component.el.addEventListener("click", clickHandler);
+    } else {
+      component.el.removeEventListener("click", clickHandler);
+    }
+  });
+});
+export {
+  useFormTrigger 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/{sortableComponent.js → useSortable.js}

@@ -1,4 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
 import Sortable from "sortablejs";
 const sortableComponentSet = /* @__PURE__ */ new Set();
 const CSS = {
@@ -7,15 +8,17 @@ const CSS = {
   dragClass: "calcite-sortable--drag",
   fallbackClass: "calcite-sortable--fallback"
 };
-function connectSortableComponent(component) {
-  if (dragActive(component)) {
-    return;
-  }
-  disconnectSortableComponent(component);
-  sortableComponentSet.add(component);
+function onGlobalDragStart() {
+  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());
+}
+function onGlobalDragEnd() {
+  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
+}
+const globalDragState = { active: false };
+function createSortable(component) {
   const dataIdAttr = "id";
-  const { group, handleSelector: handle, dragSelector: draggable, sortDisabled } = component;
-  component.sortable = Sortable.create(component.el, {
+  const { el, group, handleSelector: handle, dragSelector: draggable, sortDisabled } = component;
+  return Sortable.create(el, {
     dataIdAttr,
     swapThreshold: 0.5,
     ...CSS,
@@ -25,22 +28,26 @@ function connectSortableComponent(component) {
       group: {
         name: group,
         ...!!component.canPull && {
-          pull: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => component.canPull({
-            toEl: to.el,
-            fromEl: from.el,
-            dragEl,
-            newIndex,
-            oldIndex
-          })
+          pull: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
+            return component.canPull({
+              toEl: to.el,
+              fromEl: from.el,
+              dragEl,
+              newIndex,
+              oldIndex
+            });
+          }
         },
         ...!!component.canPut && {
-          put: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => component.canPut({
-            toEl: to.el,
-            fromEl: from.el,
-            dragEl,
-            newIndex,
-            oldIndex
-          })
+          put: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
+            return component.canPut({
+              toEl: to.el,
+              fromEl: from.el,
+              dragEl,
+              newIndex,
+              oldIndex
+            });
+          }
         }
       }
     },
@@ -53,12 +60,12 @@ function connectSortableComponent(component) {
     handle,
     filter: `${handle}[disabled]`,
     onStart: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      dragState.active = true;
+      globalDragState.active = true;
       onGlobalDragStart();
       component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onEnd: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      dragState.active = false;
+      globalDragState.active = false;
       onGlobalDragEnd();
       component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
@@ -67,25 +74,44 @@ function connectSortableComponent(component) {
     }
   });
 }
-function disconnectSortableComponent(component) {
-  if (dragActive(component)) {
-    return;
-  }
-  sortableComponentSet.delete(component);
-  component.sortable?.destroy();
-  component.sortable = null;
-}
-const dragState = { active: false };
-function dragActive(component) {
-  return component.dragEnabled && dragState.active;
-}
-function onGlobalDragStart() {
-  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());
-}
-function onGlobalDragEnd() {
-  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
-}
+const useSortable = () => {
+  return makeGenericController((component, controller) => {
+    let sortable;
+    function dragActive(component2) {
+      return component2.dragEnabled && globalDragState.active;
+    }
+    function setUpSortable(component2) {
+      if (dragActive(component2)) {
+        return;
+      }
+      tearDownSortable(component2);
+      if (!component2.dragEnabled) {
+        return;
+      }
+      sortableComponentSet.add(component2);
+      sortable = createSortable(component2);
+    }
+    function tearDownSortable(component2) {
+      if (dragActive(component2)) {
+        return;
+      }
+      sortableComponentSet.delete(component2);
+      sortable?.destroy();
+      sortable = void 0;
+    }
+    controller.onConnected(() => {
+      setUpSortable(component);
+    });
+    controller.onDisconnected(() => {
+      tearDownSortable(component);
+    });
+    return {
+      reset: () => {
+        setUpSortable(component);
+      }
+    };
+  });
+};
 export {
-  connectSortableComponent as c,
-  disconnectSortableComponent as d
+  useSortable as u
 };

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.
@@ -57,7 +57,7 @@ export abstract class AccordionItem extends LitElement {
    * 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)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's content area is collapsed. */

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`.
  */
@@ -27,7 +27,7 @@ export abstract class Action extends LitElement {
    */
   accessor active: boolean;
   /** Specifies the horizontal alignment of button elements with text content. */
-  accessor alignment: Alignment;
+  accessor alignment: Alignment | undefined;
   /**
    * Specifies the appearance of the component.
    *
@@ -55,9 +55,9 @@ export abstract class Action extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -71,7 +71,7 @@ export abstract class Action extends LitElement {
    */
   accessor indicator: boolean;
   /** Specifies an accessible label for the component. If no label is provided, the label inherits what's provided for the `text` prop. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -99,6 +99,8 @@ export abstract class Action extends LitElement {
   /**
    * When `true`, displays `text` adjacent to the `icon`.
    *
+   * When `true` and the component is used as a child of `calcite-action-bar`, the text will be shown initially regardless of the parent components `expanded` state.
+   *
    * @default false
    */
   accessor textEnabled: boolean;
@@ -106,14 +108,14 @@ export abstract class Action extends LitElement {
    * Specifies the default behavior of the component.
    *
    * @default "button"
-   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
+   * @see [MDN - type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
    */
   accessor type: HTMLButtonElement["type"];
   /**
    * 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)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
 }