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

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

@@ -12,6 +12,8 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-panel-description-text-color] - Specifies the text color of the component's `description`.
  * @cssproperty [--calcite-panel-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-panel-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-panel-content-top-space] - Specifies the padding of the component's `content-top` slot.
+ * @cssproperty [--calcite-panel-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
  * @cssproperty [--calcite-panel-header-background-color] - Specifies the background color of the component's header.
  * @cssproperty [--calcite-panel-header-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
  * @cssproperty [--calcite-panel-header-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered.
@@ -19,13 +21,13 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-panel-header-action-text-color] - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
  * @cssproperty [--calcite-panel-header-action-text-color-press] - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered.
  * @cssproperty [--calcite-panel-footer-background-color] - Specifies the background color of the component's footer.
- * @cssproperty [--calcite-panel-space] - Specifies the padding of the component's `"unnamed (default)"` slot.
- * @cssproperty [--calcite-panel-header-content-space] - Specifies the padding of the `"header-content"` slot.
+ * @cssproperty [--calcite-panel-space] - Specifies the padding of the component's `unnamed (default)` slot.
+ * @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.

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, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } 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";
@@ -15,7 +15,7 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { s as styles$1 } from "../../chunks/header.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { C as CSS, S as SLOTS, I as ICONS, a as IDS } from "../../chunks/resources6.js";
-const styles = css`: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{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp))}slot[name=alerts]::slotted(calcite-alert){block-size:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-panel-default-space: var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus)}:host([scale=s]) .header-content .heading{font-size:var(--calcite-font-size--1)}:host([scale=s]) .header-content .description{font-size:var(--calcite-font-size--2)}:host([scale=s]) .header-content .icon{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-panel-default-space: var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus)}:host([scale=m]) .header-content .heading{font-size:var(--calcite-font-size-0)}:host([scale=m]) .header-content .description{font-size:var(--calcite-font-size--1)}:host([scale=m]) .header-content .icon{margin-inline-end:var(--calcite-spacing-md)}:host(:is([scale=s],[scale=m])){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xs);--calcite-internal-panel-default-space: var(--calcite-spacing-lg);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl)}:host([scale=l]) .header-content .heading{font-size:var(--calcite-font-size-1)}:host([scale=l]) .header-content .description{font-size:var(--calcite-font-size-0)}:host([scale=l]) .header-content .icon{margin-inline-end:var(--calcite-spacing-lg)}.content-top,.content-bottom{display:flex;align-items:flex-start;align-self:stretch;padding:var(--calcite-internal-panel-default-space);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));background-color:var(--calcite-panel-background-color, var(--calcite-color-foreground-1))}.container{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;overflow:hidden;background-color:var(--calcite-color-background);padding:0;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-2);transition:max-block-size var(--calcite-animation-timing),inline-size var(--calcite-animation-timing);box-sizing:border-box;font-size:var(--calcite-font-size--1)}.container *{box-sizing:border-box}.header{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3))}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:.75rem;padding-block:.875rem;margin-inline-end:auto;justify-content:center}.header-content .heading-text-content{flex:1 1 auto;overflow:hidden}.header-content .heading,.header-content .description{display:block;flex:none;overflow-wrap:break-word;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.header-content .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-panel-heading-text-color, var(--calcite-color-text-1))}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{color:var(--calcite-panel-description-text-color, var(--calcite-color-text-2))}#close,#collapse,calcite-action-menu{--calcite-action-background-color: var(--calcite-panel-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);--calcite-action-text-color: var(--calcite-panel-header-action-text-color);--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press)}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;margin:auto;gap:var(--calcite-internal-panel-action-spacing)}.header-actions--start{margin-inline-start:var(--calcite-internal-panel-action-spacing)}.header-actions--end{margin-inline-end:var(--calcite-internal-panel-action-spacing)}.content-wrapper{position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;color:var(--calcite-color-text-2);outline-color:transparent;padding:var(--calcite-panel-space, var(--calcite-panel-content-space, 0));background:var(--calcite-panel-background-color, var(--calcite-color-background))}.content-wrapper:focus-visible{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))))}.header-content{flex:1 1 auto;justify-content:center;padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-space)}.header-content.header--slotted-content{padding:var(--calcite-panel-header-content-space, var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space))}.header-content.header--non-slotted-content{align-items:center;flex-direction:row}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-footer-space, var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)));background-color:var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1))}.footer-content{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}.footer-start{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-space)}.footer-end{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-space)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:.5rem;inset-inline:0;inline-size:fit-content}calcite-icon{--calcite-icon-color: var(--calcite-panel-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-1)))}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`: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{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp))}slot[name=alerts]::slotted(calcite-alert){block-size:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-panel-default-space: var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus)}:host([scale=s]) .header-content .heading{font-size:var(--calcite-font-size--1)}:host([scale=s]) .header-content .description{font-size:var(--calcite-font-size--2)}:host([scale=s]) .header-content .icon{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-panel-default-space: var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus)}:host([scale=m]) .header-content .heading{font-size:var(--calcite-font-size-0)}:host([scale=m]) .header-content .description{font-size:var(--calcite-font-size--1)}:host([scale=m]) .header-content .icon{margin-inline-end:var(--calcite-spacing-md)}:host(:is([scale=s],[scale=m])){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xs);--calcite-internal-panel-default-space: var(--calcite-spacing-lg);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl)}:host([scale=l]) .header-content .heading{font-size:var(--calcite-font-size-1)}:host([scale=l]) .header-content .description{font-size:var(--calcite-font-size-0)}:host([scale=l]) .header-content .icon{margin-inline-end:var(--calcite-spacing-lg)}.content-top,.content-bottom{display:flex;align-items:flex-start;align-self:stretch;border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));background-color:var(--calcite-panel-background-color, var(--calcite-color-foreground-1))}.content-top{padding:var(--calcite-panel-content-top-space, var(--calcite-internal-panel-default-space))}.content-bottom{padding:var(--calcite-panel-content-bottom-space, var(--calcite-internal-panel-default-space))}.container{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;overflow:hidden;background-color:var(--calcite-color-background);padding:0;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-2);transition:max-block-size var(--calcite-animation-timing),inline-size var(--calcite-animation-timing);box-sizing:border-box;font-size:var(--calcite-font-size--1)}.container *{box-sizing:border-box}.header{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3))}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:.75rem;padding-block:.875rem;margin-inline-end:auto;justify-content:center}.header-content .heading-text-content{flex:1 1 auto;overflow:hidden}.header-content .heading,.header-content .description{display:block;flex:none;overflow-wrap:break-word;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.header-content .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-panel-heading-text-color, var(--calcite-color-text-1))}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{color:var(--calcite-panel-description-text-color, var(--calcite-color-text-2))}#close,#collapse,calcite-action-menu{--calcite-action-background-color: var(--calcite-panel-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);--calcite-action-text-color: var(--calcite-panel-header-action-text-color);--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press)}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;margin:auto;gap:var(--calcite-internal-panel-action-spacing)}.header-actions--start{margin-inline-start:var(--calcite-internal-panel-action-spacing)}.header-actions--end{margin-inline-end:var(--calcite-internal-panel-action-spacing)}.content-wrapper{position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;color:var(--calcite-color-text-2);outline-color:transparent;padding:var(--calcite-panel-space, var(--calcite-panel-content-space, 0));background:var(--calcite-panel-background-color, var(--calcite-color-background))}.content-wrapper:focus-visible{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))))}.header-content{flex:1 1 auto;justify-content:center;padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-space)}.header-content.header--slotted-content{padding:var(--calcite-panel-header-content-space, var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space))}.header-content.header--non-slotted-content{align-items:center;flex-direction:row}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-footer-space, var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)));background-color:var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1))}.footer-content{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}.footer-start{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-space)}.footer-end{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-space)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:.5rem;inset-inline:0;inline-size:fit-content}calcite-icon{--calcite-icon-color: var(--calcite-panel-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-1)))}:host([hidden]){display:none}[hidden]{display:none}`;
 class Panel extends LitElement {
   constructor() {
     super();

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

@@ -146,8 +146,12 @@ export abstract class Popover extends LitElement {
    * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
-  /** Updates the element(s) that are used within the focus-trap of the component. */
-  updateFocusTrapElements(): Promise<void>;
+  /**
+   * Updates the element(s) that are included in the component's focus-trap.
+   *
+   * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+   */
+  updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
   /** Fires when the component is requested to be closed and before the closing transition begins. */
   readonly calcitePopoverBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */

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

@@ -2,114 +2,18 @@
 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 { 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 { k as isPrimaryPointerButton, y 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 { useDirection } from "@arcgis/lumina/controllers";
+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";
-import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
+import { u as useReferenceElement, F as FloatingArrow, r as referenceElementManager } from "../../chunks/useReferenceElement.js";
 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);
-  }
-}
 const CSS = {
   positionContainer: "position-container",
   container: "container",
@@ -122,13 +26,14 @@ 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 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",
       focusTrapOptions: {
@@ -142,8 +47,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();
@@ -181,6 +84,7 @@ class Popover extends LitElement {
   async reposition(delayed = false) {
     const { referenceEl, placement, overlayPositioning, flipDisabled, filteredFlipPlacements, offsetDistance, offsetSkidding, arrowEl, floatingEl } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       overlayPositioning,
@@ -196,14 +100,14 @@ class Popover extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.el, options);
   }
-  async updateFocusTrapElements() {
+  async updateFocusTrapElements(extraContainers) {
+    this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
   }
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
-    requestAnimationFrame(() => this.setUpReferenceElement(this.hasLoaded));
   }
   willUpdate(changes) {
     if (changes.has("flipPlacements")) {
@@ -215,23 +119,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() {
@@ -241,73 +140,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;
   }
@@ -349,7 +189,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-progress/customElement.js

@@ -2,7 +2,7 @@
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 const styles = css`:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-z-index);inline-size:100%;overflow:hidden;background-color:var(--calcite-progress-background-color, var(--calcite-color-border-3))}.bar{z-index:var(--calcite-z-index);background-color:var(--calcite-progress-fill-color, var(--calcite-color-brand))}@media(forced-colors:active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-progress-text-color, var(--calcite-color-text-2))}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%,0,0)}50%{inline-size:40%}to{transform:translate3d(600%,0,0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%,0,0)}50%{inline-size:40%}to{transform:translate3d(-600%,0,0)}}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   track: "track",
@@ -12,6 +12,7 @@ const CSS = {
 class Progress extends LitElement {
   constructor() {
     super(...arguments);
+    this.direction = useDirection();
     this.reversed = false;
     this.type = "determinate";
     this.value = 0;
@@ -25,7 +26,7 @@ class Progress extends LitElement {
   render() {
     const isDeterminate = this.type === "determinate";
     const barStyles = isDeterminate ? { width: `${this.value}%` } : {};
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     return html`<div .ariaLabel=${this.label || this.text} .ariaValueMax=${isDeterminate ? "100" : void 0} .ariaValueMin=${isDeterminate ? "0" : void 0} .ariaValueNow=${isDeterminate ? this.value : void 0} role=progressbar><div class=${safeClassMap(CSS.track)}><div class=${safeClassMap({
       [CSS.bar]: true,
       indeterminate: this.type === "indeterminate",

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

@@ -3,8 +3,8 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 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 { g as getElementDir } from "../../chunks/dom.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";
@@ -19,6 +19,7 @@ class RadioButton extends LitElement {
   constructor() {
     super();
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
@@ -196,7 +197,6 @@ class RadioButton extends LitElement {
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
     const { key } = event;
-    const { el } = this;
     if (keys.indexOf(key) === -1) {
       return;
     }
@@ -206,7 +206,7 @@ class RadioButton extends LitElement {
       return;
     }
     let adjustedKey = key;
-    if (getElementDir(el) === "rtl") {
+    if (this.direction === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }

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

@@ -1,8 +1,8 @@
 /// <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";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 
 /**
  * @cssproperty [--calcite-rating-spacing] - Specifies the amount of left and right margin spacing between each item.

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

@@ -3,7 +3,6 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { html, css } from "lit";
 import { safeClassMap, LitElement, createEvent, stringOrBoolean, nothing, safeStyleMap } from "@arcgis/lumina";
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -11,6 +10,7 @@ import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.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 StarIcon = ({ full, scale, partial }) => html`<calcite-icon class=${safeClassMap(partial ? void 0 : "icon")} .icon=${full ? "star-f" : "star"} .scale=${scale}></calcite-icon>`;
 const CSS = {
   fieldSet: "fieldset",
@@ -31,6 +31,12 @@ class Rating extends LitElement {
   constructor() {
     super();
     this.emit = false;
+    this.formSupport = useForm({
+      inputType: "number",
+      getValue: () => {
+        return this.value === 0 ? "" : this.value;
+      }
+    })(this);
     this.guid = IDS.host(guid());
     this.isKeyboardInteraction = true;
     this.labelElements = [];
@@ -66,6 +72,9 @@ class Rating extends LitElement {
   static {
     this.properties = { hoverValue: [16, {}, { state: true }], average: [11, {}, { reflect: true, type: Number }], count: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], showChip: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -87,7 +96,6 @@ class Rating extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
   }
   async load() {
     this.requestUpdate("value");
@@ -122,7 +130,6 @@ class Rating extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
   }
   handleValueUpdate(newValue) {
     this.hoverValue = newValue;
@@ -233,7 +240,7 @@ class Rating extends LitElement {
         average,
         partial
       })} data-value=${value ?? nothing} for=${id ?? nothing} @click=${this.handleLabelClick} @focus=${this.handleLabelFocus} @keydown=${this.handleLabelKeyDown} @pointerdown=${this.handleLabelPointerDown} @pointerover=${this.handleLabelPointerOver} tabindex=${tabIndex ?? nothing}><input aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} .ariaRequired=${this.required} .checked=${checked} class=${safeClassMap(CSS.visuallyHidden)} .disabled=${this.disabled || this.readOnly} id=${id ?? nothing} name=${this.guid ?? nothing} @change=${this.handleInputChange} tabindex=-1 type=radio .value=${live(value ?? "")}>${StarIcon({ full: selected || average || hovered, scale: this.scale })}${partial && html`<div class=${safeClassMap(CSS.fraction)} style=${safeStyleMap({ width: `${fraction * 100}%` })}>${StarIcon({ full: true, partial: true, scale: this.scale })}</div>` || ""}<span class=${safeClassMap(CSS.visuallyHidden)}>${this.messages.stars.replace("{num}", `${value}`)}</span></label>`;
-    })}${(this.count || this.average) && this.showChip ? html`<calcite-chip .label=${countString} .scale=${this.scale} .value=${countString}>${!!this.average && html`<span class=${safeClassMap(CSS.numberAverage)}>${this.average.toString()}</span>` || ""}${!!this.count && html`<span class=${safeClassMap(CSS.numberCount)}>(${countString})</span>` || ""}</calcite-chip>` : null}</fieldset>${HiddenFormInputSlot({ component: this })}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}</span>` });
+    })}${(this.count || this.average) && this.showChip ? html`<calcite-chip .label=${countString} .scale=${this.scale} .value=${countString}>${!!this.average && html`<span class=${safeClassMap(CSS.numberAverage)}>${this.average.toString()}</span>` || ""}${!!this.count && html`<span class=${safeClassMap(CSS.numberCount)}>(${countString})</span>` || ""}</calcite-chip>` : null}</fieldset>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}</span>` });
   }
 }
 customElement("calcite-rating", Rating);

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

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { n as slotChangeHasContent } from "../../chunks/dom.js";
+import { m as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {
   scrim: "scrim",

package/dist/components/calcite-segmented-control/customElement.js

@@ -2,14 +2,15 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
-import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.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 = {
   itemWrapper: "item-wrapper"
 };
@@ -20,6 +21,8 @@ const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;use
 class SegmentedControl extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
+    this.formSupport = useForm({ inputType: "text" })(this);
     this.items = [];
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
@@ -53,6 +56,9 @@ class SegmentedControl extends LitElement {
   static {
     this.properties = { appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], labelText: 1, messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedItem: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1, width: [3, {}, { reflect: true }] };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -62,7 +68,6 @@ class SegmentedControl extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
   }
   willUpdate(changes) {
     if (changes.has("appearance") && (this.hasUpdated || this.appearance !== "solid") || changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal") || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
@@ -76,12 +81,11 @@ class SegmentedControl extends LitElement {
     }
   }
   loaded() {
-    afterConnectDefaultValueSet(this, this.value);
+    this.formSupport.overrideDefaultValue(this.value);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
   }
   valueHandler(value) {
     const { items } = this;
@@ -119,12 +123,12 @@ class SegmentedControl extends LitElement {
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
     const { key } = event;
-    const { el, selectedItem } = this;
+    const { selectedItem } = this;
     if (keys.indexOf(key) === -1) {
       return;
     }
     let adjustedKey = key;
-    if (getElementDir(el) === "rtl") {
+    if (this.direction === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }
@@ -216,7 +220,7 @@ class SegmentedControl extends LitElement {
   }
   render() {
     this.el.role = "radiogroup";
-    return html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-errormessage=${IDS.validationMessage} aria-label=${getLabelText(this) ?? nothing} .ariaInvalid=${this.status === "invalid"} .ariaRequired=${this.required} class=${safeClassMap(CSS.itemWrapper)}>${this.interactiveContainer({ disabled: this.disabled, children: html`<slot @slotchange=${this.handleDefaultSlotChange}></slot>${HiddenFormInputSlot({ component: this })}` })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}`;
+    return html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-errormessage=${IDS.validationMessage} aria-label=${getLabelText(this) ?? nothing} .ariaInvalid=${this.status === "invalid"} .ariaRequired=${this.required} class=${safeClassMap(CSS.itemWrapper)}>${this.interactiveContainer({ disabled: this.disabled, children: html`<slot @slotchange=${this.handleDefaultSlotChange}></slot>` })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}`;
   }
 }
 customElement("calcite-segmented-control", SegmentedControl);