@esri/calcite-components 2.2.0-next.11 → 2.2.0-next.13

package/dist/collection/utils/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../src/utils/form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { closestElementCrossShadowBoundary, queryElementRoots } from \"./dom\";\nimport { FunctionalComponent, h } from \"@stencil/core\";\n\n/**\n * Exported for testing purposes.\n */\nexport const hiddenFormInputSlotName = \"hidden-form-input\";\n\n/**\n * Defines interface for form owning components.\n *\n * Allows calling submit/reset methods on the form.\n */\nexport interface FormOwner {\n  /**\n   * The host element.\n   */\n  readonly el: HTMLElement;\n\n  /**\n   * The ID of the form to associate with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  form: string;\n\n  /**\n   * The form this component is associated with.\n   *\n   * @internal\n   */\n  formEl: HTMLFormElement;\n}\n\n/**\n * Defines interface for form-associated components.\n *\n * Along with the interface, use the matching form utils to help set up the component behavior.\n */\nexport interface FormComponent<T = any> extends FormOwner {\n  /**\n   * When true, this component's value will not be submitted in the form.\n   */\n  disabled: boolean;\n\n  /**\n   * When true, form submit requests will enforce field requirement.\n   *\n   * @todo remove optional in follow-up PR\n   */\n  required?: boolean;\n\n  /**\n   * The name used to submit the value to the associated form.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  name: string;\n\n  /**\n   * This form component's value.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  value: T;\n\n  /**\n   * The initial value for this form component.\n   *\n   * When the form is reset, the value will be set to this property.\n   */\n  defaultValue: T;\n\n  /**\n   * Hook for components to provide custom form reset behavior.\n   */\n  onFormReset?(): void;\n\n  /**\n   * Hook for components to sync _extra_ props on the hidden input form element used for form-submitting.\n   *\n   * Note: The following props are set by default: disabled, hidden, name, required, value.\n   */\n  syncHiddenFormInput?(input: HTMLInputElement): void;\n}\n\n/**\n * Defines interface for checkable form-associated components.\n *\n * Along with the interface, use the matching form utils to help set up the component behavior.\n */\nexport interface CheckableFormComponent<T = any> extends FormComponent<T> {\n  /**\n   * For boolean-valued components, this property defines whether the associated value is submitted to the form or not.\n   */\n  checked: boolean;\n\n  /**\n   * The initial checked value for this form component.\n   *\n   * When the form is reset, the checked property will be set to this value.\n   */\n  defaultChecked: boolean;\n}\n\nfunction isCheckable(component: FormComponent): component is CheckableFormComponent {\n  return \"checked\" in component;\n}\n\nconst onFormResetMap = new WeakMap<HTMLElement, FormComponent[\"onFormReset\"]>();\nconst formComponentSet = new WeakSet<HTMLElement>();\n\n/**\n * This helps determine if our form component is part of a composite form-associated component.\n *\n * @param form\n * @param formComponentEl\n */\nfunction hasRegisteredFormComponentParent(\n  form: HTMLFormElement,\n  formComponentEl: HTMLElement,\n): boolean {\n  // if we have a parent component using the form ID attribute, we assume it is form-associated\n  const hasParentComponentWithFormIdSet = closestElementCrossShadowBoundary(\n    formComponentEl.parentElement,\n    \"[form]\",\n  );\n\n  if (hasParentComponentWithFormIdSet) {\n    return true;\n  }\n\n  // we use events as a way to test for nested form-associated components across shadow bounds\n  const formComponentRegisterEventName = \"calciteInternalFormComponentRegister\";\n\n  let hasRegisteredFormComponentParent = false;\n\n  form.addEventListener(\n    formComponentRegisterEventName,\n    (event) => {\n      hasRegisteredFormComponentParent = event\n        .composedPath()\n        .some((element) => formComponentSet.has(element as HTMLElement));\n      event.stopPropagation();\n    },\n    { once: true },\n  );\n\n  formComponentEl.dispatchEvent(\n    new CustomEvent(formComponentRegisterEventName, {\n      bubbles: true,\n      composed: true,\n    }),\n  );\n\n  return hasRegisteredFormComponentParent;\n}\n\n/**\n * Helper to submit a form.\n *\n * @param component\n * @returns true if its associated form was submitted, false otherwise.\n */\nexport function submitForm(component: FormOwner): boolean {\n  const { formEl } = component;\n\n  if (!formEl) {\n    return false;\n  }\n\n  formEl.requestSubmit();\n\n  return true;\n}\n\n/**\n * Helper to reset a form.\n *\n * @param component\n */\nexport function resetForm(component: FormOwner): void {\n  component.formEl?.reset();\n}\n\n/**\n * Helper to set up form interactions on connectedCallback.\n *\n * @param component\n */\nexport function connectForm<T>(component: FormComponent<T>): void {\n  const { el, value } = component;\n  const associatedForm = findAssociatedForm(component);\n\n  if (!associatedForm || hasRegisteredFormComponentParent(associatedForm, el)) {\n    return;\n  }\n\n  component.formEl = associatedForm;\n  component.defaultValue = value;\n\n  if (isCheckable(component)) {\n    component.defaultChecked = component.checked;\n  }\n\n  const boundOnFormReset = (component.onFormReset || onFormReset).bind(component);\n  associatedForm.addEventListener(\"reset\", boundOnFormReset);\n  onFormResetMap.set(component.el, boundOnFormReset);\n  formComponentSet.add(el);\n}\n\n/**\n * Utility method to find a form-component's associated form element.\n *\n * @param component\n */\nexport function findAssociatedForm(component: FormOwner): HTMLFormElement | null {\n  const { el, form } = component;\n\n  return form\n    ? queryElementRoots<HTMLFormElement>(el, { id: form })\n    : closestElementCrossShadowBoundary<HTMLFormElement>(el, \"form\");\n}\n\nfunction onFormReset<T>(this: FormComponent<T>): void {\n  if (isCheckable(this)) {\n    this.checked = this.defaultChecked;\n    return;\n  }\n\n  this.value = this.defaultValue;\n}\n\n/**\n * Helper to tear down form interactions on disconnectedCallback.\n *\n * @param component\n */\nexport function disconnectForm<T>(component: FormComponent<T>): void {\n  const { el, formEl } = component;\n\n  if (!formEl) {\n    return;\n  }\n\n  const boundOnFormReset = onFormResetMap.get(el);\n  formEl.removeEventListener(\"reset\", boundOnFormReset);\n  onFormResetMap.delete(el);\n  component.formEl = null;\n  formComponentSet.delete(el);\n}\n\n/**\n * Helper for setting the default value on initialization after connectedCallback.\n *\n * Note that this is only needed if the default value cannot be determined on connectedCallback.\n *\n * @param component\n * @param value\n */\nexport function afterConnectDefaultValueSet<T>(component: FormComponent<T>, value: any): void {\n  component.defaultValue = value;\n}\n\nconst hiddenInputChangeHandler = (event: Event) => {\n  event.target.dispatchEvent(\n    new CustomEvent(\"calciteInternalHiddenInputChange\", { bubbles: true }),\n  );\n};\n\nconst removeHiddenInputChangeEventListener = (input: HTMLInputElement) =>\n  input.removeEventListener(\"change\", hiddenInputChangeHandler);\n\n/**\n * Helper for maintaining a form-associated's hidden input in sync with the component.\n *\n * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198\n *\n * @param component\n */\nfunction syncHiddenFormInput(component: FormComponent): void {\n  const { el, formEl, name, value } = component;\n  const { ownerDocument } = el;\n\n  const inputs = el.querySelectorAll<HTMLInputElement>(`input[slot=\"${hiddenFormInputSlotName}\"]`);\n\n  if (!formEl || !name) {\n    inputs.forEach((input) => {\n      removeHiddenInputChangeEventListener(input);\n      input.remove();\n    });\n    return;\n  }\n\n  const values = Array.isArray(value) ? value : [value];\n  const extra: any[] = [];\n  const seen = new Set<any>();\n\n  inputs.forEach((input) => {\n    const valueMatch = values.find(\n      (val) =>\n        /* intentional non-strict equality check */\n        val == input.value,\n    );\n\n    if (valueMatch != null) {\n      seen.add(valueMatch);\n      defaultSyncHiddenFormInput(component, input, valueMatch);\n    } else {\n      extra.push(input);\n    }\n  });\n\n  let docFrag: DocumentFragment;\n\n  values.forEach((value) => {\n    if (seen.has(value)) {\n      return;\n    }\n\n    let input = extra.pop();\n\n    if (!input) {\n      input = ownerDocument!.createElement(\"input\");\n      input.slot = hiddenFormInputSlotName;\n    }\n\n    if (!docFrag) {\n      docFrag = ownerDocument!.createDocumentFragment();\n    }\n\n    docFrag.append(input);\n\n    // emits when hidden input is autofilled\n    input.addEventListener(\"change\", hiddenInputChangeHandler);\n\n    defaultSyncHiddenFormInput(component, input, value);\n  });\n\n  if (docFrag) {\n    el.append(docFrag);\n  }\n  extra.forEach((input) => {\n    removeHiddenInputChangeEventListener(input);\n    input.remove();\n  });\n}\n\nfunction defaultSyncHiddenFormInput(\n  component: FormComponent,\n  input: HTMLInputElement,\n  value: string,\n): void {\n  const { defaultValue, disabled, form, name, required } = component;\n\n  // keep in sync to prevent losing reset value\n  input.defaultValue = defaultValue;\n  input.disabled = disabled;\n  input.name = name;\n  input.required = required;\n  input.tabIndex = -1;\n\n  // we set the attr as the prop is read-only\n  if (form) {\n    input.setAttribute(\"form\", form);\n  } else {\n    input.removeAttribute(\"form\");\n  }\n\n  if (isCheckable(component)) {\n    input.checked = component.checked;\n\n    // keep in sync to prevent losing reset value\n    input.defaultChecked = component.defaultChecked;\n    // heuristic to support default/on mode from https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on\n    input.value = component.checked ? value || \"on\" : \"\";\n  } else {\n    input.value = value || \"\";\n  }\n\n  component.syncHiddenFormInput?.(input);\n}\n\ninterface HiddenFormInputSlotProps {\n  component: FormComponent;\n}\n\n/**\n * Helper to render the slot for form-associated component's hidden input.\n *\n * If the component has a default slot, this must be placed at the bottom of the component's root container to ensure it is the last child.\n *\n * render(): VNode {\n *   <Host>\n *     <div class={CSS.container}>\n *     // ...\n *     <HiddenFormInputSlot component={this} />\n *     </div>\n *   </Host>\n * }\n *\n * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.\n *\n * @param root0\n * @param root0.component\n */\nexport const HiddenFormInputSlot: FunctionalComponent<HiddenFormInputSlotProps> = ({\n  component,\n}) => {\n  syncHiddenFormInput(component);\n\n  return <slot name={hiddenFormInputSlotName} />;\n};\n"]}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../src/utils/form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { closestElementCrossShadowBoundary, queryElementRoots } from \"./dom\";\nimport { FunctionalComponent, h } from \"@stencil/core\";\n\n/**\n * Exported for testing purposes.\n */\nexport const hiddenFormInputSlotName = \"hidden-form-input\";\n\n/**\n * Defines interface for form owning components.\n *\n * Allows calling submit/reset methods on the form.\n */\nexport interface FormOwner {\n  /**\n   * The host element.\n   */\n  readonly el: HTMLElement;\n\n  /**\n   * The ID of the form to associate with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  form: string;\n\n  /**\n   * The form this component is associated with.\n   *\n   * @internal\n   */\n  formEl: HTMLFormElement;\n}\n\n/**\n * Defines interface for form-associated components.\n *\n * Along with the interface, use the matching form utils to help set up the component behavior.\n */\nexport interface FormComponent<T = any> extends FormOwner {\n  /**\n   * When true, this component's value will not be submitted in the form.\n   */\n  disabled: boolean;\n\n  /**\n   * When true, form submit requests will enforce field requirement.\n   *\n   * @todo remove optional in follow-up PR\n   */\n  required?: boolean;\n\n  /**\n   * The name used to submit the value to the associated form.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  name: string;\n\n  /**\n   * This form component's value.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  value: T;\n\n  /**\n   * The initial value for this form component.\n   *\n   * When the form is reset, the value will be set to this property.\n   */\n  defaultValue: T;\n\n  /**\n   * Hook for components to provide custom form reset behavior.\n   */\n  onFormReset?(): void;\n\n  /**\n   * Hook for components to sync _extra_ props on the hidden input form element used for form-submitting.\n   *\n   * Note: The following props are set by default: disabled, hidden, name, required, value.\n   */\n  syncHiddenFormInput?(input: HTMLInputElement): void;\n}\n\n/**\n * Defines interface for checkable form-associated components.\n *\n * Along with the interface, use the matching form utils to help set up the component behavior.\n */\nexport interface CheckableFormComponent<T = any> extends FormComponent<T> {\n  /**\n   * For boolean-valued components, this property defines whether the associated value is submitted to the form or not.\n   */\n  checked: boolean;\n\n  /**\n   * The initial checked value for this form component.\n   *\n   * When the form is reset, the checked property will be set to this value.\n   */\n  defaultChecked: boolean;\n}\n\nfunction isCheckable(component: FormComponent): component is CheckableFormComponent {\n  return \"checked\" in component;\n}\n\nconst onFormResetMap = new WeakMap<HTMLElement, FormComponent[\"onFormReset\"]>();\nconst formComponentSet = new WeakSet<HTMLElement>();\n\n/**\n * This helps determine if our form component is part of a composite form-associated component.\n *\n * @param form\n * @param formComponentEl\n */\nfunction hasRegisteredFormComponentParent(\n  form: HTMLFormElement,\n  formComponentEl: HTMLElement,\n): boolean {\n  // if we have a parent component using the form ID attribute, we assume it is form-associated\n  const hasParentComponentWithFormIdSet = closestElementCrossShadowBoundary(\n    formComponentEl.parentElement,\n    \"[form]\",\n  );\n\n  if (hasParentComponentWithFormIdSet) {\n    return true;\n  }\n\n  // we use events as a way to test for nested form-associated components across shadow bounds\n  const formComponentRegisterEventName = \"calciteInternalFormComponentRegister\";\n\n  let hasRegisteredFormComponentParent = false;\n\n  form.addEventListener(\n    formComponentRegisterEventName,\n    (event) => {\n      hasRegisteredFormComponentParent = event\n        .composedPath()\n        .some((element) => formComponentSet.has(element as HTMLElement));\n      event.stopPropagation();\n    },\n    { once: true },\n  );\n\n  formComponentEl.dispatchEvent(\n    new CustomEvent(formComponentRegisterEventName, {\n      bubbles: true,\n      composed: true,\n    }),\n  );\n\n  return hasRegisteredFormComponentParent;\n}\n\n/**\n * Helper to submit a form.\n *\n * @param component\n * @returns true if its associated form was submitted, false otherwise.\n */\nexport function submitForm(component: FormOwner): boolean {\n  const { formEl } = component;\n\n  if (!formEl) {\n    return false;\n  }\n\n  formEl.requestSubmit();\n\n  return true;\n}\n\n/**\n * Helper to reset a form.\n *\n * @param component\n */\nexport function resetForm(component: FormOwner): void {\n  component.formEl?.reset();\n}\n\n/**\n * Helper to set up form interactions on connectedCallback.\n *\n * @param component\n */\nexport function connectForm<T>(component: FormComponent<T>): void {\n  const { el, value } = component;\n  const associatedForm = findAssociatedForm(component);\n\n  if (!associatedForm || hasRegisteredFormComponentParent(associatedForm, el)) {\n    return;\n  }\n\n  component.formEl = associatedForm;\n  component.defaultValue = value;\n\n  if (isCheckable(component)) {\n    component.defaultChecked = component.checked;\n  }\n\n  const boundOnFormReset = (component.onFormReset || onFormReset).bind(component);\n  associatedForm.addEventListener(\"reset\", boundOnFormReset);\n  onFormResetMap.set(component.el, boundOnFormReset);\n  formComponentSet.add(el);\n}\n\n/**\n * Utility method to find a form-component's associated form element.\n *\n * @param component\n */\nexport function findAssociatedForm(component: FormOwner): HTMLFormElement | null {\n  const { el, form } = component;\n\n  return form\n    ? queryElementRoots<HTMLFormElement>(el, { id: form })\n    : closestElementCrossShadowBoundary<HTMLFormElement>(el, \"form\");\n}\n\nfunction onFormReset<T>(this: FormComponent<T>): void {\n  if (isCheckable(this)) {\n    this.checked = this.defaultChecked;\n    return;\n  }\n\n  this.value = this.defaultValue;\n}\n\n/**\n * Helper to tear down form interactions on disconnectedCallback.\n *\n * @param component\n */\nexport function disconnectForm<T>(component: FormComponent<T>): void {\n  const { el, formEl } = component;\n\n  if (!formEl) {\n    return;\n  }\n\n  const boundOnFormReset = onFormResetMap.get(el);\n  formEl.removeEventListener(\"reset\", boundOnFormReset);\n  onFormResetMap.delete(el);\n  component.formEl = null;\n  formComponentSet.delete(el);\n}\n\n/**\n * Helper for setting the default value on initialization after connectedCallback.\n *\n * Note that this is only needed if the default value cannot be determined on connectedCallback.\n *\n * @param component\n * @param value\n */\nexport function afterConnectDefaultValueSet<T>(component: FormComponent<T>, value: any): void {\n  component.defaultValue = value;\n}\n\nexport const internalHiddenInputInputEvent = \"calciteInternalHiddenInputInput\";\n\nconst hiddenInputInputHandler = (event: Event) => {\n  event.target.dispatchEvent(new CustomEvent(internalHiddenInputInputEvent, { bubbles: true }));\n};\n\nconst removeHiddenInputChangeEventListener = (input: HTMLInputElement) =>\n  input.removeEventListener(\"input\", hiddenInputInputHandler);\n\n/**\n * Helper for maintaining a form-associated's hidden input in sync with the component.\n *\n * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198\n *\n * @param component\n */\nfunction syncHiddenFormInput(component: FormComponent): void {\n  const { el, formEl, name, value } = component;\n  const { ownerDocument } = el;\n\n  const inputs = el.querySelectorAll<HTMLInputElement>(`input[slot=\"${hiddenFormInputSlotName}\"]`);\n\n  if (!formEl || !name) {\n    inputs.forEach((input) => {\n      removeHiddenInputChangeEventListener(input);\n      input.remove();\n    });\n    return;\n  }\n\n  const values = Array.isArray(value) ? value : [value];\n  const extra: any[] = [];\n  const seen = new Set<any>();\n\n  inputs.forEach((input) => {\n    const valueMatch = values.find(\n      (val) =>\n        /* intentional non-strict equality check */\n        val == input.value,\n    );\n\n    if (valueMatch != null) {\n      seen.add(valueMatch);\n      defaultSyncHiddenFormInput(component, input, valueMatch);\n    } else {\n      extra.push(input);\n    }\n  });\n\n  let docFrag: DocumentFragment;\n\n  values.forEach((value) => {\n    if (seen.has(value)) {\n      return;\n    }\n\n    let input = extra.pop();\n\n    if (!input) {\n      input = ownerDocument!.createElement(\"input\");\n      input.slot = hiddenFormInputSlotName;\n    }\n\n    if (!docFrag) {\n      docFrag = ownerDocument!.createDocumentFragment();\n    }\n\n    docFrag.append(input);\n\n    // emits when hidden input is autofilled\n    input.addEventListener(\"input\", hiddenInputInputHandler);\n\n    defaultSyncHiddenFormInput(component, input, value);\n  });\n\n  if (docFrag) {\n    el.append(docFrag);\n  }\n  extra.forEach((input) => {\n    removeHiddenInputChangeEventListener(input);\n    input.remove();\n  });\n}\n\nfunction defaultSyncHiddenFormInput(\n  component: FormComponent,\n  input: HTMLInputElement,\n  value: string,\n): void {\n  const { defaultValue, disabled, form, name, required } = component;\n\n  // keep in sync to prevent losing reset value\n  input.defaultValue = defaultValue;\n  input.disabled = disabled;\n  input.name = name;\n  input.required = required;\n  input.tabIndex = -1;\n\n  // we set the attr as the prop is read-only\n  if (form) {\n    input.setAttribute(\"form\", form);\n  } else {\n    input.removeAttribute(\"form\");\n  }\n\n  if (isCheckable(component)) {\n    input.checked = component.checked;\n\n    // keep in sync to prevent losing reset value\n    input.defaultChecked = component.defaultChecked;\n    // heuristic to support default/on mode from https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on\n    input.value = component.checked ? value || \"on\" : \"\";\n  } else {\n    input.value = value || \"\";\n  }\n\n  component.syncHiddenFormInput?.(input);\n}\n\ninterface HiddenFormInputSlotProps {\n  component: FormComponent;\n}\n\n/**\n * Helper to render the slot for form-associated component's hidden input.\n *\n * If the component has a default slot, this must be placed at the bottom of the component's root container to ensure it is the last child.\n *\n * render(): VNode {\n *   <Host>\n *     <div class={CSS.container}>\n *     // ...\n *     <HiddenFormInputSlot component={this} />\n *     </div>\n *   </Host>\n * }\n *\n * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.\n *\n * @param root0\n * @param root0.component\n */\nexport const HiddenFormInputSlot: FunctionalComponent<HiddenFormInputSlotProps> = ({\n  component,\n}) => {\n  syncHiddenFormInput(component);\n\n  return <slot name={hiddenFormInputSlotName} />;\n};\n"]}

