@esri/calcite-components 5.1.0-next.6 → 5.1.0-next.60

package/dist/components/calcite-pagination/customElement.js

@@ -25,7 +25,7 @@ const ICONS = {
   first: "chevron-start",
   last: "chevron-end"
 };
-const styles = css`:host{display:flex;writing-mode:horizontal-tb}.list{margin:0;display:flex;list-style-type:none;padding:0;column-gap:var(--calcite-spacing-base)}.list-item{margin:0;display:flex;padding:0}.hidden-item{display:none}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:.25rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:.75rem}:host button{outline-color:transparent}:host button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron,.page,.ellipsis{margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity: 0;background-color:transparent;padding:0;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);color:var(--calcite-pagination-color, var(--calcite-color-text-3))}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.chevron:active,.page:active{color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.page:hover{border-block-end-color:var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2))}.page:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1));border-block-end-color:var(--calcite-pagination-color-border-active, var(--calcite-color-brand))}.page.selected:focus{border-block-end-width:var(--calcite-spacing-xxs);padding-block-start:var(--calcite-spacing-base)}.chevron:hover{background-color:var(--calcite-pagination-icon-color-background-hover, var(--calcite-color-foreground-2))}.chevron:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:flex;writing-mode:horizontal-tb}.list{margin:0;display:flex;list-style-type:none;padding:0;column-gap:var(--calcite-spacing-base)}.list-item{margin:0;display:flex;padding:0}.hidden-item{display:none}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:.25rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:var(--calcite-space-sm-plus)}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:.75rem}:host button{outline-color:transparent}:host button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron,.page,.ellipsis{margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity: 0;background-color:transparent;padding:0;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);color:var(--calcite-pagination-color, var(--calcite-color-text-3))}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.chevron:active,.page:active{color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.page:hover{border-block-end-color:var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2))}.page:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1));border-block-end-color:var(--calcite-pagination-color-border-active, var(--calcite-color-brand))}.page.selected:focus{border-block-end-width:var(--calcite-spacing-xxs);padding-block-start:var(--calcite-spacing-base)}.chevron:hover{background-color:var(--calcite-pagination-icon-color-background-hover, var(--calcite-color-foreground-2))}.chevron:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}`;
 const firstAndLastPageCount = 2;
 const ellipsisCount = 2;
 const maxItemBreakpoints = {

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

@@ -25,9 +25,9 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-panel-header-content-space] - Specifies the padding of the component's `header-content` slot.
  * @cssproperty [--calcite-panel-footer-space] - Specifies the padding of the component's footer.
  * @cssproperty [--calcite-popover-border-color] - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
