@esri/calcite-components 5.2.0-next.85 → 5.2.0-next.87

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

@@ -10,7 +10,7 @@ import { s as slotChangeHasAssignedElement, p as getFirstTabbable } from "../../
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { s as styles$1 } from "../../chunks/sortable.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { l as listSelector, g as getDepth, a as getListItemChildren } from "../../chunks/utils4.js";
 import { a as activeCellTestAttribute, I as ICONS, b as CSS, S as SLOTS } from "../../chunks/resources34.js";
@@ -27,7 +27,7 @@ class ListItem extends LitElement {
     this.direction = useDirection();
     this.handleGridRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.hasActionsEnd = false;
     this.hasActionsStart = false;

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

@@ -5,7 +5,7 @@ import { LitElement } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
 import { e as focusElementInGroup, b as slotChangeGetAssignedElements, f as focusElement } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { i as isMenuItem } from "../../chunks/resources20.js";
 const styles = css`:host{display:flex;line-height:var(--calcite-font-line-height-fixed-lg)}ul{margin:0;display:inline-flex;block-size:100%;align-items:center;padding:0}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}`;
 class Menu extends LitElement {
@@ -14,7 +14,7 @@ class Menu extends LitElement {
     this.attributeWatch = useWatchAttributes(["role"], this.handleGlobalAttributesChanged);
     this.menuItems = [];
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.layout = "horizontal";
     this.scale = "m";
     this.listen("keydown", this.calciteInternalNavMenuItemKeyEvent);

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

@@ -8,7 +8,7 @@ import { useDirection } from "@arcgis/lumina/controllers";
 import { b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { C as CSS, I as ICONS, S as SLOTS } from "../../chunks/resources20.js";
 const styles = css`:host{--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: 0;--calcite-internal-menu-item-content-min-block-size: var(--calcite-size-xl);--calcite-internal-menu-item-dropdown-action-block-size: auto;--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-spacing-xxs);--calcite-internal-menu-item-dropdown-action-flex: initial;--calcite-internal-menu-item-font-size: var(--calcite-font-size-relative-md);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-md);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-md);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg);--calcite-internal-menu-item-border: 1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([layout=vertical]){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: auto;--calcite-internal-menu-item-padding-block: var(--calcite-space-md);--calcite-internal-menu-item-padding-inline: var(--calcite-space-md);inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.item-content{background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-color-foreground-1)))}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;text-decoration:none;padding-block-start:var(--calcite-space-base);border-block-end:var(--calcite-space-base) solid var(--calcite-color-transparent);font-size:var(--calcite-internal-menu-item-font-size);line-height:var(--calcite-internal-menu-item-line-height, inherit);padding-inline:var(--calcite-internal-menu-item-padding-inline);background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-color-foreground-1)));color:var(--calcite-menu-text-color, var(--calcite-internal-menu-text-color, var(--calcite-color-text-2)))}.content:hover{--calcite-internal-menu-background-color: var(--calcite-color-foreground-2)}.content:focus{border-block-end-width:4px;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))));padding-block-start:var(--calcite-space-2xs);border-block-end-width:var(--calcite-space-2xs)}.content:active{--calcite-internal-menu-background-color: var(--calcite-color-foreground-3);--calcite-internal-menu-text-color: var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:var(--calcite-internal-menu-item-padding-block);border-block-end:0;border-inline-end:var(--calcite-space-2xs) solid var(--calcite-color-transparent)}:host([scale=s]){--calcite-internal-menu-item-content-min-block-size: 2.25rem;--calcite-internal-menu-item-font-size: var(--calcite-font-size);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-sm);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-sm);--calcite-internal-menu-item-line-height: var(--calcite-space-lg);--calcite-internal-menu-item-padding-inline: var(--calcite-space-sm);min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([scale=s]:not([layout=vertical])){--calcite-internal-menu-item-dropdown-action-block-size: var(--calcite-space-2xl);--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-base);--calcite-internal-menu-item-dropdown-action-flex: 0 0 1.75rem}:host([scale=s]:not([layout=vertical])) .icon--dropdown{padding-inline-start:var(--calcite-space-xs)}:host([scale=s]:not([layout=vertical])) .dropdown-action{padding-block:0;padding-inline:0;padding-inline-start:var(--calcite-space-2xs)}:host([scale=s][layout=vertical]){--calcite-internal-menu-item-padding-block: var(--calcite-space-sm);--calcite-internal-menu-item-padding-inline: var(--calcite-space-sm)}:host([scale=s][layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:var(--calcite-space-sm);padding-inline-start:var(--calcite-space-xs)}:host([breadcrumb][scale=s]){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: var(--calcite-space-xs)}:host([breadcrumb][scale=s]:not([layout=vertical])) .content{padding-inline-end:var(--calcite-space-sm)}:host(.is-child[scale=s][layout=vertical]) .parent--vertical{block-size:2.25rem}:host(.is-child[scale=s][layout=vertical]) .content{--calcite-internal-menu-item-content-min-block-size: 2.25rem}:host([scale=s][layout=vertical]):has(.dropdown-action){--calcite-internal-menu-item-dropdown-action-block-size: 2.25rem;--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-sm);--calcite-internal-menu-item-dropdown-action-flex: 0 0 var(--calcite-size-md)}:host([scale=s][layout=vertical]):has(.dropdown-action) .dropdown-action{align-items:center;box-sizing:border-box;padding-inline:var(--calcite-space-2xs)}:host([scale=s]) .dropdown-action,:host([scale=l]:not([layout=vertical])) .dropdown-action{margin-inline:0;margin-inline-start:var(--calcite-space-px)}:host([scale=s]) .dropdown-action:after,:host([scale=l]:not([layout=vertical])) .dropdown-action:after{inset-inline-start:calc(-1 * var(--calcite-space-px))}:host([scale=s][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-2xs)}:host([scale=m][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-sm)}:host([scale=l]){--calcite-internal-menu-item-content-min-block-size: var(--calcite-size-2xl);--calcite-internal-menu-item-font-size: var(--calcite-font-size-lg);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-lg);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-lg);--calcite-internal-menu-item-line-height: var(--calcite-space-2xl);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg);min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([scale=l]:not([layout=vertical])){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: var(--calcite-space-sm-plus)}:host([scale=l]:not([layout=vertical])) .container,:host([scale=l]:not([layout=vertical])) .item-content,:host([scale=l]:not([layout=vertical])) .content{min-block-size:var(--calcite-size-2xl)}:host([scale=l]:not([layout=vertical])) .icon--dropdown{margin-inline-start:var(--calcite-space-sm-plus);padding-inline-start:0}:host([scale=l]:not([layout=vertical])) .dropdown-action{margin-inline-start:var(--calcite-space-xs)}:host([scale=l]:not([layout=vertical])) .dropdown-action:after{inset-inline-start:calc(-1 * var(--calcite-space-xs))}:host([scale=l][layout=vertical]){--calcite-internal-menu-item-padding-block: var(--calcite-space-lg);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg)}:host([scale=l][layout=vertical]) .content:has(.icon--end):has(.icon--dropdown) .icon--end~.icon--dropdown{margin-inline-start:var(--calcite-space-lg);padding-inline-start:var(--calcite-space-sm-plus)}:host([scale=l][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-md)}:host([scale=l][layout=vertical]) .dropdown-action{margin-inline-end:0;padding-inline:var(--calcite-space-xs)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action){--calcite-internal-menu-item-dropdown-action-block-size: var(--calcite-size-lg);--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-xs);--calcite-internal-menu-item-dropdown-action-flex: 0 0 3.125rem}:host([scale=l]:not([layout=vertical])):has(.dropdown-action) .content{padding-inline-end:var(--calcite-space-xl)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action) .dropdown-action{box-sizing:border-box;padding-inline-start:var(--calcite-space-xs)}:host([scale=l][layout=vertical]):is([slot=submenu-item],.is-child) .parent--vertical{padding-inline-start:var(--calcite-size-md)}:host([active]) .content{--calcite-internal-menu-text-color: var(--calcite-color-text-1);border-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([active]) .icon{--calcite-internal-menu-item-icon-color: var( --calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-brand)) )}:host([active][scale=l][layout=vertical]) .content{border-inline-end-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host(.is-child[layout=vertical]) .parent--vertical{box-sizing:border-box;padding-inline-start:var(--calcite-space-xl)}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}:host([layout=vertical]) .text-container{flex:1}:host([scale=m][layout=vertical]) .text-container{flex:0 1 auto}.icon{color:var(--calcite-menu-text-color, var(--calcite-icon-color, var(--calcite-internal-menu-item-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)))))}.icon--start{margin-inline-end:var(--calcite-internal-menu-item-icon-spacing-start)}.icon--end{margin-inline-start:var(--calcite-internal-menu-item-icon-spacing-end)}:host([layout=vertical]) .icon--end{padding-inline-start:0;--calcite-internal-menu-item-icon-spacing-end: auto}:host([layout=vertical][scale=m]) .icon--end{padding-inline-start:.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-sm)}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:.75rem}.icon--breadcrumb{margin-inline-start:var(--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start);padding-inline-start:0;margin-inline-end:0px}:host([scale=m]) .icon--breadcrumb{padding-inline-start:.5rem}:host([breadcrumb][scale=l][layout=vertical]) .icon--breadcrumb{margin-inline-start:var(--calcite-space-sm-plus)}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:.5rem}:host([breadcrumb]) .content{padding-inline-end:.75rem}.dropdown-action{position:relative;align-self:center;--calcite-action-background-color: var(--calcite-menu-background-color);--calcite-action-text-color: var(--calcite-menu-text-color);block-size:var(--calcite-internal-menu-item-dropdown-action-block-size);flex:var(--calcite-internal-menu-item-dropdown-action-flex);margin-inline-start:var(--calcite-spacing-xxs)}.dropdown-action:after{position:absolute;display:block;inline-size:1px;content:"";inset-inline-start:calc(-1 * var(--calcite-spacing-xxs));inset-block:var(--calcite-internal-menu-item-dropdown-action-divider-inset-block);background-color:var(--calcite-color-border-3)}.dropdown-action:active{--calcite-action-background-color-press: var(--calcite-menu-background-color)}:host([layout=vertical]) .dropdown-action{margin-inline-end:var(--calcite-spacing-xxs)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;box-shadow:var(--calcite-shadow-md);border:var(--calcite-internal-menu-item-border);border-radius:var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translate(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items{border:none}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items:after{content:"";border-block-start:var(--calcite-internal-menu-item-border);position:absolute;inset-block-start:0;inset-inline:var(--calcite-space-md) 0}.dropdown-menu-items.nested.calcite--rtl{transform:translate(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}`;
 class MenuItem extends LitElement {
@@ -19,7 +19,7 @@ class MenuItem extends LitElement {
     this.dropdownActionRef = createRef();
     this.isFocused = false;
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.hasSubmenu = false;
     this.active = false;
     this.breadcrumb = false;
@@ -27,7 +27,6 @@ class MenuItem extends LitElement {
     this.open = false;
     this.scale = "m";
     this.calciteMenuItemSelect = createEvent();
-    this.listenOn(window, "click", this.handleClickOut);
     this.listen("focusout", this.handleFocusOut);
     this.listen("blur", this.blurHandler);
     this.listen("focus", this.focusHandler);
@@ -41,6 +40,9 @@ class MenuItem extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.anchorRef.value, options);
   }
+  load() {
+    this.listenOn(document, "click", this.handleClickOut);
+  }
   handleClickOut(event) {
     if (this.topLevelMenuLayout !== "vertical" && this.hasSubmenu && this.open && !event.composedPath().includes(this.el)) {
       this.open = false;

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

@@ -6,7 +6,7 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { i as isNavigationLogo } from "../../chunks/resources21.js";
 import { i as isNavigationUser } from "../../chunks/resources22.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { i as isTag } from "../../chunks/resources3.js";
 const CSS = {
@@ -38,7 +38,7 @@ class Navigation extends LitElement {
   constructor() {
     super(...arguments);
     this.navigationActionRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.mutationObserver = createObserver("mutation", () => {
       this.updateNavigationLogo();
       this.updateNavigationUser();

package/dist/components/calcite-navigation-logo/customElement.js

@@ -4,13 +4,13 @@ import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
 import { H as Heading } from "../../chunks/Heading.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { C as CSS } from "../../chunks/resources21.js";
 const styles = css`:host{display:inline-flex}:host([scale=s]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-md);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-1);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-lg);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=m]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-lg);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=l]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-xl);--calcite-internal-navigation-logo-image-size: 2.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-2xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-lg);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-2xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-2xl)}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent)}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{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))))}.image{block-size:var(--calcite-internal-navigation-logo-image-size)}.image,.icon{margin:0;display:flex;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, var(--calcite-ui-icon-color, inherit))));padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1));font-size:var(--calcite-internal-navigation-logo-heading-font-size);padding-block-start:var(--calcite-space-2xs);line-height:var(--calcite-internal-navigation-logo-heading-line-height)}.standalone{font-size:var(--calcite-internal-navigation-logo-heading-standalone-font-size);padding-block-start:0}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-internal-navigation-logo-description-font-size);line-height:var(--calcite-internal-navigation-logo-description-line-height)}:host([hidden]){display:none}[hidden]{display:none}`;
 class NavigationLogo extends LitElement {
   constructor() {
     super(...arguments);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.active = false;
     this.iconFlipRtl = false;
     this.scale = "m";

package/dist/components/calcite-navigation-user/customElement.js

@@ -3,13 +3,13 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { C as CSS } from "../../chunks/resources22.js";
 const styles = css`:host([scale=s]){--calcite-internal-navigation-user-padding-inline: var(--calcite-space-md);--calcite-internal-navigation-user-full-name-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-user-username-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-navigation-user-full-name-line-height: var(--calcite-space-lg);--calcite-internal-navigation-user-username-line-height: var(--calcite-space-lg)}:host([scale=m]){--calcite-internal-navigation-user-padding-inline: var(--calcite-space-lg);--calcite-internal-navigation-user-full-name-font-size: var(--calcite-font-size-relative-md);--calcite-internal-navigation-user-username-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-user-full-name-line-height: var(--calcite-space-xl);--calcite-internal-navigation-user-username-line-height: var(--calcite-space-lg)}:host([scale=l]){--calcite-internal-navigation-user-padding-inline: var(--calcite-space-xl);--calcite-internal-navigation-user-full-name-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-user-username-font-size: var(--calcite-font-size-relative-lg);--calcite-internal-navigation-user-full-name-line-height: var(--calcite-space-2xl);--calcite-internal-navigation-user-username-line-height: var(--calcite-space-2xl)}:host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{margin:0;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);outline-color:transparent;font-family:inherit;border:none;padding-inline:0;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent)));border-block-end:2px solid var(--calcite-color-transparent)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;text-align:start;padding-inline:var(--calcite-internal-navigation-user-padding-inline)}calcite-avatar{--calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius);--calcite-avatar-color: var(--calcite-navigation-user-avatar-color);padding-inline:var(--calcite-internal-navigation-user-padding-inline)}calcite-avatar~.text-container{padding-inline-start:0px}.full-name{margin-inline-start:0px;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1));font-size:var(--calcite-internal-navigation-user-full-name-font-size);padding-block-start:var(--calcite-space-2xs);line-height:var(--calcite-internal-navigation-user-full-name-line-height)}.standalone{padding-block-start:0}.username{font-size:var(--calcite-internal-navigation-user-username-font-size);color:var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2));line-height:var(--calcite-internal-navigation-user-username-line-height)}:host(:hover) .button,:host(:focus) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-2)}:host(:focus) .button{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))))}:host(:active) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-3)}:host([active]) .button{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
 class NavigationUser extends LitElement {
   constructor() {
     super(...arguments);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.active = false;
     this.textDisabled = false;
     this.scale = "m";

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

@@ -8,7 +8,7 @@ import { K as KindIcons, a as KindIconsFilled } from "../../chunks/resources3.js
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 const SLOTS = {
   title: "title",
   message: "message",
@@ -30,7 +30,7 @@ class Notice extends LitElement {
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.hasActionEnd = false;
     this.appearance = "outline-fill";
     this.closable = false;

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

@@ -8,7 +8,7 @@ import { c as createObserver } from "../../chunks/observers.js";
 import { b as breakpoints } from "../../chunks/responsive.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 const CSS = {
   list: "list",
   listItem: "list-item",
@@ -41,7 +41,7 @@ class Pagination extends LitElement {
     this.resizeHandler = ({ contentRect: { width } }) => this.setMaxItemsToBreakpoint(width);
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.isXXSmall = false;
     this.lastStartItem = 1;
     this.maxItems = maxItemBreakpoints.xxsmall;

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

@@ -12,7 +12,7 @@ import { H as Heading } from "../../chunks/Heading.js";
 import { d as defaultEndMenuPlacement } from "../../chunks/floating-ui.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isActionBar } from "../../chunks/resources12.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { s as styles$1 } from "../../chunks/header.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
@@ -26,7 +26,7 @@ class Panel extends LitElement {
     this.resizeObserver = createObserver("resize", () => this.resizeHandler());
     this.messages = useT9n();
     this._closed = false;
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.focusTrapController = useFocusTrap({
       focusTrapOptions: {
         allowOutsideClick: true,

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

@@ -12,7 +12,7 @@ import { c as createObserver } from "../../chunks/observers.js";
 import { F as FloatingArrow } from "../../chunks/FloatingArrow.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 useFocusable } from "../../chunks/useFocusable.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const CSS = {
@@ -52,7 +52,7 @@ class Popover extends LitElement {
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.topLayer = useTopLayer({
       disabledOverride: () => this.open && !this.referenceEl,
       target: () => this.floatingEl

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

@@ -8,7 +8,7 @@ import { g as getRoundRobinIndex } from "../../chunks/array.js";
 import { g as getLabelText } from "../../chunks/label.js";
 import { u as useLabel } from "../../chunks/useLabel.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
@@ -22,7 +22,7 @@ class RadioButton extends LitElement {
     this.containerRef = createRef();
     this.direction = useDirection();
     this.formSupport = useForm({ inputType: "radio" })(this);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
     this.disabled = false;

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

@@ -6,7 +6,7 @@ import { c as createObserver } from "../../chunks/observers.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 useFocusable } from "../../chunks/useFocusable.js";
 import { c as clearValidationMessage, d as displayValidationMessage } from "../../chunks/useForm.js";
 const CSS = {
   itemWrapper: "item-wrapper"
@@ -20,7 +20,7 @@ class RadioButtonGroup extends LitElement {
     super();
     this.messages = useT9n();
     this.mutationObserver = createObserver("mutation", () => this.passPropsToRadioButtons());
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this._disabled = false;
     this.disabledWasSet = false;
     this.radioButtons = [];

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

@@ -9,7 +9,7 @@ import { u as useLabel } from "../../chunks/useLabel.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 useFocusable } from "../../chunks/useFocusable.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>`;
@@ -44,7 +44,7 @@ class Rating extends LitElement {
     this.max = 5;
     this._value = 0;
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.readOnly = false;

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

@@ -10,7 +10,7 @@ import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { i as isSegmentedControlItem } from "../../chunks/resources23.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
@@ -27,7 +27,7 @@ class SegmentedControl extends LitElement {
     this.formSupport = useForm({ inputType: "text" })(this);
     this.items = [];
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.appearance = "solid";
     this.disabled = false;

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

@@ -11,7 +11,7 @@ import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { i as isTag } from "../../chunks/resources3.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 import { C as CSS, I as IDS } from "../../chunks/resources18.js";
@@ -26,7 +26,7 @@ class Select extends LitElement {
     this.mutationObserver = createObserver("mutation", () => this.populateInternalSelect());
     this.selectRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.required = false;

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

@@ -14,7 +14,7 @@ import { a as ariaValueFromSize } from "../../chunks/aria.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { I as ICONS, a as IDS, C as CSS } from "../../chunks/resources24.js";
 const styles = css`:host{position:absolute;inset:0;display:flex;visibility:hidden!important;--calcite-sheet-scrim-background-internal: rgba(0, 0, 0, .85);--calcite-scrim-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}:host([embedded]){z-index:var(--calcite-z-index-overlay)}.calcite--rtl{--calcite-scrim-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{visibility:hidden;position:fixed;box-sizing:border-box;display:flex;opacity:0;color:var(--calcite-sheet-text-color, var(--calcite-color-text-2));transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) ease-in-out}:host([top-layer-disabled]) .container,:host([embedded]) .container{z-index:var(--calcite-z-index-overlay)}:host([modal-disabled]),:host([modal-disabled]) .container{pointer-events:none}:host([position=inline-start]) .container{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal: translate3d(-1rem, 0, 0)}:host([position=inline-end]) .container{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal: translate3d(1rem, 0, 0)}:host([position=block-start]) .container{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, -1rem, 0)}:host([position=block-end]) .container{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0)}:host([display-mode=float]) .content{box-shadow:var(--calcite-sheet-shadow, var(--calcite-shadow-sm))}:host([display-mode=overlay][position=inline-start]) .content{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}:host([display-mode=overlay][position=inline-end]) .content{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}:host([display-mode=overlay][position=block-start]) .content{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}:host([display-mode=overlay][position=block-end]) .content{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}:host([position^=inline]) .content{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}:host([position^=block]) .content{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}:host([position^=inline]) .width-s{--calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px)}:host([position^=inline]) .width-m{--calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px)}:host([position^=inline]) .width-l{--calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px)}:host([position^=block]) .height-s{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh)}:host([position^=block]) .height-m{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh)}:host([position^=block]) .height-l{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh)}.scrim{--calcite-scrim-background: var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0;display:flex;overflow:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}[popover]{padding:0;margin:0;border:none;background-color:transparent;position:fixed;display:flex;inline-size:100%;block-size:100%}[popover]:popover-open{display:flex}:host([opened]){visibility:visible!important}.content{position:relative;box-sizing:border-box;display:flex;max-inline-size:100%;padding:0;background-color:var(--calcite-sheet-background-color, var(--calcite-color-foreground-1));max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) ease-in-out,visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) ease-in-out;transform:var(--calcite-sheet-hidden-position-internal)}:host([top-layer-disabled]),:host([top-layer-disabled]) .content,:host([embedded]) .content{z-index:var(--calcite-z-index-modal)}.content-container{position:relative;display:flex;max-block-size:100%;max-inline-size:100%;flex:1 1 0%;overflow:hidden}.content-container ::slotted(*){block-size:auto}.container--open .content{transform:translateZ(0)}:host([display-mode=float]) .content,:host([display-mode=float]) .container,:host([display-mode=float]) .content-container{border-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([display-mode=float]) .container{padding:var(--calcite-spacing-md)}.container--open{visibility:visible;opacity:1;transition-delay:0ms}.container--open .content{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) ease-in-out,visibility 0ms linear,opacity var(--calcite-internal-animation-timing-medium) ease-in-out,max-inline-size var(--calcite-internal-animation-timing-medium) ease-in-out,max-block-size var(--calcite-internal-animation-timing-medium) ease-in-out;transition-delay:0ms}@starting-style{.container--open{opacity:0;visibility:hidden}}:host([position=inline-start]) .content,:host([position=inline-end]) .content{block-size:100%}:host([position=inline-start]) .content{flex-direction:row}:host([position=inline-end]) .content{flex-direction:row-reverse}:host([position=block-start]) .content,:host([position=block-end]) .content{inline-size:100%}:host([position=block-start]) .content{flex-direction:column}:host([position=block-end]) .content{flex-direction:column-reverse}:host([resizable][position=inline-start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=inline-end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.resize-handle{position:absolute;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;--calcite-internal-sheet-resize-handle-offset: calc( (var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1 );z-index:var(--calcite-z-index-header)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-foreground-3))}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline-color:transparent;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}:host([position=inline-start]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-start]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-start]):host([display-mode=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position=inline-end]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-end]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-start]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-start]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-start]):host([display-mode=float]) .resize-handle-bar{border-end-end-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-end]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-end]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position]) .container--embedded{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}:host([position]) .container--embedded calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}`;
@@ -45,7 +45,7 @@ class Sheet extends LitElement {
     this.openProp = "opened";
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.keyDownHandler = (event) => {
       const { defaultPrevented, key } = event;
       if (!defaultPrevented && !this.escapeDisabled && this.open && key === "Escape") {

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

@@ -15,7 +15,7 @@ import { u as useLabel } from "../../chunks/useLabel.js";
 import { n as numberStringFormatter, B as BigDecimal } from "../../chunks/locale.js";
 import { d as decimalPlaces, c as clamp } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 import { isEqual } from "es-toolkit";
@@ -149,7 +149,7 @@ class Slider extends LitElement {
       this.dragEnd(event);
     };
     this.trackRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this._value = defaultValue;
     this.activeProp = "value";

package/dist/components/calcite-sort-handle/customElement.js

@@ -6,7 +6,7 @@ import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { a as defaultMenuPlacement } from "../../chunks/floating-ui.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   handle: "handle",
@@ -34,7 +34,7 @@ const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;use
 class SortHandle extends LitElement {
   constructor() {
     super(...arguments);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.messages = useT9n({ blocking: true });

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",
@@ -22,7 +22,7 @@ const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;use
 class SplitButton extends LitElement {
   constructor() {
     super(...arguments);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.active = false;
     this.appearance = "solid";

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

@@ -6,7 +6,7 @@ import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lum
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isHidden } from "../../chunks/component.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { r as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { C as CSS, I as ICONS } from "../../chunks/resources26.js";
@@ -19,7 +19,7 @@ class StepperItem extends LitElement {
     this.itemPosition = 0;
     this.selectedPosition = 0;
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.stepperItemHasContent = false;
     this.complete = false;

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

@@ -6,7 +6,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import Color from "color";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { h as hexify } from "../../chunks/utils3.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { S as SLOTS, C as CSS, I as IDS, a as CHECKER_DIMENSIONS } from "../../chunks/resources27.js";
@@ -16,7 +16,7 @@ class Swatch extends LitElement {
   constructor() {
     super();
     this.containerRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.hasImage = false;
     this.disabled = false;

package/dist/components/calcite-swatch-group/customElement.js

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { e as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { i as isSwatch } from "../../chunks/resources27.js";
 const CSS = {
@@ -16,7 +16,7 @@ class SwatchGroup extends LitElement {
     super();
     this.items = [];
     this.slotRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.scale = "m";

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

@@ -7,7 +7,7 @@ import { i as isActivationKey } from "../../chunks/key.js";
 import { g as getLabelText } from "../../chunks/label.js";
 import { u as useLabel } from "../../chunks/useLabel.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
@@ -23,7 +23,7 @@ class Switch extends LitElement {
       inputType: "checkbox"
     })(this);
     this.switchRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
     this.disabled = false;

package/dist/components/calcite-table-cell/customElement.js

@@ -5,7 +5,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { C as CSS } from "../../chunks/resources29.js";
 import { s as styles$1 } from "../../chunks/screen-reader.js";
@@ -16,7 +16,7 @@ class TableCell extends LitElement {
     this.containerRef = createRef();
     this.direction = useDirection();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.contentsText = "";
     this.focused = false;

package/dist/components/calcite-table-header/customElement.js

@@ -5,7 +5,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { C as CSS, I as ICONS } from "../../chunks/resources30.js";
 import { s as styles$1 } from "../../chunks/screen-reader.js";
 const styles = css`:host{display:contents}:host([alignment=center]) th{text-align:center}:host([alignment=end]) th{text-align:end}th{text-align:start;font-weight:var(--calcite-font-weight-medium);vertical-align:top;white-space:normal;border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding-block:calc(var(--calcite-internal-table-cell-padding) * 1.5);padding-inline:var(--calcite-internal-table-cell-padding);background-color:var(--calcite-table-header-background-color, var(--calcite-table-header-background, var(--calcite-color-foreground-2)));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th:not(.static-cell){outline-color:transparent}th:not(.static-cell):not(.static-cell):focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}th:not(.body-row):not(.footer-row){border-block-end-width:var(--calcite-internal-table-header-border-block-end-width, var(--calcite-border-width-sm));box-shadow:var(--calcite-internal-table-sticky-header-border-shadow, 0 0 0 0 transparent)}th:not(.center):not(.end).content-cell{vertical-align:top}th.center{vertical-align:middle}th.end.content-cell{vertical-align:bottom}th.body-row,th.footer-row{padding-block:var(--calcite-internal-table-cell-padding);border-block-end:0}th.footer-row{border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th.last-cell{border-inline-end:0}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-color-foreground-2))}.cell--multiple-selection.selected-cell{background-color:var(--calcite-table-selection-cell-background-color-selected, var(--calcite-color-foreground-2))}.cell--multiple-selection:not(.end){vertical-align:middle}.number-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2)))}.number-cell,.selection-cell{inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-table-header-heading-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-table-header-description-text-color, var(--calcite-color-text-3));font-size:var(--calcite-internal-table-cell-font-size-secondary)}`;
@@ -14,7 +14,7 @@ class TableHeader extends LitElement {
     super(...arguments);
     this.containerRef = createRef();
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.focused = false;
     this.screenReaderText = "";
     this.alignment = "start";

package/dist/components/calcite-table-row/customElement.js

@@ -45,7 +45,6 @@ class TableRow extends LitElement {
     this.calciteInternalTableRowFocusRequest = createEvent({ cancelable: false });
     this.calciteInternalTableRowSelect = createEvent({ cancelable: false });
     this.calciteTableRowSelect = createEvent({ cancelable: false });
-    this.listenOn(document, "calciteInternalTableRowFocusChange", this.calciteInternalTableRowFocusChangeHandler);
   }
   static {
     this.properties = { alignment: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], bodyRowCount: [9, {}, { type: Number }], cellCount: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, lastVisibleRow: [5, {}, { type: Boolean }], numbered: [5, {}, { type: Boolean }], positionAll: [9, {}, { type: Number }], positionSection: [9, {}, { type: Number }], positionSectionLocalized: 1, readCellContentsToAT: [5, {}, { type: Boolean }], rowType: 1, scale: 1, stickyHeaderEnabled: [5, {}, { type: Boolean }], selected: [7, {}, { reflect: true, type: Boolean }], selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionMode: 1 };
@@ -64,6 +63,7 @@ class TableRow extends LitElement {
     }
   }
   load() {
+    this.listenOn(document, "calciteInternalTableRowFocusChange", this.calciteInternalTableRowFocusChangeHandler);
     this.listenOn(this.el.shadowRoot, "slotchange", this.handleSlotChange);
   }
   willUpdate(changes) {

package/dist/components/calcite-text-area/customElement.js

@@ -16,7 +16,7 @@ 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 useCancelable } from "../../chunks/useCancelable.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 import { s as styles$1 } from "../../chunks/screen-reader.js";
@@ -79,7 +79,7 @@ class TextArea extends LitElement {
       this.el.style[dimension] = "auto";
     }, RESIZE_TIMEOUT, { edges: ["trailing"] });
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.endSlotHasElements = false;
     this.startSlotHasElements = false;