@nectary/components 5.37.2 → 5.37.5

package/accordion-item/index.d.ts

@@ -7,6 +7,7 @@ export * from './types';
 export declare class AccordionItem extends NectaryElement {
     #private;
     constructor();
+    connectedCallback(): void;
     disconnectedCallback(): void;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
@@ -16,10 +17,12 @@ export declare class AccordionItem extends NectaryElement {
     get label(): string;
     set disabled(isDisabled: boolean);
     get disabled(): boolean;
-    get status(): TSinchAccordionStatusType | null;
     set status(value: TSinchAccordionStatusType | null);
+    get status(): TSinchAccordionStatusType | null;
     set optionalText(value: string | null);
     get optionalText(): string | null;
+    set ellipsis(isEllipsis: boolean);
+    get ellipsis(): boolean;
     get focusable(): boolean;
     focus(): void;
     blur(): void;

package/accordion-item/index.js

@@ -1,16 +1,17 @@
 import "../icon/index.js";
 import "../text/index.js";
 import "../title/index.js";
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute } from "../utils/dom.js";
+import { updateBooleanAttribute, isAttrEqual, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute, updateLiteralAttribute, getLiteralAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { statusValues } from "./utils.js";
-const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:flex-start;gap:8px;box-sizing:border-box;width:100%;min-height:48px;padding:12px 4px 12px 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{flex-shrink:0;margin-top:2px;transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{flex-shrink:0;--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:flex-start;gap:8px;box-sizing:border-box;width:100%;min-height:48px;padding:12px 4px 12px 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{flex-shrink:0;margin-top:2px;transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{flex-shrink:0;--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m"></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class AccordionItem extends NectaryElement {
   #$button;
   #$title;
   #$optionalText;
+  #hasExplicitEllipsis = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow({ delegatesFocus: true });
@@ -19,7 +20,14 @@ class AccordionItem extends NectaryElement {
     this.#$title = shadowRoot.querySelector("#title");
     this.#$optionalText = shadowRoot.querySelector("#optional");
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasAttribute("ellipsis") === false && this.#hasExplicitEllipsis === false) {
+      updateBooleanAttribute(this, "ellipsis", true);
+    }
+  }
   disconnectedCallback() {
+    super.disconnectedCallback();
   }
   static get observedAttributes() {
     return [
@@ -27,7 +35,6 @@ class AccordionItem extends NectaryElement {
       "disabled",
       "data-checked",
       "optionaltext",
-      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: ellipsis missing set/get pair, fixed by MR !597
       "ellipsis"
     ];
   }
@@ -58,6 +65,7 @@ class AccordionItem extends NectaryElement {
         break;
       }
       case "ellipsis": {
+        this.#hasExplicitEllipsis = true;
         updateBooleanAttribute(this.#$title, name, isAttrTrue(newVal));
         break;
       }
@@ -81,18 +89,25 @@ class AccordionItem extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, "disabled");
   }
-  get status() {
-    return getLiteralAttribute(this, statusValues, "status", null);
-  }
   set status(value) {
     updateLiteralAttribute(this, statusValues, "status", value);
   }
+  get status() {
+    return getLiteralAttribute(this, statusValues, "status", null);
+  }
   set optionalText(value) {
     updateAttribute(this, "optionaltext", value);
   }
   get optionalText() {
     return getAttribute(this, "optionaltext");
   }
+  set ellipsis(isEllipsis) {
+    this.#hasExplicitEllipsis = true;
+    updateBooleanAttribute(this, "ellipsis", isEllipsis);
+  }
+  get ellipsis() {
+    return getBooleanAttribute(this, "ellipsis");
+  }
   get focusable() {
     return true;
   }

package/action-menu/index.js

@@ -1,6 +1,6 @@
 import { isSinchActionMenuOption } from "../action-menu-option/utils.js";
 import { subscribeContext } from "../utils/context.js";
-import { attrValueToPixels, updateIntegerAttribute, getIntegerAttribute, getBooleanAttribute, updateBooleanAttribute } from "../utils/dom.js";
+import { attrValueToPixels, updateIntegerAttribute, getIntegerAttribute, getDeepActiveElement, getBooleanAttribute, updateBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
@@ -69,7 +69,7 @@ class ActionMenu extends NectaryElement {
       this.#selectOption(null);
       this.#$listbox.scrollTo({ top: 0, behavior: "auto" });
     } else {
-      const activeElement = this.#getDeepActiveElement();
+      const activeElement = getDeepActiveElement(this.ownerDocument);
       const isTextInput = activeElement !== null && activeElement.tagName === "INPUT";
       if (!isTextInput) {
         this.focus();
@@ -146,13 +146,6 @@ class ActionMenu extends NectaryElement {
     }
     return this.#getLastOption();
   }
-  #getDeepActiveElement() {
-    let activeElement = this.ownerDocument.activeElement;
-    while (activeElement !== null && activeElement.shadowRoot !== null && activeElement.shadowRoot.activeElement !== null) {
-      activeElement = activeElement.shadowRoot.activeElement;
-    }
-    return activeElement;
-  }
   #selectOption($option) {
     const hasRows = this.hasAttribute("rows");
     for (const $op of this.#getOptionElements()) {

package/bundle.js

@@ -124,6 +124,32 @@ const cloneNode = (el, deep) => {
   return el.cloneNode(deep);
 };
 const shouldReduceMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const getDeepActiveElement = (ownerDocument = document) => {
+  let activeElement = ownerDocument.activeElement;
+  while (activeElement !== null && activeElement.shadowRoot !== null && activeElement.shadowRoot.activeElement !== null) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+};
+const composedContains = (container, node) => {
+  let current = node;
+  while (current !== null) {
+    if (current === container) {
+      return true;
+    }
+    if (current.parentNode !== null) {
+      current = current.parentNode;
+      continue;
+    }
+    const root = current.getRootNode();
+    if (root instanceof ShadowRoot) {
+      current = root.host;
+      continue;
+    }
+    current = null;
+  }
+  return false;
+};
 const isAttrEqual = (oldVal, newVal) => {
   return oldVal === newVal || newVal === null && oldVal === "false" || newVal === "" && oldVal === "true";
 };
@@ -436,13 +462,14 @@ class Title extends NectaryElement {
 }
 defineCustomElement("sinch-title", Title);
 const statusValues$1 = ["info", "success", "warn", "error"];
-const templateHTML$1g = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:flex-start;gap:8px;box-sizing:border-box;width:100%;min-height:48px;padding:12px 4px 12px 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{flex-shrink:0;margin-top:2px;transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{flex-shrink:0;--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
+const templateHTML$1g = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:flex-start;gap:8px;box-sizing:border-box;width:100%;min-height:48px;padding:12px 4px 12px 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{flex-shrink:0;margin-top:2px;transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{flex-shrink:0;--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m"></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 const template$1g = document.createElement("template");
 template$1g.innerHTML = templateHTML$1g;
 class AccordionItem extends NectaryElement {
   #$button;
   #$title;
   #$optionalText;
+  #hasExplicitEllipsis = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow({ delegatesFocus: true });
@@ -451,7 +478,14 @@ class AccordionItem extends NectaryElement {
     this.#$title = shadowRoot.querySelector("#title");
     this.#$optionalText = shadowRoot.querySelector("#optional");
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasAttribute("ellipsis") === false && this.#hasExplicitEllipsis === false) {
+      updateBooleanAttribute(this, "ellipsis", true);
+    }
+  }
   disconnectedCallback() {
+    super.disconnectedCallback();
   }
   static get observedAttributes() {
     return [
@@ -459,7 +493,6 @@ class AccordionItem extends NectaryElement {
       "disabled",
       "data-checked",
       "optionaltext",
-      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: ellipsis missing set/get pair, fixed by MR !597
       "ellipsis"
     ];
   }
@@ -490,6 +523,7 @@ class AccordionItem extends NectaryElement {
         break;
       }
       case "ellipsis": {
+        this.#hasExplicitEllipsis = true;
         updateBooleanAttribute(this.#$title, name, isAttrTrue(newVal));
         break;
       }
@@ -513,18 +547,25 @@ class AccordionItem extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, "disabled");
   }
-  get status() {
-    return getLiteralAttribute(this, statusValues$1, "status", null);
-  }
   set status(value) {
     updateLiteralAttribute(this, statusValues$1, "status", value);
   }
+  get status() {
+    return getLiteralAttribute(this, statusValues$1, "status", null);
+  }
   set optionalText(value) {
     updateAttribute(this, "optionaltext", value);
   }
   get optionalText() {
     return getAttribute(this, "optionaltext");
   }
+  set ellipsis(isEllipsis2) {
+    this.#hasExplicitEllipsis = true;
+    updateBooleanAttribute(this, "ellipsis", isEllipsis2);
+  }
+  get ellipsis() {
+    return getBooleanAttribute(this, "ellipsis");
+  }
   get focusable() {
     return true;
   }
@@ -892,7 +933,7 @@ class ActionMenu extends NectaryElement {
       this.#selectOption(null);
       this.#$listbox.scrollTo({ top: 0, behavior: "auto" });
     } else {
-      const activeElement = this.#getDeepActiveElement();
+      const activeElement = getDeepActiveElement(this.ownerDocument);
       const isTextInput = activeElement !== null && activeElement.tagName === "INPUT";
       if (!isTextInput) {
         this.focus();
@@ -969,13 +1010,6 @@ class ActionMenu extends NectaryElement {
     }
     return this.#getLastOption();
   }
-  #getDeepActiveElement() {
-    let activeElement = this.ownerDocument.activeElement;
-    while (activeElement !== null && activeElement.shadowRoot !== null && activeElement.shadowRoot.activeElement !== null) {
-      activeElement = activeElement.shadowRoot.activeElement;
-    }
-    return activeElement;
-  }
   #selectOption($option) {
     const hasRows = this.hasAttribute("rows");
     for (const $op of this.#getOptionElements()) {
@@ -4266,7 +4300,7 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.show();
   };
   #onFocusIn = () => {
-    if (this.#suppressFocusIn) {
+    if (this.#suppressFocusIn || !this.#shouldOpenForFocus()) {
       return;
     }
     this.#closeFocusedTooltip();
@@ -4275,6 +4309,13 @@ class Tooltip extends NectaryElement {
     focusedTooltip = this;
     this.#tooltipState.show();
   };
+  #shouldOpenForFocus() {
+    const activeEl = getDeepActiveElement(this.ownerDocument);
+    if (!(activeEl instanceof HTMLElement) || !this.#targetContains(activeEl)) {
+      return false;
+    }
+    return activeEl.matches(":focus-visible");
+  }
   #closeFocusedTooltip() {
     if (!this.#isOtherUncontrolledTooltip(focusedTooltip)) {
       return;
@@ -4385,7 +4426,7 @@ class Tooltip extends NectaryElement {
     });
   };
   #targetContains(node) {
-    return this.#$target.assignedElements().some((el) => el.contains(node));
+    return this.#$target.assignedElements().some((el) => composedContains(el, node));
   }
   #getTargetElements() {
     return this.#$target.assignedElements().filter((el) => el instanceof HTMLElement);
@@ -13017,13 +13058,6 @@ class SegmentedControlOption extends NectaryElement {
   };
 }
 defineCustomElement("sinch-segmented-control-option", SegmentedControlOption);
-function getActualActiveElement() {
-  let activeElement = document.activeElement;
-  while (activeElement?.shadowRoot?.activeElement != null) {
-    activeElement = activeElement.shadowRoot.activeElement;
-  }
-  return activeElement;
-}
 function createKeyboardNavigation() {
   return {
     navigateToNextOption(enabledOptions, forward) {
@@ -13031,7 +13065,7 @@ function createKeyboardNavigation() {
       if (optionsLength === 0) {
         return;
       }
-      const currentIndex = enabledOptions.findIndex((option) => option === getActualActiveElement());
+      const currentIndex = enabledOptions.findIndex((option) => option === getDeepActiveElement());
       let nextIndex;
       if (currentIndex !== -1) {
         if (forward) {

package/bundle.ts

@@ -84,3 +84,4 @@ export * from './toast-manager/index.js'
 export * from './toast/index.js'
 export * from './toggle/index.js'
 export * from './tooltip/index.js'
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.37.2",
+  "version": "5.37.5",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.6.11"
+    "@nectary/assets": "3.6.12"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package/tooltip/index.js

@@ -1,6 +1,6 @@
 import "../text/index.js";
 import "../pop/index.js";
-import { shouldReduceMotion, updateAttribute, updateBooleanAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, setClass } from "../utils/dom.js";
+import { shouldReduceMotion, updateAttribute, updateBooleanAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, getDeepActiveElement, composedContains, setClass } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { rectOverlap } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
@@ -239,7 +239,7 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.show();
   };
   #onFocusIn = () => {
-    if (this.#suppressFocusIn) {
+    if (this.#suppressFocusIn || !this.#shouldOpenForFocus()) {
       return;
     }
     this.#closeFocusedTooltip();
@@ -248,6 +248,13 @@ class Tooltip extends NectaryElement {
     focusedTooltip = this;
     this.#tooltipState.show();
   };
+  #shouldOpenForFocus() {
+    const activeEl = getDeepActiveElement(this.ownerDocument);
+    if (!(activeEl instanceof HTMLElement) || !this.#targetContains(activeEl)) {
+      return false;
+    }
+    return activeEl.matches(":focus-visible");
+  }
   #closeFocusedTooltip() {
     if (!this.#isOtherUncontrolledTooltip(focusedTooltip)) {
       return;
@@ -358,7 +365,7 @@ class Tooltip extends NectaryElement {
     });
   };
   #targetContains(node) {
-    return this.#$target.assignedElements().some((el) => el.contains(node));
+    return this.#$target.assignedElements().some((el) => composedContains(el, node));
   }
   #getTargetElements() {
     return this.#$target.assignedElements().filter((el) => el instanceof HTMLElement);

package/utils/control-keyboard-navigation.js

@@ -1,11 +1,5 @@
+import { getDeepActiveElement } from "./dom.js";
 import { getTargetByAttribute } from "./event-target.js";
-function getActualActiveElement() {
-  let activeElement = document.activeElement;
-  while (activeElement?.shadowRoot?.activeElement != null) {
-    activeElement = activeElement.shadowRoot.activeElement;
-  }
-  return activeElement;
-}
 function createKeyboardNavigation() {
   return {
     navigateToNextOption(enabledOptions, forward) {
@@ -13,7 +7,7 @@ function createKeyboardNavigation() {
       if (optionsLength === 0) {
         return;
       }
-      const currentIndex = enabledOptions.findIndex((option) => option === getActualActiveElement());
+      const currentIndex = enabledOptions.findIndex((option) => option === getDeepActiveElement());
       let nextIndex;
       if (currentIndex !== -1) {
         if (forward) {

package/utils/dom.d.ts

@@ -31,6 +31,8 @@ export declare const getCssVar: (element: Element, variableName: string) => stri
 export declare const getCssVars: (element: Element, variableNames: string[]) => (string | null)[];
 export declare const cloneNode: (el: Element, deep: boolean) => Element;
 export declare const shouldReduceMotion: () => boolean;
+export declare const getDeepActiveElement: (ownerDocument?: Document) => Element | null;
+export declare const composedContains: (container: Node, node: Node | null) => boolean;
 export declare const isAttrEqual: (oldVal: string | null, newVal: string | null) => boolean;
 export declare const getScrollableParents: (node: HTMLElement | null) => (HTMLElement | Document)[];
 export declare const isTransformedElement: (element: HTMLElement | null) => element is HTMLElement;

package/utils/dom.js

@@ -134,6 +134,32 @@ const cloneNode = (el, deep) => {
   return el.cloneNode(deep);
 };
 const shouldReduceMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const getDeepActiveElement = (ownerDocument = document) => {
+  let activeElement = ownerDocument.activeElement;
+  while (activeElement !== null && activeElement.shadowRoot !== null && activeElement.shadowRoot.activeElement !== null) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+};
+const composedContains = (container, node) => {
+  let current = node;
+  while (current !== null) {
+    if (current === container) {
+      return true;
+    }
+    if (current.parentNode !== null) {
+      current = current.parentNode;
+      continue;
+    }
+    const root = current.getRootNode();
+    if (root instanceof ShadowRoot) {
+      current = root.host;
+      continue;
+    }
+    current = null;
+  }
+  return false;
+};
 const isAttrEqual = (oldVal, newVal) => {
   return oldVal === newVal || newVal === null && oldVal === "false" || newVal === "" && oldVal === "true";
 };
@@ -190,10 +216,12 @@ export {
   attrValueToPixels,
   clampNumber,
   cloneNode,
+  composedContains,
   getAttribute,
   getBooleanAttribute,
   getCssVar,
   getCssVars,
+  getDeepActiveElement,
   getIntegerAttribute,
   getLiteralAttribute,
   getScrollableParents,

package/utils/index.js

@@ -1,6 +1,6 @@
 import { Context, subscribeContext } from "./context.js";
 import { CSV_DELIMITER, getFirstCsvValue, packCsv, unpackCsv, updateCsv } from "./csv.js";
-import { attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getIntegerAttribute, getLiteralAttribute, getScrollableParents, getTransformedAncestor, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, isTransformedElement, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
+import { attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, composedContains, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getDeepActiveElement, getIntegerAttribute, getLiteralAttribute, getScrollableParents, getTransformedAncestor, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, isTransformedElement, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
 import { NectaryElement, defineCustomElement, pascalToKebabCase, registerComponent, resetNectaryRegistry, setNectaryRegistry } from "./element.js";
 import { getRect, getTargetRect, rectOverlap } from "./rect.js";
 import { getFirstFocusableElement, getFirstSlotElement, isElementFocused } from "./slot.js";
@@ -18,6 +18,7 @@ export {
   attrValueToPixels,
   clampNumber,
   cloneNode,
+  composedContains,
   debounceAnimationFrame,
   debounceTimeout,
   defineCustomElement,
@@ -25,6 +26,7 @@ export {
   getBooleanAttribute,
   getCssVar,
   getCssVars,
+  getDeepActiveElement,
   getFirstCsvValue,
   getFirstFocusableElement,
   getFirstSlotElement,

package/utils/shared/cdn-loader.js

@@ -1,3 +1,9 @@
+const getNonEsmShModuleFile = (modulePath) => {
+  if (modulePath === "bundle") {
+    return "bundle.js";
+  }
+  return `${modulePath}/index.js`;
+};
 const getImportPath = (cdnUrl, version, modulePath) => {
   if (cdnUrl.length === 0) {
     return null;
@@ -9,10 +15,11 @@ const getImportPath = (cdnUrl, version, modulePath) => {
     }
     return `${cdnUrl}/${modulePath}`;
   }
+  const moduleFile = getNonEsmShModuleFile(modulePath);
   if (version.length !== 0) {
-    return `${cdnUrl}/${version}/${modulePath}.js`;
+    return `${cdnUrl}/${version}/${moduleFile}`;
   }
-  return `${cdnUrl}/latest/${modulePath}.js`;
+  return `${cdnUrl}/latest/${moduleFile}`;
 };
 const getCssImportPath = (cdnUrl, version, modulePath) => {
   if (cdnUrl.length === 0) {