- * @cssproperty [--calcite-panel-content-space] - [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
- * @cssproperty [--calcite-panel-footer-padding] - [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
- * @cssproperty [--calcite-panel-header-border-block-end] - [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border.
+ * @cssproperty [--calcite-panel-content-space] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
+ * @cssproperty [--calcite-panel-footer-padding] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
+ * @cssproperty [--calcite-panel-header-border-block-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-border-color` instead. Specifies the component header's block end border.
  * @slot  - A slot for adding custom content.
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
  * @slot [alerts] - A slot for adding `calcite-alert`s to the component.
@@ -37,6 +37,8 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @slot [header-actions-end] - A slot for adding actions or content to the end side of the header.
  * @slot [header-content] - A slot for adding custom content to the header.
  * @slot [header-menu-actions] - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
+ * @slot [heading] - A slot for adding content to the heading area of the default header. Takes precedence over the `heading` property.
+ * @slot [description] - A slot for adding content to the description area of the default header. Takes precedence over the `description` property.
  * @slot [fab] - A slot for adding a `calcite-fab` (floating action button) to perform an action.
  * @slot [footer] - A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots.
  * @slot [footer-end] - A slot for adding custom content to a trailing footer. Should not be used with the `"footer"` slot.
@@ -144,7 +146,7 @@ export abstract class Panel extends LitElement {
    * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
-   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /**
@@ -164,7 +166,7 @@ export abstract class Panel extends LitElement {
    * Sets focus on the component's first focusable element.
    *
    * @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 close button is clicked. */

package/dist/components/calcite-panel/customElement.js

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements, A as slotChangeHasTextContent, h as hasVisibleContent } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { S as SLOTS$1 } from "../../chunks/resources2.js";
@@ -34,6 +34,8 @@ class Panel extends LitElement {
     this.hasFooterEndContent = false;
     this.hasFooterStartContent = false;
     this.hasHeaderContent = false;
+    this.hasHeaderDescription = false;
+    this.hasHeaderHeading = false;
     this.hasMenuItems = false;
     this.hasStartActions = false;
     this.showHeaderContent = false;
@@ -58,7 +60,7 @@ class Panel extends LitElement {
     this.listen("calcitePanelClose", this.panelCloseHandler);
   }
   static {
-    this.properties = { hasActionBar: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasFab: [16, {}, { state: true }], hasFooterContent: [16, {}, { state: true }], hasFooterEndContent: [16, {}, { state: true }], hasFooterStartContent: [16, {}, { state: true }], hasHeaderContent: [16, {}, { state: true }], hasMenuItems: [16, {}, { state: true }], hasStartActions: [16, {}, { state: true }], showHeaderContent: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasActionBar: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasFab: [16, {}, { state: true }], hasFooterContent: [16, {}, { state: true }], hasFooterEndContent: [16, {}, { state: true }], hasFooterStartContent: [16, {}, { state: true }], hasHeaderContent: [16, {}, { state: true }], hasHeaderDescription: [16, {}, { state: true }], hasHeaderHeading: [16, {}, { state: true }], hasMenuItems: [16, {}, { state: true }], hasStartActions: [16, {}, { state: true }], showHeaderContent: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = [styles$1, styles];
@@ -155,6 +157,12 @@ class Panel extends LitElement {
   handleHeaderContentSlotChange(event) {
     this.hasHeaderContent = slotChangeHasAssignedElement(event);
   }
+  handleHeaderDescriptionSlotChange(event) {
+    this.hasHeaderDescription = slotChangeHasTextContent(event) || slotChangeGetAssignedElements(event).some(hasVisibleContent);
+  }
+  handleHeaderHeadingSlotChange(event) {
+    this.hasHeaderHeading = slotChangeHasTextContent(event) || slotChangeGetAssignedElements(event).some(hasVisibleContent);
+  }
   handleFabSlotChange(event) {
     this.hasFab = slotChangeHasAssignedElement(event);
   }
@@ -185,11 +193,14 @@ class Panel extends LitElement {
     });
   }
   renderHeaderContent() {
-    const { heading, headingLevel, description, hasHeaderContent, icon, scale } = this;
+    const { heading, headingLevel, description, hasHeaderContent, hasHeaderDescription, hasHeaderHeading, icon, scale } = this;
+    const showHeaderHeading = !!heading || hasHeaderHeading;
+    const showHeaderDescription = !!description || hasHeaderDescription;
+    const showHeaderTextContent = showHeaderHeading || showHeaderDescription;
     const iconNode = icon ? html`<calcite-icon class=${safeClassMap(CSS.icon)} .flipRtl=${this.iconFlipRtl} .icon=${icon} .scale=${getIconScale(scale)}></calcite-icon>` : null;
-    const headingNode = heading ? Heading({ class: CSS.heading, level: headingLevel, children: heading }) : null;
-    const descriptionNode = description ? html`<span class=${safeClassMap(CSS.description)}>${description}</span>` : null;
-    return !hasHeaderContent && (headingNode || descriptionNode) ? keyed("header-content", html`<div class=${safeClassMap({ [CSS.headerContent]: true, [CSS.headerNonSlottedContent]: true })}>${iconNode}<div class=${safeClassMap(CSS.headingTextContent)}>${headingNode}${descriptionNode}</div></div>`) : null;
+    const headingNode = Heading({ class: CSS.heading, hidden: !showHeaderHeading, level: headingLevel, children: html`<slot .hidden=${!hasHeaderHeading} name=${SLOTS.heading} @slotchange=${this.handleHeaderHeadingSlotChange}></slot>${!hasHeaderHeading ? heading : null}` });
+    const descriptionNode = html`<span class=${safeClassMap(CSS.description)} .hidden=${!showHeaderDescription}><slot .hidden=${!hasHeaderDescription} name=${SLOTS.description} @slotchange=${this.handleHeaderDescriptionSlotChange}></slot>${!hasHeaderDescription ? description : null}</span>`;
+    return keyed("header-content", html`<div class=${safeClassMap({ [CSS.headerContent]: true, [CSS.headerNonSlottedContent]: true })} .hidden=${hasHeaderContent || !showHeaderTextContent}>${iconNode}<div class=${safeClassMap(CSS.headingTextContent)}>${headingNode}${descriptionNode}</div></div>`);
   }
   renderActionBar() {
     return html`<div class=${safeClassMap(CSS.actionBarContainer)} .hidden=${!this.hasActionBar}><slot name=${SLOTS.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`;
@@ -219,9 +230,10 @@ class Panel extends LitElement {
     return keyed("menu", html`<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!hasMenuItems} .label=${messages.options} .open=${menuOpen} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement} .scale=${scale} .topLayerDisabled=${this.topLayerDisabled}><calcite-action class=${safeClassMap(CSS.menuAction)} .icon=${ICONS.menu} .scale=${scale} slot=${SLOTS$1.trigger} .text=${messages.options}></calcite-action><slot name=${SLOTS.headerMenuActions} @slotchange=${this.handleHeaderMenuActionsSlotChange}></slot></calcite-action-menu>`);
   }
   renderHeaderNode() {
-    const { hasHeaderContent, hasStartActions, hasEndActions, closable, collapsible, hasMenuItems, hasActionBar, hasContentTop } = this;
+    const { hasHeaderContent, hasHeaderDescription, hasHeaderHeading, hasStartActions, hasEndActions, closable, collapsible, hasMenuItems, hasActionBar, hasContentTop, heading, description } = this;
     const headerContentNode = this.renderHeaderContent();
-    const showHeaderContent = hasHeaderContent || !!headerContentNode || hasStartActions || hasEndActions || collapsible || closable || hasMenuItems || hasActionBar || hasContentTop;
+    const hasDefaultHeaderContent = !!heading || !!description || hasHeaderHeading || hasHeaderDescription;
+    const showHeaderContent = hasHeaderContent || hasDefaultHeaderContent || hasStartActions || hasEndActions || collapsible || closable || hasMenuItems || hasActionBar || hasContentTop;
     this.showHeaderContent = showHeaderContent;
     return html`<header class=${safeClassMap(CSS.header)} .hidden=${!(showHeaderContent || hasActionBar || hasContentTop)}><div class=${safeClassMap({ [CSS.headerContainer]: true, [CSS.headerContainerBorderEnd]: hasActionBar })} .hidden=${!showHeaderContent}>${this.renderHeaderStartActions()}${this.renderHeaderSlottedContent()}${headerContentNode}${this.renderHeaderActionsEnd()}</div>${this.renderActionBar()}${this.renderContentTop()}</header>`;
   }

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

@@ -122,7 +122,7 @@ export abstract class Popover extends LitElement {
    * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
-   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /**
@@ -143,7 +143,7 @@ export abstract class Popover extends LitElement {
    * Sets focus on the component's first focusable element.
    *
    * @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>;
   /**

package/dist/components/calcite-popover/customElement.js

@@ -2,13 +2,10 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
-import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
+import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { e as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, f as filterValidFlipPlacements, c as connectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { j as isPrimaryPointerButton, x as isKeyboardTriggeredClick, q as queryElementRoots } from "../../chunks/dom.js";
-import { t as toAriaBoolean } from "../../chunks/aria.js";
-import { g as guid } from "../../chunks/guid.js";
+import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { c as createObserver } from "../../chunks/observers.js";
@@ -17,100 +14,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-import { i as isActivationKey } from "../../chunks/key.js";
-const clickTolerance = 5;
-function isDrag({
-  startX,
-  startY,
-  endX,
-  endY
-}) {
-  const distance = Math.hypot(endX - startX, endY - startY);
-  return distance > clickTolerance;
-}
-class PopoverManager {
-  constructor() {
-    this.registeredElements = /* @__PURE__ */ new Map();
-    this.registeredElementCount = 0;
-    this.queryPopover = (composedPath) => {
-      const { registeredElements } = this;
-      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
-      return registeredElements.get(registeredElement);
-    };
-    this.togglePopovers = (event) => {
-      const composedPath = event.composedPath();
-      const togglePopover = this.queryPopover(composedPath);
-      if (togglePopover && !togglePopover.triggerDisabled) {
-        togglePopover.open = !togglePopover.open;
-      }
-      Array.from(this.registeredElements.values()).filter(
-        (popover) => popover !== togglePopover && popover.autoClose && popover.open && !composedPath.includes(popover)
-      ).forEach((popover) => popover.open = false);
-    };
-    this.keyDownHandler = (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (event.key === "Escape") {
-        this.closeAllPopovers();
-      } else if (isActivationKey(event.key)) {
-        this.togglePopovers(event);
-      }
-    };
-    this.pointerDownHandler = (event) => {
-      if (event.defaultPrevented || !isPrimaryPointerButton(event)) {
-        return;
-      }
-      const { clientX, clientY } = event;
-      this.pointerDownPosition = { x: clientX, y: clientY };
-    };
-    this.clickHandler = (event) => {
-      if (isKeyboardTriggeredClick(event) || event.defaultPrevented || this.pointerDownPosition && isDrag({
-        endY: event.clientY,
-        endX: event.clientX,
-        startY: this.pointerDownPosition.y,
-        startX: this.pointerDownPosition.x
-      })) {
-        return;
-      }
-      this.pointerDownPosition = void 0;
-      this.togglePopovers(event);
-    };
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  registerElement(referenceEl, popover) {
-    this.registeredElementCount++;
-    this.registeredElements.set(referenceEl, popover);
-    if (this.registeredElementCount === 1) {
-      this.addListeners();
-    }
-  }
-  unregisterElement(referenceEl) {
-    if (this.registeredElements.delete(referenceEl)) {
-      this.registeredElementCount--;
-    }
-    if (this.registeredElementCount === 0) {
-      this.removeListeners();
-    }
-  }
-  closeAllPopovers() {
-    Array.from(this.registeredElements.values()).forEach((popover) => popover.open = false);
-  }
-  addListeners() {
-    window.addEventListener("pointerdown", this.pointerDownHandler);
-    window.addEventListener("click", this.clickHandler);
-    window.addEventListener("keydown", this.keyDownHandler);
-  }
-  removeListeners() {
-    window.removeEventListener("pointerdown", this.pointerDownHandler);
-    window.removeEventListener("click", this.clickHandler);
-    window.removeEventListener("keydown", this.keyDownHandler);
-  }
-}
+import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container",
@@ -123,13 +27,13 @@ const CSS = {
   heading: "heading"
 };
 const defaultPopoverPlacement = "auto";
-const ARIA_CONTROLS = "aria-controls";
-const ARIA_EXPANDED = "aria-expanded";
-const styles = css`:host{display:contents}:host([top-layer-disabled]){--calcite-floating-ui-z-index: var(--calcite-z-index-popup)}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-popover-max-size-x, 100vw)}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}:host([scale=s]) .heading{padding:.5rem .75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host(:is([scale=s],[scale=m])){--calcite-internal-popover-close-spacing: var(--calcite-spacing-xs)}:host([scale=m]) .heading{padding:.75rem 1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]){--calcite-internal-popover-close-spacing: var(--calcite-spacing-sm)}:host([scale=l]) .heading{padding:1rem 1.25rem;font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-popover-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-popover-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-popover-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.header{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;border-block-end-color:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.heading{margin:0;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container{position:relative;display:flex;height:100%;flex-direction:row;flex-wrap:nowrap;border-radius:.25rem;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container.has-header{flex-direction:column}.content{display:flex;height:100%;width:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button{margin:auto;margin-inline-end:var(--calcite-internal-popover-close-spacing)}.close-button-container{display:flex;flex:0 0 auto}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}:host([hidden]){display:none}[hidden]{display:none}`;
-const manager = new PopoverManager();
+const styles = css`:host{display:contents}:host([top-layer-disabled]){--calcite-floating-ui-z-index: var(--calcite-z-index-popup)}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-popover-max-size-x, 100vw)}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}:host([scale=s]) .heading{padding:.5rem .75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host(:is([scale=s],[scale=m])){--calcite-internal-popover-close-spacing: var(--calcite-spacing-xs)}:host([scale=m]) .heading{padding:.75rem 1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]){--calcite-internal-popover-close-spacing: var(--calcite-spacing-sm)}:host([scale=l]) .heading{padding:1rem 1.25rem;font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;box-shadow:var(--calcite-shadow-md);background-color:var(--calcite-popover-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-popover-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-popover-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.header{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;border-block-end-color:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.heading{margin:0;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container{position:relative;display:flex;height:100%;flex-direction:row;flex-wrap:nowrap;border-radius:.25rem;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container.has-header{flex-direction:column}.content{display:flex;height:100%;width:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button{margin:auto;margin-inline-end:var(--calcite-internal-popover-close-spacing)}.close-button-container{display:flex;flex:0 0 auto}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}:host([hidden]){display:none}[hidden]{display:none}`;
+const manager = referenceElementManager({ click: true });
 class Popover extends LitElement {
   constructor() {
     super(...arguments);
+    this.referenceElementType = "click";
+    this.referenceElementController = useReferenceElement({ manager })(this);
     this.direction = useDirection();
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
@@ -144,8 +48,6 @@ class Popover extends LitElement {
         }
       }
     })(this);
-    this.guid = `calcite-popover-${guid()}`;
-    this.hasLoaded = false;
     this.mutationObserver = createObserver("mutation", () => this.focusTrap.updateContainerElements());
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
@@ -207,7 +109,6 @@ class Popover extends LitElement {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
-    requestAnimationFrame(() => this.setUpReferenceElement(this.hasLoaded));
   }
   willUpdate(changes) {
     if (changes.has("flipPlacements")) {
@@ -219,23 +120,18 @@ class Popover extends LitElement {
     if (changes.has("offsetDistance") && (this.hasUpdated || this.offsetDistance !== defaultOffsetDistance) || changes.has("offsetSkidding") && (this.hasUpdated || this.offsetSkidding !== 0) || changes.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") || changes.has("placement") && (this.hasUpdated || this.placement !== defaultPopoverPlacement)) {
       this.reposition(true);
     }
-    if (changes.has("referenceElement")) {
-      this.referenceElementHandler();
-      if (!this.referenceElement && this.open) {
-        this.topLayer.hide();
-      }
+    if (changes.has("referenceElement") && !this.referenceElement && this.open) {
+      this.topLayer.hide();
     }
   }
-  loaded() {
-    if (this.referenceElement && !this.referenceEl) {
-      this.setUpReferenceElement();
+  updated(changes) {
+    if (changes.has("referenceEl")) {
+      connectFloatingUI(this);
     }
-    this.hasLoaded = true;
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
-    this.removeReferences();
     disconnectFloatingUI(this);
   }
   flipPlacementsHandler() {
@@ -245,73 +141,14 @@ class Popover extends LitElement {
   openHandler() {
     toggleOpenClose(this);
     this.reposition(true);
-    this.setExpandedAttr();
-  }
-  referenceElementHandler() {
-    this.setUpReferenceElement();
-    this.reposition(true);
   }
   setFloatingEl(el) {
     this.floatingEl = el;
-    if (el) {
-      requestAnimationFrame(() => this.setUpReferenceElement());
-    }
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
     this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
   }
-  setUpReferenceElement(warn = true) {
-    this.removeReferences();
-    this.referenceEl = this.getReferenceElement();
-    connectFloatingUI(this);
-    const { el, referenceElement, referenceEl } = this;
-    if (warn && referenceElement && !referenceEl) {
-      console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
-        el
-      });
-    }
-    this.addReferences();
-  }
-  getId() {
-    return this.el.id || this.guid;
-  }
-  setExpandedAttr() {
-    const { referenceEl, open } = this;
-    if (!referenceEl) {
-      return;
-    }
-    if ("setAttribute" in referenceEl) {
-      referenceEl.setAttribute(ARIA_EXPANDED, toAriaBoolean(open));
-    }
-  }
-  addReferences() {
-    const { referenceEl } = this;
-    if (!referenceEl) {
-      return;
-    }
-    const id = this.getId();
-    if ("setAttribute" in referenceEl) {
-      referenceEl.setAttribute(ARIA_CONTROLS, id);
-    }
-    manager.registerElement(referenceEl, this.el);
-    this.setExpandedAttr();
-  }
-  removeReferences() {
-    const { referenceEl } = this;
-    if (!referenceEl) {
-      return;
-    }
-    if ("removeAttribute" in referenceEl) {
-      referenceEl.removeAttribute(ARIA_CONTROLS);
-      referenceEl.removeAttribute(ARIA_EXPANDED);
-    }
-    manager.unregisterElement(referenceEl);
-  }
-  getReferenceElement() {
-    const { referenceElement, el } = this;
-    return (typeof referenceElement === "string" ? queryElementRoots(el, { id: referenceElement }) : referenceElement) || null;
-  }
   hide() {
     this.open = false;
   }
@@ -353,7 +190,6 @@ class Popover extends LitElement {
     this.el.inert = hidden;
     this.el.ariaLabel = label;
     this.el.ariaLive = "polite";
-    setAttribute(this.el, "id", this.getId());
     this.el.role = "dialog";
     return html`<div class=${safeClassMap(CSS.positionContainer)} popover=manual ${ref(this.setFloatingEl)}><div class=${safeClassMap({
       [CSS.container]: true,

package/dist/components/calcite-radio-button/customElement.d.ts

@@ -44,6 +44,13 @@ export abstract class RadioButton extends LitElement {
    * @default "m"
    */
   accessor scale: Scale;
+  /**
+   * The component's current validation state.
+   *
+   * @internal
+   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   */
+  get validity(): ValidityState;
   /**
    * The component's value.
    *
@@ -54,9 +61,17 @@ export abstract class RadioButton 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>;
+  /**
+   * Sets the component's validity state.
+   *
+   * @param validity
+   * @param validationMessage
+   * @internal
+   */
+  setValidity(validity: ValidityStateFlags, validationMessage?: string): Promise<void>;
   /**
    * Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.
    * Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event

package/dist/components/calcite-radio-button/customElement.js

@@ -5,11 +5,11 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
   container: "container",
   radio: "radio"
@@ -20,6 +20,7 @@ class RadioButton extends LitElement {
     super();
     this.containerRef = createRef();
     this.direction = useDirection();
+    this.formSupport = useForm({ inputType: "radio" })(this);
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
@@ -38,7 +39,10 @@ class RadioButton extends LitElement {
     this.listen("keydown", this.handleKeyDown);
   }
   static {
-    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], focused: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hovered: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], value: 1 };
+    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], focused: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hovered: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+  }
+  static {
+    this.formAssociated = true;
   }
   static {
     this.styles = styles;
@@ -49,13 +53,15 @@ class RadioButton extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.containerRef.value, options);
   }
+  async setValidity(validity, validationMessage = "") {
+    this.elementInternals.setValidity(validity, validationMessage);
+  }
   connectedCallback() {
     this.rootNode = this.el.getRootNode();
     if (this.name) {
       this.checkLastRadioButton();
     }
     connectLabel(this);
-    connectForm(this);
     this.updateTabIndexOfOtherRadioButtonsInGroup();
     super.connectedCallback();
   }
@@ -78,7 +84,6 @@ class RadioButton extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
     this.updateTabIndexOfOtherRadioButtonsInGroup();
   }
   checkedChanged(newChecked) {
@@ -87,9 +92,6 @@ class RadioButton extends LitElement {
     }
     this.calciteInternalRadioButtonCheckedChange.emit();
   }
-  syncHiddenFormInput(input) {
-    input.type = "radio";
-  }
   selectItem(items, selectedIndex) {
     items[selectedIndex].click();
   }
@@ -111,7 +113,6 @@ class RadioButton extends LitElement {
     if (this.checked) {
       return;
     }
-    this.uncheckAllRadioButtonsInGroup();
     this.checked = true;
     this.calciteRadioButtonChange.emit();
   }
@@ -150,15 +151,6 @@ class RadioButton extends LitElement {
       });
     }
   }
-  uncheckAllRadioButtonsInGroup() {
-    const radioButtons = this.queryButtons();
-    radioButtons.forEach((radioButton) => {
-      if (radioButton.checked) {
-        radioButton.checked = false;
-        radioButton.focused = false;
-      }
-    });
-  }
   uncheckOtherRadioButtonsInGroup() {
     const radioButtons = this.queryButtons();
     const otherRadioButtons = radioButtons.filter((radioButton) => radioButton !== this.el);
@@ -258,7 +250,7 @@ class RadioButton extends LitElement {
   }
   render() {
     const tabIndex = this.getTabIndex();
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} role=radio tabindex=${tabIndex ?? nothing} ${ref(this.containerRef)}><div class=${safeClassMap(CSS.radio)}></div>${this.labelText && InternalLabel({ labelText: this.labelText, spacingInlineStart: true }) || ""}</div>${HiddenFormInputSlot({ component: this })}` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} role=radio tabindex=${tabIndex ?? nothing} ${ref(this.containerRef)}><div class=${safeClassMap(CSS.radio)}></div>${this.labelText && InternalLabel({ labelText: this.labelText, spacingInlineStart: true }) || ""}</div>` });
   }
 }
 customElement("calcite-radio-button", RadioButton);

package/dist/components/calcite-radio-button-group/customElement.d.ts

@@ -62,7 +62,7 @@ export abstract class RadioButtonGroup extends LitElement {
    * Sets focus on the fist focusable `calcite-radio-button` element in 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 has changed. */

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

@@ -1,6 +1,5 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { Scale, Status } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 
@@ -72,16 +71,16 @@ export abstract class Rating extends LitElement {
   /**
    * The component's current validation state.
    *
-   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   * @see [MDN - ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
    */
-  get validity(): MutableValidityState;
+  get validity(): ValidityState;
   /** The component's value. */
   accessor value: number;
   /**
    * 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 value changes. */