@nectary/components 5.37.3 → 5.37.6

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";
 };
@@ -907,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();
@@ -984,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()) {
@@ -4281,7 +4300,7 @@ class Tooltip extends NectaryElement {
     this.#tooltipState.show();
   };
   #onFocusIn = () => {
-    if (this.#suppressFocusIn) {
+    if (this.#suppressFocusIn || !this.#shouldOpenForFocus()) {
       return;
     }
     this.#closeFocusedTooltip();
@@ -4290,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;
@@ -4400,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);
@@ -13032,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) {
@@ -13046,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) {
@@ -14318,7 +14337,7 @@ class Sheet extends NectaryElement {
   };
 }
 defineCustomElement("sinch-sheet", Sheet);
-const templateHTML$f = '<style>:host{display:contents;--sinch-sheet-close-button-display:unset}#top{display:flex;flex-direction:row;align-items:center;margin-top:8px;gap:8px}#text{--sinch-global-color-text:var(--sinch-comp-sheet-color-title);--sinch-comp-title-font:var(--sinch-comp-sheet-font-title)}#description{--sinch-global-color-text:var(--sinch-comp-sheet-color-description);--sinch-comp-text-font:var(--sinch-comp-sheet-font-description)}#close{display:var(--sinch-sheet-close-button-display,initial);margin-left:auto}</style><div id="title"><div id="top"><slot id="icon" name="icon"></slot><sinch-title id="text" type="m" level="3"></sinch-title><sinch-button id="close" size="s" aria-label="Close"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><sinch-text id="description" type="m"></sinch-text></div>';
+const templateHTML$f = '<style>:host{display:contents;--sinch-sheet-close-button-display:unset}#top{display:flex;flex-direction:row;align-items:center;margin-top:8px;gap:var(--sinch-comp-sheet-size-title-gap)}#text{--sinch-global-color-text:var(--sinch-comp-sheet-color-title);--sinch-comp-title-font:var(--sinch-comp-sheet-font-title)}#description{--sinch-global-color-text:var(--sinch-comp-sheet-color-description);--sinch-comp-text-font:var(--sinch-comp-sheet-font-description)}#close{display:var(--sinch-sheet-close-button-display,initial);margin-left:auto}</style><div id="title"><div id="top"><slot id="icon" name="icon"></slot><sinch-title id="text" type="m" level="3"></sinch-title><sinch-button id="close" size="s" aria-label="Close"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><sinch-text id="description" type="m"></sinch-text></div>';
 const template$f = document.createElement("template");
 template$f.innerHTML = templateHTML$f;
 class SheetTitle extends NectaryElement {

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.3",
+  "version": "5.37.6",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.6.11"
+    "@nectary/assets": "3.6.13"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.16.1"
+    "@nectary/theme-base": "1.16.2"
   }
 }

package/sheet-title/index.js

@@ -3,7 +3,7 @@ import "../title/index.js";
 import { isAttrEqual, updateAttribute, getAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
-const templateHTML = '<style>:host{display:contents;--sinch-sheet-close-button-display:unset}#top{display:flex;flex-direction:row;align-items:center;margin-top:8px;gap:8px}#text{--sinch-global-color-text:var(--sinch-comp-sheet-color-title);--sinch-comp-title-font:var(--sinch-comp-sheet-font-title)}#description{--sinch-global-color-text:var(--sinch-comp-sheet-color-description);--sinch-comp-text-font:var(--sinch-comp-sheet-font-description)}#close{display:var(--sinch-sheet-close-button-display,initial);margin-left:auto}</style><div id="title"><div id="top"><slot id="icon" name="icon"></slot><sinch-title id="text" type="m" level="3"></sinch-title><sinch-button id="close" size="s" aria-label="Close"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><sinch-text id="description" type="m"></sinch-text></div>';
+const templateHTML = '<style>:host{display:contents;--sinch-sheet-close-button-display:unset}#top{display:flex;flex-direction:row;align-items:center;margin-top:8px;gap:var(--sinch-comp-sheet-size-title-gap)}#text{--sinch-global-color-text:var(--sinch-comp-sheet-color-title);--sinch-comp-title-font:var(--sinch-comp-sheet-font-title)}#description{--sinch-global-color-text:var(--sinch-comp-sheet-color-description);--sinch-comp-text-font:var(--sinch-comp-sheet-font-description)}#close{display:var(--sinch-sheet-close-button-display,initial);margin-left:auto}</style><div id="title"><div id="top"><slot id="icon" name="icon"></slot><sinch-title id="text" type="m" level="3"></sinch-title><sinch-button id="close" size="s" aria-label="Close"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><sinch-text id="description" type="m"></sinch-text></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SheetTitle extends NectaryElement {

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) {