package/dist/collection/utils/form.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { findAssociatedForm, resetForm, submitForm } from "./form";
 describe("form", () => {

package/dist/collection/utils/globalScript.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { initModeChangeEvent } from "./mode";
 /**

package/dist/collection/utils/guid.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 function gen(counts) {
     return counts

package/dist/collection/utils/guid.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { guid } from "./guid";
 export const guidPattern = /\w{8}-\w{4}-\w{4}-\w{4}-\w{12}/;

package/dist/collection/utils/interactive.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { getUserAgentString } from "./browser";
 import { h } from "@stencil/core";

package/dist/collection/utils/interactive.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { updateHostInteraction } from "./interactive";
 describe("interactive", () => {

package/dist/collection/utils/key.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 export function isActivationKey(key) {
     return key === "Enter" || key === " ";

package/dist/collection/utils/label.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { closestElementCrossShadowBoundary, isBefore, queryElementRoots } from "./dom";
 import { componentOnReady } from "./component";

package/dist/collection/utils/label.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { connectLabel, disconnectLabel, getLabelText, labelClickEvent } from "./label";
 describe("label", () => {

package/dist/collection/utils/loadable.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { Build, forceUpdate } from "@stencil/core";
 const resolveMap = new WeakMap();

package/dist/collection/utils/loadable.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { waitForAnimationFrame } from "../tests/utils";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "./loadable";

package/dist/collection/utils/locale.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { closestElementCrossShadowBoundary, containsCrossShadowBoundary } from "./dom";
 import { BigDecimal, isValidNumber, sanitizeExponentialNumberString } from "./number";

package/dist/collection/utils/locale.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { dateTimeFormatCache, defaultLocale, defaultNumberingSystem, getDateTimeFormat, getSupportedLocale, locales, numberingSystems, numberStringFormatter, } from "./locale";
 describe("NumberStringFormat", () => {

package/dist/collection/utils/math.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 export const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);

package/dist/collection/utils/math.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { clamp, closeToRangeEdge, decimalPlaces, remap } from "./math";
 describe("clamp", () => {

package/dist/collection/utils/mode.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { autoMode, darkMode } from "./resources";
 /**

package/dist/collection/utils/number.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { numberKeys } from "./key";
 const unnecessaryDecimal = new RegExp(`\\${"."}(0+)?$`);

package/dist/collection/utils/number.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { locales, numberStringFormatter } from "./locale";
 import { BigDecimal, addLocalizedTrailingDecimalZeros, expandExponentialNumberString, isValidNumber, parseNumberString, sanitizeNumberString, } from "./number";

package/dist/collection/utils/observers.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { Build } from "@stencil/core";
 /**

package/dist/collection/utils/openCloseComponent.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { readTask } from "@stencil/core";
 const componentToTransitionListeners = new WeakMap();

package/dist/collection/utils/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 export const autoMode = "calcite-mode-auto";
 export const darkMode = "calcite-mode-dark";

package/dist/collection/utils/responsive.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { calciteContainerSizeWidthLg, calciteContainerSizeWidthMd, calciteContainerSizeWidthSm, calciteContainerSizeWidthXs, calciteContainerSizeWidthXxs, } from "@esri/calcite-design-tokens/dist/es6/global";
 /**

package/dist/collection/utils/responsive.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { breakpoints } from "./responsive";
 import { toBeInteger } from "../tests/utils";

package/dist/collection/utils/sortableComponent.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import Sortable from "sortablejs";
 const sortableComponentSet = new Set();

package/dist/collection/utils/t9n.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { Build, getAssetPath } from "@stencil/core";
 import { getSupportedLocale } from "./locale";

package/dist/collection/utils/time.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { getDateTimeFormat, getSupportedNumberingSystem, numberStringFormatter } from "./locale";
 import { decimalPlaces } from "./math";

package/dist/collection/utils/time.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { formatTimePart, isValidTime, localizeTimeStringToParts, parseTimeString, toISOTimeString } from "./time";
 describe("formatTimePart", () => {

package/dist/components/ExpandToggle.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { forceUpdate, h } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir } from './dom.js';

package/dist/components/FloatingArrow.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/Heading.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/Validation.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/action-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/action-menu.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { g as getRoundRobinIndex } from './array.js';

package/dist/components/action.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';
@@ -32,7 +32,7 @@ const SLOTS = {
     tooltip: "tooltip",
 };
 
-const actionCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-color-brand)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-color-foreground-1);fill:var(--calcite-color-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.button:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1);outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.button:active{background-color:var(--calcite-color-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([data-active]) .button{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-color-foreground-3);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}:host([active]) .button:active{background-color:var(--calcite-color-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent}:host([appearance=transparent][active]) .button,:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading][appearance=solid]) .button,:host([loading][appearance=solid]) .button:hover,:host([loading][appearance=solid]) .button:focus{background-color:var(--calcite-color-foreground-1)}:host([loading][appearance=solid]) .button .text-container,:host([loading][appearance=solid]) .button:hover .text-container,:host([loading][appearance=solid]) .button:focus .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-color-text-3);margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-color-foreground-1);opacity:var(--calcite-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-color-foreground-3);opacity:var(--calcite-opacity-disabled)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.indicator-with-icon{position:relative}.indicator-with-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-without-icon{margin-inline:0.25rem;inline-size:1rem;position:relative}.indicator-without-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+const actionCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-color-brand);--calcite-action-color-transparent-hover:var(--calcite-color-transparent-hover);--calcite-action-color-transparent-press:var(--calcite-color-transparent-press)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-color-foreground-1);fill:var(--calcite-color-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.button:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1);outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.button:active{background-color:var(--calcite-color-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([data-active]) .button{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-color-foreground-3);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}:host([active]) .button:active{background-color:var(--calcite-color-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent}:host([appearance=transparent][active]) .button,:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:var(--calcite-action-color-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-color-transparent-press)}:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading][appearance=solid]) .button,:host([loading][appearance=solid]) .button:hover,:host([loading][appearance=solid]) .button:focus{background-color:var(--calcite-color-foreground-1)}:host([loading][appearance=solid]) .button .text-container,:host([loading][appearance=solid]) .button:hover .text-container,:host([loading][appearance=solid]) .button:focus .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-color-text-3);margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-color-foreground-1);opacity:var(--calcite-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-color-foreground-3);opacity:var(--calcite-opacity-disabled)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.indicator-with-icon{position:relative}.indicator-with-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-without-icon{margin-inline:0.25rem;inline-size:1rem;position:relative}.indicator-without-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Action = /*@__PURE__*/ proxyCustomElement(class Action extends HTMLElement {
     constructor() {

package/dist/components/action.js.map

@@ -1 +1 @@
-{"file":"action.js","mappings":"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","names":[],"sources":["src/components/action/resources.ts","src/components/action/action.scss?tag=calcite-action&encapsulation=shadow","src/components/action/action.tsx"],"sourcesContent":["export const CSS = {\n  button: \"button\",\n  buttonTextVisible: \"button--text-visible\",\n  buttonCompact: \"button--compact\",\n  indicatorText: \"indicator-text\",\n  iconContainer: \"icon-container\",\n  slotContainer: \"slot-container\",\n  slotContainerHidden: \"slot-container--hidden\",\n  textContainer: \"text-container\",\n  textContainerVisible: \"text-container--visible\",\n  indicatorWithIcon: \"indicator-with-icon\",\n  indicatorWithoutIcon: \"indicator-without-icon\",\n};\n\nexport const SLOTS = {\n  tooltip: \"tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-indicator-color: Specifies the color of the component's indicator.\n */\n\n:host {\n  @extend %component-host;\n  @apply flex bg-transparent;\n  --calcite-action-indicator-color: theme(\"colors.brand\");\n}\n\n@mixin action-indicator() {\n  position: relative;\n  &::after {\n    content: \"\";\n    @apply absolute\n      h-2\n      w-2\n      rounded-full;\n    inset-block-end: calc(-0.275rem);\n    inset-inline-end: calc(-0.275rem);\n    background-color: var(--calcite-action-indicator-color);\n  }\n}\n\n@include disabled();\n\n.button {\n  @apply bg-foreground-1\n    fill-color-3\n    focus-base\n    text-n2h\n    text-color-3\n    relative\n    m-0\n    flex\n    w-auto\n    cursor-pointer\n    items-center\n    justify-start\n    border-none\n    font-sans\n    font-medium;\n\n  text-align: unset;\n  flex: 1 0 auto;\n  &:hover {\n    @apply bg-foreground-2 text-color-1 fill-color-1;\n  }\n\n  &:focus {\n    @apply bg-foreground-2 text-color-1 fill-color-1 focus-inset;\n  }\n\n  &:active {\n    @apply bg-foreground-3;\n  }\n\n  .icon-container {\n    @apply pointer-events-none\n      m-0\n      flex\n      items-center\n      justify-center;\n    min-inline-size: theme(\"spacing.4\");\n    min-block-size: theme(\"spacing.4\");\n  }\n\n  .text-container {\n    @apply m-0\n      w-0\n      truncate\n      leading-6\n      opacity-0\n      transition-opacity\n      duration-150\n      ease-in-out;\n    transition-property: margin;\n    transition-property: inline-size;\n  }\n\n  .text-container--visible {\n    @apply w-auto flex-auto opacity-100;\n  }\n}\n\n:host([data-active]) .button {\n  @apply focus-inset;\n}\n\n:host([scale=\"s\"]) {\n  .button {\n    @apply text-n2h px-2 py-1 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.2\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  .button {\n    @apply text-n1h px-4 py-3 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.3\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  .button {\n    @apply text-0h p-5 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.4\");\n  }\n}\n\n:host([alignment=\"center\"]) .button {\n  @apply justify-center;\n}\n\n:host([alignment=\"end\"]) .button {\n  @apply justify-end;\n}\n\n:host([alignment=\"center\"]),\n:host([alignment=\"end\"]) {\n  .button .text-container--visible {\n    @apply flex-initial;\n  }\n}\n\n// Compact\n:host([scale=\"s\"][compact]) .button,\n:host([scale=\"m\"][compact]) .button,\n:host([scale=\"l\"][compact]) .button {\n  @apply px-0;\n}\n\n.slot-container {\n  @apply flex;\n}\n\n.slot-container--hidden {\n  @apply hidden;\n}\n\n.button--text-visible {\n  @apply w-full;\n}\n\n:host([active]) .button,\n:host([active]) .button:hover,\n:host([active]) .button:focus,\n:host([active][loading]) .button {\n  @apply text-color-1 fill-color-1 bg-foreground-3;\n}\n\n:host([active]) .button:active {\n  @apply bg-foreground-1;\n}\n\n:host([appearance=\"transparent\"]) .button {\n  @apply bg-transparent;\n}\n\n:host([appearance=\"transparent\"][active]) .button,\n:host([appearance=\"transparent\"]) .button:hover,\n:host([appearance=\"transparent\"]) .button:focus {\n  background-color: var(--calcite-button-transparent-hover);\n}\n\n:host([appearance=\"transparent\"]) .button:active {\n  background-color: var(--calcite-button-transparent-press);\n}\n\n:host([appearance=\"transparent\"][disabled]) .button {\n  @apply bg-transparent;\n}\n\n:host([loading][appearance=\"solid\"]) .button,\n:host([loading][appearance=\"solid\"]) .button:hover,\n:host([loading][appearance=\"solid\"]) .button:focus {\n  @apply bg-foreground-1;\n  .text-container {\n    @apply opacity-disabled;\n  }\n}\n\n:host([loading]) calcite-loader[inline] {\n  @apply text-color-3;\n  margin-inline-end: theme(\"spacing.0\");\n}\n\n:host([disabled]) .button,\n:host([disabled]) .button:hover,\n:host([disabled]) .button:focus {\n  @apply opacity-disabled bg-foreground-1 cursor-default;\n}\n\n:host([disabled][active]) .button,\n:host([disabled][active]) .button:hover,\n:host([disabled][active]) .button:focus {\n  @apply opacity-disabled bg-foreground-3;\n}\n\n:host([appearance=\"transparent\"]) .button {\n  @apply bg-transparent\n    transition-shadow\n    duration-150\n    ease-in-out;\n}\n\n.indicator-with-icon {\n  @include action-indicator();\n}\n\n.indicator-without-icon {\n  @apply w-4 mx-1;\n  @include action-indicator();\n}\n\n.indicator-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Alignment, Appearance, Scale } from \"../interfaces\";\nimport { ActionMessages } from \"./assets/action/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-icon`.\n * @slot tooltip - A slot for adding a `calcite-tooltip`.\n */\n@Component({\n  tag: \"calcite-action\",\n  styleUrl: \"action.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Action\n  implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is highlighted.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the horizontal alignment of button elements with text content.\n   */\n  @Prop({ reflect: true }) alignment: Alignment;\n\n  /** Specifies the appearance of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"solid\" | \"transparent\", Appearance> = \"solid\";\n\n  /**\n   * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.\n   */\n  @Prop({ reflect: true }) compact = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies an icon to display. */\n  @Prop() icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * When `true`, displays a visual indicator.\n   */\n  @Prop({ reflect: true }) indicator = false;\n\n  /**\n   * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies text that accompanies the icon.\n   */\n  @Prop() text!: string;\n\n  /**\n   * Indicates whether the text is displayed.\n   */\n  @Prop({ reflect: true }) textEnabled = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ActionMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ActionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionElement;\n\n  buttonEl: HTMLButtonElement;\n\n  mutationObserver = createObserver(\"mutation\", () => forceUpdate(this));\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionMessages;\n\n  guid = `calcite-action-${guid()}`;\n\n  indicatorId = `${this.guid}-indicator`;\n\n  buttonId = `${this.guid}-button`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (Build.isBrowser) {\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.buttonEl?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTextContainer(): VNode {\n    const { text, textEnabled } = this;\n\n    const textContainerClasses = {\n      [CSS.textContainer]: true,\n      [CSS.textContainerVisible]: textEnabled,\n    };\n\n    return text ? (\n      <div class={textContainerClasses} key=\"text-container\">\n        {text}\n      </div>\n    ) : null;\n  }\n\n  renderIndicatorText(): VNode {\n    const { indicator, messages, indicatorId, buttonId } = this;\n    return (\n      <div\n        aria-labelledby={buttonId}\n        aria-live=\"polite\"\n        class={CSS.indicatorText}\n        id={indicatorId}\n        role=\"region\"\n      >\n        {indicator ? messages.indicator : null}\n      </div>\n    );\n  }\n\n  renderIconContainer(): VNode {\n    const { loading, icon, scale, el, iconFlipRtl, indicator } = this;\n    const loaderScale = scale === \"l\" ? \"l\" : \"m\";\n    const calciteLoaderNode = loading ? (\n      <calcite-loader inline label={this.messages.loading} scale={loaderScale} />\n    ) : null;\n    const calciteIconNode = icon ? (\n      <calcite-icon\n        class={{ [CSS.indicatorWithIcon]: indicator }}\n        flipRtl={iconFlipRtl}\n        icon={icon}\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconNode = calciteLoaderNode || calciteIconNode;\n    const hasIconToDisplay = iconNode || el.children?.length;\n\n    const slotContainerNode = (\n      <div\n        class={{\n          [CSS.slotContainer]: true,\n          [CSS.slotContainerHidden]: loading,\n        }}\n      >\n        <slot />\n      </div>\n    );\n\n    return hasIconToDisplay ? (\n      <div aria-hidden=\"true\" class={CSS.iconContainer} key=\"icon-container\">\n        {iconNode}\n        {slotContainerNode}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      active,\n      compact,\n      disabled,\n      icon,\n      loading,\n      textEnabled,\n      label,\n      text,\n      indicator,\n      indicatorId,\n      buttonId,\n      messages,\n    } = this;\n    const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : \"\"}`;\n\n    const buttonClasses = {\n      [CSS.button]: true,\n      [CSS.buttonTextVisible]: textEnabled,\n      [CSS.buttonCompact]: compact,\n    };\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <button\n            aria-busy={toAriaBoolean(loading)}\n            aria-controls={indicator ? indicatorId : null}\n            aria-disabled={toAriaBoolean(disabled)}\n            aria-label={ariaLabel}\n            aria-pressed={toAriaBoolean(active)}\n            class={buttonClasses}\n            disabled={disabled}\n            id={buttonId}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}\n          >\n            {this.renderIconContainer()}\n            {this.renderTextContainer()}\n            {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key=\"indicator-no-icon\" />}\n          </button>\n          <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />\n          {this.renderIndicatorText()}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = (event.target as HTMLSlotElement)\n      .assignedElements({\n        flatten: true,\n      })\n      .filter((el) => el?.matches(\"calcite-tooltip\")) as HTMLCalciteTooltipElement[];\n\n    const tooltip = tooltips[0];\n\n    if (tooltip) {\n      tooltip.referenceElement = this.buttonEl;\n    }\n  };\n}\n"],"version":3}
+{"file":"action.js","mappings":"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","names":[],"sources":["src/components/action/resources.ts","src/components/action/action.scss?tag=calcite-action&encapsulation=shadow","src/components/action/action.tsx"],"sourcesContent":["export const CSS = {\n  button: \"button\",\n  buttonTextVisible: \"button--text-visible\",\n  buttonCompact: \"button--compact\",\n  indicatorText: \"indicator-text\",\n  iconContainer: \"icon-container\",\n  slotContainer: \"slot-container\",\n  slotContainerHidden: \"slot-container--hidden\",\n  textContainer: \"text-container\",\n  textContainerVisible: \"text-container--visible\",\n  indicatorWithIcon: \"indicator-with-icon\",\n  indicatorWithoutIcon: \"indicator-without-icon\",\n};\n\nexport const SLOTS = {\n  tooltip: \"tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-indicator-color: Specifies the color of the component's indicator.\n */\n\n:host {\n  @extend %component-host;\n  @apply flex bg-transparent;\n  --calcite-action-indicator-color: theme(\"colors.brand\");\n  --calcite-action-color-transparent-hover: var(--calcite-color-transparent-hover);\n  --calcite-action-color-transparent-press: var(--calcite-color-transparent-press);\n}\n\n@mixin action-indicator() {\n  position: relative;\n  &::after {\n    content: \"\";\n    @apply absolute\n      h-2\n      w-2\n      rounded-full;\n    inset-block-end: calc(-0.275rem);\n    inset-inline-end: calc(-0.275rem);\n    background-color: var(--calcite-action-indicator-color);\n  }\n}\n\n@include disabled();\n\n.button {\n  @apply bg-foreground-1\n    fill-color-3\n    focus-base\n    text-n2h\n    text-color-3\n    relative\n    m-0\n    flex\n    w-auto\n    cursor-pointer\n    items-center\n    justify-start\n    border-none\n    font-sans\n    font-medium;\n\n  text-align: unset;\n  flex: 1 0 auto;\n  &:hover {\n    @apply bg-foreground-2 text-color-1 fill-color-1;\n  }\n\n  &:focus {\n    @apply bg-foreground-2 text-color-1 fill-color-1 focus-inset;\n  }\n\n  &:active {\n    @apply bg-foreground-3;\n  }\n\n  .icon-container {\n    @apply pointer-events-none\n      m-0\n      flex\n      items-center\n      justify-center;\n    min-inline-size: theme(\"spacing.4\");\n    min-block-size: theme(\"spacing.4\");\n  }\n\n  .text-container {\n    @apply m-0\n      w-0\n      truncate\n      leading-6\n      opacity-0\n      transition-opacity\n      duration-150\n      ease-in-out;\n    transition-property: margin;\n    transition-property: inline-size;\n  }\n\n  .text-container--visible {\n    @apply w-auto flex-auto opacity-100;\n  }\n}\n\n:host([data-active]) .button {\n  @apply focus-inset;\n}\n\n:host([scale=\"s\"]) {\n  .button {\n    @apply text-n2h px-2 py-1 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.2\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  .button {\n    @apply text-n1h px-4 py-3 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.3\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  .button {\n    @apply text-0h p-5 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.4\");\n  }\n}\n\n:host([alignment=\"center\"]) .button {\n  @apply justify-center;\n}\n\n:host([alignment=\"end\"]) .button {\n  @apply justify-end;\n}\n\n:host([alignment=\"center\"]),\n:host([alignment=\"end\"]) {\n  .button .text-container--visible {\n    @apply flex-initial;\n  }\n}\n\n// Compact\n:host([scale=\"s\"][compact]) .button,\n:host([scale=\"m\"][compact]) .button,\n:host([scale=\"l\"][compact]) .button {\n  @apply px-0;\n}\n\n.slot-container {\n  @apply flex;\n}\n\n.slot-container--hidden {\n  @apply hidden;\n}\n\n.button--text-visible {\n  @apply w-full;\n}\n\n:host([active]) .button,\n:host([active]) .button:hover,\n:host([active]) .button:focus,\n:host([active][loading]) .button {\n  @apply text-color-1 fill-color-1 bg-foreground-3;\n}\n\n:host([active]) .button:active {\n  @apply bg-foreground-1;\n}\n\n:host([appearance=\"transparent\"]) .button {\n  @apply bg-transparent;\n}\n\n:host([appearance=\"transparent\"][active]) .button,\n:host([appearance=\"transparent\"]) .button:hover,\n:host([appearance=\"transparent\"]) .button:focus {\n  background-color: var(--calcite-action-color-transparent-hover);\n}\n\n:host([appearance=\"transparent\"]) .button:active {\n  background-color: var(--calcite-action-color-transparent-press);\n}\n\n:host([appearance=\"transparent\"][disabled]) .button {\n  @apply bg-transparent;\n}\n\n:host([loading][appearance=\"solid\"]) .button,\n:host([loading][appearance=\"solid\"]) .button:hover,\n:host([loading][appearance=\"solid\"]) .button:focus {\n  @apply bg-foreground-1;\n  .text-container {\n    @apply opacity-disabled;\n  }\n}\n\n:host([loading]) calcite-loader[inline] {\n  @apply text-color-3;\n  margin-inline-end: theme(\"spacing.0\");\n}\n\n:host([disabled]) .button,\n:host([disabled]) .button:hover,\n:host([disabled]) .button:focus {\n  @apply opacity-disabled bg-foreground-1 cursor-default;\n}\n\n:host([disabled][active]) .button,\n:host([disabled][active]) .button:hover,\n:host([disabled][active]) .button:focus {\n  @apply opacity-disabled bg-foreground-3;\n}\n\n:host([appearance=\"transparent\"]) .button {\n  @apply bg-transparent\n    transition-shadow\n    duration-150\n    ease-in-out;\n}\n\n.indicator-with-icon {\n  @include action-indicator();\n}\n\n.indicator-without-icon {\n  @apply w-4 mx-1;\n  @include action-indicator();\n}\n\n.indicator-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Alignment, Appearance, Scale } from \"../interfaces\";\nimport { ActionMessages } from \"./assets/action/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-icon`.\n * @slot tooltip - A slot for adding a `calcite-tooltip`.\n */\n@Component({\n  tag: \"calcite-action\",\n  styleUrl: \"action.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Action\n  implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is highlighted.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the horizontal alignment of button elements with text content.\n   */\n  @Prop({ reflect: true }) alignment: Alignment;\n\n  /** Specifies the appearance of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"solid\" | \"transparent\", Appearance> = \"solid\";\n\n  /**\n   * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.\n   */\n  @Prop({ reflect: true }) compact = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies an icon to display. */\n  @Prop() icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * When `true`, displays a visual indicator.\n   */\n  @Prop({ reflect: true }) indicator = false;\n\n  /**\n   * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies text that accompanies the icon.\n   */\n  @Prop() text!: string;\n\n  /**\n   * Indicates whether the text is displayed.\n   */\n  @Prop({ reflect: true }) textEnabled = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ActionMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ActionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionElement;\n\n  buttonEl: HTMLButtonElement;\n\n  mutationObserver = createObserver(\"mutation\", () => forceUpdate(this));\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionMessages;\n\n  guid = `calcite-action-${guid()}`;\n\n  indicatorId = `${this.guid}-indicator`;\n\n  buttonId = `${this.guid}-button`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (Build.isBrowser) {\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.buttonEl?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTextContainer(): VNode {\n    const { text, textEnabled } = this;\n\n    const textContainerClasses = {\n      [CSS.textContainer]: true,\n      [CSS.textContainerVisible]: textEnabled,\n    };\n\n    return text ? (\n      <div class={textContainerClasses} key=\"text-container\">\n        {text}\n      </div>\n    ) : null;\n  }\n\n  renderIndicatorText(): VNode {\n    const { indicator, messages, indicatorId, buttonId } = this;\n    return (\n      <div\n        aria-labelledby={buttonId}\n        aria-live=\"polite\"\n        class={CSS.indicatorText}\n        id={indicatorId}\n        role=\"region\"\n      >\n        {indicator ? messages.indicator : null}\n      </div>\n    );\n  }\n\n  renderIconContainer(): VNode {\n    const { loading, icon, scale, el, iconFlipRtl, indicator } = this;\n    const loaderScale = scale === \"l\" ? \"l\" : \"m\";\n    const calciteLoaderNode = loading ? (\n      <calcite-loader inline label={this.messages.loading} scale={loaderScale} />\n    ) : null;\n    const calciteIconNode = icon ? (\n      <calcite-icon\n        class={{ [CSS.indicatorWithIcon]: indicator }}\n        flipRtl={iconFlipRtl}\n        icon={icon}\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconNode = calciteLoaderNode || calciteIconNode;\n    const hasIconToDisplay = iconNode || el.children?.length;\n\n    const slotContainerNode = (\n      <div\n        class={{\n          [CSS.slotContainer]: true,\n          [CSS.slotContainerHidden]: loading,\n        }}\n      >\n        <slot />\n      </div>\n    );\n\n    return hasIconToDisplay ? (\n      <div aria-hidden=\"true\" class={CSS.iconContainer} key=\"icon-container\">\n        {iconNode}\n        {slotContainerNode}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      active,\n      compact,\n      disabled,\n      icon,\n      loading,\n      textEnabled,\n      label,\n      text,\n      indicator,\n      indicatorId,\n      buttonId,\n      messages,\n    } = this;\n    const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : \"\"}`;\n\n    const buttonClasses = {\n      [CSS.button]: true,\n      [CSS.buttonTextVisible]: textEnabled,\n      [CSS.buttonCompact]: compact,\n    };\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <button\n            aria-busy={toAriaBoolean(loading)}\n            aria-controls={indicator ? indicatorId : null}\n            aria-disabled={toAriaBoolean(disabled)}\n            aria-label={ariaLabel}\n            aria-pressed={toAriaBoolean(active)}\n            class={buttonClasses}\n            disabled={disabled}\n            id={buttonId}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}\n          >\n            {this.renderIconContainer()}\n            {this.renderTextContainer()}\n            {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key=\"indicator-no-icon\" />}\n          </button>\n          <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />\n          {this.renderIndicatorText()}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = (event.target as HTMLSlotElement)\n      .assignedElements({\n        flatten: true,\n      })\n      .filter((el) => el?.matches(\"calcite-tooltip\")) as HTMLCalciteTooltipElement[];\n\n    const tooltip = tooltips[0];\n\n    if (tooltip) {\n      tooltip.referenceElement = this.buttonEl;\n    }\n  };\n}\n"],"version":3}

package/dist/components/ar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/array.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 function getRoundRobinIndex(index, total) {
     return (index + total) % total;

package/dist/components/avatar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.13
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { p as getModeName } from './dom.js';