@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

package/lib/theme/themes/studioTheme.json

@@ -2,7 +2,7 @@
     "base": {
         "palette": {
             "ai": "#8C2EEB",
-            "app-background": "radial-gradient(circle at top center, #FFFFFF,#EDEDF2)",
+            "app-background": "url(https://launchpad.io/sites/default/files/media/images/2025-11/studio-bg-light.jpg) no-repeat center / cover",
             "primary-background": "#FFFFFF",
             "secondary-background": "#F4F6FA",
             "foreground-color": "#333333",
@@ -41,13 +41,14 @@
         },
         "app-shell": {
             "nav": {
-                "background": "linear-gradient(to bottom, #F4F6FA 0%, #EDEDF2 50%, #F4F6FA 100%)",
+                "background": "#F4F6FAAA",
                 "foreground-color": "#333333",
                 "border-color": "transparent",
                 "detached": false
             },
             "header": {
-                "background": "#F4F6FA",
+                "background": "#ffffff88",
+                "foreground-color": "#24292f",
                 "border-color": "transparent"
             }
         },
@@ -77,10 +78,19 @@
                 "font-stretch": "70%"
             },
             "header": {
-                "background-color": "#F4F6FA",
+                "background-color": "#FFFFFF",
                 "foreground-color": "#333333"
             },
-            "striped-rows": true
+            "striped-rows": true,
+            "body": {
+                "secondary-background-color": "#f4f6fa"
+            },
+            "border": {
+                "horizontal-inner": false,
+                "horizontal-outer": false,
+                "vertical-inner": false,
+                "vertical-outer": false
+            }
         },
         "tooltip": {
             "foreground-color": "#FFFFFF",
@@ -101,23 +111,23 @@
             "status": {
                 "success": {
                     "background": "#C8E6C9",
-                    "foreground": "#1F351F"
+                    "foreground": "#3F743F"
                 },
                 "warn": {
                     "background": "#FFE0B2",
-                    "foreground": "#37281E"
+                    "foreground": "#ED6C02"
                 },
                 "urgent": {
                     "background": "#FFCDD2",
-                    "foreground": "#1F1112"
+                    "foreground": "#D32F2F"
                 },
                 "pending": {
                     "background": "#D1C4E9",
-                    "foreground": "#1B1425"
+                    "foreground": "#7E57C2"
                 },
                 "info": {
                     "background": "#E3F2FD",
-                    "foreground": "#333333"
+                    "foreground": "#3F6B83"
                 }
             }
         },
@@ -126,33 +136,38 @@
         },
         "case-view": {
             "header": {
-                "background": "#FFFFFFE0",
+                "background": "#c7e5f9",
                 "foreground-color": "#333333"
             },
+            "icon": {
+                "color": "#504cd5",
+                "background": "radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,0.5) 0%, rgba(30,91,184,0.16) 55%, rgba(30,91,184,0.10) 100%)",
+                "box-shadow": "0 1px 1px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.08)"
+            },
             "summary": {
                 "detached": true
             },
             "utilities": {
                 "detached": false,
-                "background": "#FFFFFFE0"
+                "background": "#f7f9fa"
             },
             "assignments": {
                 "detached": true,
-                "background": "#FFFFFFE0",
-                "foreground-color": "auto"
+                "background": "#f7f9fa",
+                "foreground-color": "#24292f"
             },
             "stages": {
                 "status": {
                     "completed": {
-                        "background": "#C8E6C9",
-                        "foreground-color": "#1F351F"
+                        "background": "#DBF2E3",
+                        "foreground-color": "#0f4823"
                     },
                     "current": {
                         "background": "#504cd5",
                         "foreground-color": "#FFFFFF"
                     },
                     "pending": {
-                        "background": "#E0E3EF"
+                        "background": "#f7f9fa"
                     }
                 }
             }
@@ -167,6 +182,10 @@
             "border-radius": "0.5rem",
             "foreground-color": "#333333"
         },
+        "label": {
+            "foreground-color": "#4c5767",
+            "font-size": "s"
+        },
         "text": {
             "primary": {
                 "font-family": "'Noto Sans', sans-serif",
@@ -178,7 +197,6 @@
             },
             "h1": {
                 "font-family": "'Saira', sans-serif",
-                "font-size": "xxxl",
                 "font-weight": "500"
             },
             "h2": {
@@ -215,7 +233,7 @@
                 "background": "#FFFFFF"
             },
             "stage": {
-                "background": "#FFFFFF",
+                "background": "#f2f3f7",
                 "foreground-color": "#333333",
                 "start": {
                     "background": "#90CAF9",

package/lib/theme/themes/virgoDarkTheme.json

@@ -0,0 +1,206 @@
+{
+    "base": {
+        "font-family": "'Roboto Flex', sans-serif",
+        "font-stretch": "100%",
+        "line-height": "1.28",
+        "font-scale": "majorSecond",
+        "palette": {
+            "ai": "#d6bcf5",
+            "app-background": "#181b25",
+            "brand-primary": "#313749",
+            "brand-accent": "#003B70",
+            "border-line": "#515c7b",
+            "secondary-background": "#414962",
+            "foreground-color": "#fff",
+            "interactive": "#add4fb",
+            "primary-background": "#252937"
+        },
+        "border-radius": "1rem",
+        "shadow": {
+            "focus": "0 0 0 0.11rem #181b25, 0 0 0 0.18rem #add4fb, 0 0 0 0.3rem #add4fb1a",
+            "focus-inset": "inset 0 0 0 0.11rem #181b25, inset 0 0 0 0.18rem #add4fb, inset 0 0 0 0.3rem #add4fb1a",
+            "focus-group": "0 0 0 0.125rem #add4fb66",
+            "focus-group-inset": "inset 0 0 0 0.125rem #add4fb66",
+            "focus-solid": "0 0 0 0.0625rem rgb(63, 87, 228)",
+            "focus-filter": "drop-shadow(0 0 0.125rem rgba(63, 87, 228, 0.30))",
+            "high": "0 0 0 1px #2f3546, 0 0.125rem 1.5rem rgba(0,0,0,.8)",
+            "low": "0 0 0 1px #2f3546, 0 0.125rem 0.5rem rgba(0,0,0,.6)"
+        },
+        "case-type-colors": "header-and-icon",
+        "spacing": "0.65rem"
+    },
+    "components": {
+        "avatar": {
+            "background": "linear-gradient(45deg, hsl(220, 100%, 17%) 0%, hsl(220, 40%, 60%) 100%)",
+            "background-color": "#5570a9"
+        },
+        "app-shell": {
+            "nav": {
+                "background": "#181b25",
+                "foreground-color": "auto",
+                "border-color": "transparent",
+                "create-button-background": "#252937",
+                "nested-list-background": "#252937",
+                "detached": true
+            },
+            "header": {
+                "background": "#313749",
+                "foreground-color": "auto",
+                "border-color": "transparent",
+                "app-name-color": "auto"
+            }
+        },
+        "button": {
+            "border-radius": 0.5,
+            "foreground-color": "auto",
+            "color": "#add4fb",
+            "secondary-color": "#add4fb"
+        },
+        "form-control": {
+            "border-radius": 0.25,
+            "border-color": "#7581a3",
+            "background-color": "#191C24",
+            ":read-only": {
+                "background-color": "#41475c"
+            }
+        },
+        "tabs": {
+            "detached": true
+        },
+        "table": {
+            "typography": {
+                "font-stretch": "60%"
+            },
+            "striped-rows": true,
+            "border": {
+                "horizontal-inner": false,
+                "horizontal-outer": false,
+                "vertical-inner": false,
+                "vertical-outer": false
+            }
+        },
+        "badges": {
+            "font-stretch": "60%",
+            "status": {
+                "success": {
+                    "foreground": "#7ee791",
+                    "background": "#0b381a"
+                },
+                "urgent": {
+                    "foreground": "#f66f78",
+                    "background": "#570006"
+                },
+                "warn": {
+                    "foreground": "#ffaa75",
+                    "background": "#5a2401"
+                },
+                "pending": {
+                    "foreground": "#d6bcf5",
+                    "background": "#341061"
+                },
+                "info": {
+                    "foreground": "#e9eef3",
+                    "background": "#4c5a67"
+                }
+            }
+        },
+        "announcement": {
+            "background": "#313749",
+            "foreground-color": "auto"
+        },
+        "agent": {
+            "background": "linear-gradient(45deg, #422e6b 0%, #2c3249 100%)",
+            "foreground-color": "#ffffff",
+            "user-message": {
+                "background": "#AD81E41a",
+                "foreground-color": "#ffffff"
+            },
+            "coach-message": {
+                "avatar": {
+                    "background": "linear-gradient(219.11deg,rgba(49,44,73,.5) 9%, #460f8a 123.32%,#8243d0 163.09%)"
+                }
+            }
+        },
+        "case-view": {
+            "header": {
+                "background-color": "#252937",
+                "foreground-color": "auto"
+            },
+            "icon": {
+                "color": "#ffffff",
+                "background": "linear-gradient(45deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end))",
+                "box-shadow": "0 2px 2px -1px #0004, 0 1px 2px #0001, 0 4px 6px #0001, 0 9px 14px #0001, 0 16px 24px #0001"
+            },
+            "summary": {
+                "detached": true
+            },
+            "utilities": {
+                "detached": true,
+                "background": "#181b25",
+                "foreground-color": "auto",
+                "icon-color": true
+            },
+            "assignments": {
+                "detached": false,
+                "background": "#313749"
+            },
+            "stages": {
+                "status": {
+                    "completed": {
+                        "background": "#A9EFB6",
+                        "foreground-color": "#0b381a"
+                    },
+                    "current": {
+                        "background": "#add4fb",
+                        "foreground-color": "auto"
+                    },
+                    "pending": {
+                        "background": "#313749",
+                        "foreground-color": "auto"
+                    }
+                }
+            }
+        },
+        "field-value-list": {
+            "inline": {
+                "detached": true
+            }
+        },
+        "label": {
+            "foreground-color": "#ffffffb3",
+            "font-size": "s"
+        },
+        "link": {
+            "color": "#add4fb"
+        },
+        "text": {
+            "brand-primary": {
+                "font-family": "'Roboto Flex', sans-serif",
+                "font-weight": "600",
+                "font-size": "l"
+            },
+            "h1": {
+                "font-family": "Poppins, sans-serif"
+            },
+            "h2": {
+                "font-family": "Poppins, sans-serif",
+                "font-size": "xl"
+            },
+            "h3": {
+                "font-family": "Poppins, sans-serif"
+            },
+            "h4": {
+                "font-family": "Poppins, sans-serif"
+            },
+            "h5": {
+                "font-family": "Poppins, sans-serif"
+            },
+            "h6": {
+                "font-family": "Poppins, sans-serif"
+            }
+        },
+        "card": {
+            "background": "#252937"
+        }
+    }
+}

package/lib/theme/themes/virgoTheme.json

@@ -0,0 +1,166 @@
+{
+    "base": {
+        "font-family": "\u0027Roboto Flex\u0027, sans-serif",
+        "font-stretch": "100%",
+        "line-height": "1.28",
+        "font-scale": "majorSecond",
+        "palette": {
+            "app-background": "#e2e6f3",
+            "brand-primary": "#ffffff",
+            "brand-accent": "#003B70",
+            "border-line": "#cfd5e2",
+            "secondary-background": "#F3F4FA",
+            "foreground-color": "#001d54",
+            "interactive": "#3f57e4"
+        },
+        "border-radius": "1rem",
+        "shadow": {
+            "focus": "0 0 0 0.11rem #fff, 0 0 0 0.18rem #3F57E4, 0 0 0 0.3rem #3F57E41a",
+            "focus-inset": "inset 0 0 0 0.11rem #fff, inset 0 0 0 0.18rem #3F57E4, inset 0 0 0 0.3rem #3F57E41a",
+            "focus-group": "0 0 0 0.125rem #3F57E466",
+            "focus-group-inset": "inset 0 0 0 0.125rem #3F57E466",
+            "focus-solid": "0 0 0 0.0625rem rgb(63, 87, 228)",
+            "focus-filter": "drop-shadow(0 0 0.125rem rgba(63, 87, 228, 0.30))"
+        },
+        "case-type-colors": "header-and-icon",
+        "spacing": "0.65rem"
+    },
+    "components": {
+        "avatar": {
+            "background": "linear-gradient(180deg, hsl(220, 100%, 17%) 0%, hsl(220, 40%, 60%) 100%)",
+            "background-color": "#000000"
+        },
+        "app-shell": {
+            "nav": {
+                "background": "#e2e6f3",
+                "foreground-color": "#001F5F",
+                "border-color": "transparent",
+                "separator-color": "#cfd5e2",
+                "create-button-background": "#f5f5fc",
+                "nested-list-background": "#f5f5fc",
+                "detached": true
+            },
+            "header": {
+                "background": "#fff",
+                "foreground-color": "#001F5F",
+                "border-color": "#e2e6f3"
+            }
+        },
+        "button": {
+            "border-radius": 0.5,
+            "foreground-color": "#ffffff",
+            "color": "#3f57e4",
+            "secondary-color": "#3f57e4"
+        },
+        "form-control": {
+            "border-radius": 0.25,
+            "border-color": "#8a8a8a"
+        },
+        "tabs": {
+            "detached": true
+        },
+        "table": {
+            "typography": {
+                "font-stretch": "60%"
+            },
+            "striped-rows": true,
+            "border": {
+                "horizontal-inner": false,
+                "horizontal-outer": false,
+                "vertical-inner": false,
+                "vertical-outer": false
+            }
+        },
+        "badges": {
+            "font-stretch": "60%"
+        },
+        "announcement": {
+            "background": "#fff",
+            "foreground-color": "#001f5f"
+        },
+        "agent": {
+            "background": "linear-gradient(90deg, #f7f5ff 0%, #eff6fe 100%)",
+            "user-message": {
+                "background": "#681fc31a"
+            },
+            "coach-message": {
+                "avatar": {
+                    "background": "linear-gradient(219.11deg,rgba(255, 255, 255, 0.5) 9.91%, #ac75f0 123.32%,#681fc3 163.09%)"
+                }
+            }
+        },
+        "case-view": {
+            "header": {
+                "background": "#fff",
+                "foreground-color": "#001f5f"
+            },
+            "icon": {
+                "color": "#ffffff",
+                "background": "linear-gradient(45deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end))",
+                "box-shadow": "0 2px 2px -1px #0004, 0 1px 2px #0001, 0 4px 6px #0001, 0 9px 14px #0001, 0 16px 24px #0001"
+            },
+            "summary": {
+                "detached": true
+            },
+            "utilities": {
+                "detached": true,
+                "background": "#F3F4FA",
+                "icon-color": true
+            },
+            "assignments": {
+                "detached": false,
+                "background": "#fff"
+            },
+            "stages": {
+                "status": {
+                    "completed": {
+                        "background": "#f6fef6",
+                        "foreground-color": "#0b6a2b"
+                    },
+                    "current": {
+                        "background": "#3f57e4",
+                        "foreground-color": "#ffffff"
+                    }
+                }
+            }
+        },
+        "field-value-list": {
+            "inline": {
+                "detached": true
+            }
+        },
+        "label": {
+            "foreground-color": "#001d54b3",
+            "font-size": "s"
+        },
+        "link": {
+            "color": "#3f57e4"
+        },
+        "text": {
+            "brand-primary": {
+                "font-family": "\u0027Roboto Flex\u0027, sans-serif",
+                "font-weight": "600",
+                "font-size": "l"
+            },
+            "h1": {
+                "font-family": "Poppins, sans-serif"
+            },
+            "h2": {
+                "font-family": "Poppins, sans-serif",
+                "font-size": "xl"
+            },
+            "h3": {
+                "font-family": "Poppins, sans-serif"
+            },
+            "h4": {
+                "font-family": "Poppins, sans-serif"
+            },
+            "h5": {
+                "font-family": "Poppins, sans-serif"
+            },
+            "h6": {
+                "font-family": "Poppins, sans-serif"
+            }
+        }
+    }
+}

package/lib/utils/focusHeadingOrContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusHeadingOrContainer.d.ts","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,QAAA,MAAM,uBAAuB,GAAI,WAAW,UAAU,EAAE,QAAQ,MAAM,KAAG,OAmCxE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"focusHeadingOrContainer.d.ts","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,QAAA,MAAM,uBAAuB,GAAI,WAAW,UAAU,EAAE,QAAQ,MAAM,KAAG,OAWxE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/utils/focusHeadingOrContainer.js

@@ -1,3 +1,4 @@
+import focusNonInteractiveElement from './focusNonInteractiveElement';
 /**
  * Focuses the highest level heading element in a container, or the container itself if there are no headings.
  * @param container Node to query for a heading.
@@ -9,23 +10,7 @@ const focusHeadingOrContainer = (container, label) => {
     const target = heading ?? container;
     if (!(target instanceof HTMLElement || target instanceof SVGElement))
         return false;
-    if (target === container && !target.hasAttribute('aria-label') && label) {
-        target.setAttribute('aria-label', label);
-        target.addEventListener('focusout', () => {
-            target.removeAttribute('aria-label');
-        }, { once: true });
-    }
-    if (target.hasAttribute('tabindex')) {
-        target.focus();
-    }
-    else {
-        target.setAttribute('tabindex', '-1');
-        target.focus();
-        target.addEventListener('focusout', () => {
-            target.removeAttribute('tabindex');
-        }, { once: true });
-    }
-    return document.activeElement === target;
+    return focusNonInteractiveElement(target, target === heading ? undefined : label);
 };
 export default focusHeadingOrContainer;
 //# sourceMappingURL=focusHeadingOrContainer.js.map

package/lib/utils/focusHeadingOrContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusHeadingOrContainer.js","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,uBAAuB,GAAG,CAAC,SAAqB,EAAE,KAAc,EAAW,EAAE;IACjF,MAAM,OAAO,GAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAW,CAAC,MAAM,CACpE,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,EAC/C,IAAI,CACL,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,IAAI,SAAS,CAAC;IAEpC,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,IAAI,MAAM,YAAY,UAAU,CAAC;QAAE,OAAO,KAAK,CAAC;IAEnF,IAAI,MAAM,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,KAAK,EAAE,CAAC;QACxE,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACvC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;QACpC,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC;SAAM,CAAC;QACN,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACtC,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACrC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IACJ,CAAC;IACD,OAAO,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC;AAC3C,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["/**\n * Focuses the highest level heading element in a container, or the container itself if there are no headings.\n * @param container Node to query for a heading.\n * @param label Fallback label to apply to the container if focused.\n * @returns boolean whether the focus was successful or not (eg. element is not visible).\n */\nconst focusHeadingOrContainer = (container: ParentNode, label?: string): boolean => {\n  const heading = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce<HTMLHeadingElement | null>(\n    (el, tag) => el ?? container.querySelector(tag),\n    null\n  );\n\n  const target = heading ?? container;\n\n  if (!(target instanceof HTMLElement || target instanceof SVGElement)) return false;\n\n  if (target === container && !target.hasAttribute('aria-label') && label) {\n    target.setAttribute('aria-label', label);\n    target.addEventListener(\n      'focusout',\n      () => {\n        target.removeAttribute('aria-label');\n      },\n      { once: true }\n    );\n  }\n\n  if (target.hasAttribute('tabindex')) {\n    target.focus();\n  } else {\n    target.setAttribute('tabindex', '-1');\n    target.focus();\n    target.addEventListener(\n      'focusout',\n      () => {\n        target.removeAttribute('tabindex');\n      },\n      { once: true }\n    );\n  }\n  return document.activeElement === target;\n};\n\nexport default focusHeadingOrContainer;\n"]}
+{"version":3,"file":"focusHeadingOrContainer.js","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,MAAM,8BAA8B,CAAC;AAEtE;;;;;GAKG;AACH,MAAM,uBAAuB,GAAG,CAAC,SAAqB,EAAE,KAAc,EAAW,EAAE;IACjF,MAAM,OAAO,GAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAW,CAAC,MAAM,CACpE,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,EAC/C,IAAI,CACL,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,IAAI,SAAS,CAAC;IAEpC,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,IAAI,MAAM,YAAY,UAAU,CAAC;QAAE,OAAO,KAAK,CAAC;IAEnF,OAAO,0BAA0B,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AACpF,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["import focusNonInteractiveElement from './focusNonInteractiveElement';\n\n/**\n * Focuses the highest level heading element in a container, or the container itself if there are no headings.\n * @param container Node to query for a heading.\n * @param label Fallback label to apply to the container if focused.\n * @returns boolean whether the focus was successful or not (eg. element is not visible).\n */\nconst focusHeadingOrContainer = (container: ParentNode, label?: string): boolean => {\n  const heading = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce<HTMLHeadingElement | null>(\n    (el, tag) => el ?? container.querySelector(tag),\n    null\n  );\n\n  const target = heading ?? container;\n\n  if (!(target instanceof HTMLElement || target instanceof SVGElement)) return false;\n\n  return focusNonInteractiveElement(target, target === heading ? undefined : label);\n};\n\nexport default focusHeadingOrContainer;\n"]}

package/lib/utils/focusNonInteractiveElement.d.ts

@@ -4,6 +4,6 @@
  * @param label - Fallback label to apply to the element if focused.
  * @returns Whether the focus was successful or not (eg. element is not visible).
  */
-declare const focusNonInteractiveElement: (element: HTMLElement, label?: string) => boolean;
+declare const focusNonInteractiveElement: (element: HTMLElement | SVGElement, label?: string) => boolean;
 export default focusNonInteractiveElement;
 //# sourceMappingURL=focusNonInteractiveElement.d.ts.map

package/lib/utils/focusNonInteractiveElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusNonInteractiveElement.d.ts","sourceRoot":"","sources":["../../src/utils/focusNonInteractiveElement.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,QAAA,MAAM,0BAA0B,GAAI,SAAS,WAAW,EAAE,QAAQ,MAAM,KAAG,OA2B1E,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"focusNonInteractiveElement.d.ts","sourceRoot":"","sources":["../../src/utils/focusNonInteractiveElement.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,QAAA,MAAM,0BAA0B,GAAI,SAAS,WAAW,GAAG,UAAU,EAAE,QAAQ,MAAM,KAAG,OA2BvF,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/lib/utils/focusNonInteractiveElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusNonInteractiveElement.js","sourceRoot":"","sources":["../../src/utils/focusNonInteractiveElement.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,0BAA0B,GAAG,CAAC,OAAoB,EAAE,KAAc,EAAW,EAAE;IACnF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,KAAK,EAAE,CAAC;QACjD,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QAC1C,OAAO,CAAC,gBAAgB,CACtB,UAAU,EACV,GAAG,EAAE;YACH,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACxC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;QACrC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACvC,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,CAAC,gBAAgB,CACtB,UAAU,EACV,GAAG,EAAE;YACH,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IACJ,CAAC;IAED,OAAO,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC;AAC5C,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC","sourcesContent":["/**\n * Focuses the provided non-interactive element.\n * @param element - HTML element to apply focus to.\n * @param label - Fallback label to apply to the element if focused.\n * @returns Whether the focus was successful or not (eg. element is not visible).\n */\nconst focusNonInteractiveElement = (element: HTMLElement, label?: string): boolean => {\n  if (!element.hasAttribute('aria-label') && label) {\n    element.setAttribute('aria-label', label);\n    element.addEventListener(\n      'focusout',\n      () => {\n        element.removeAttribute('aria-label');\n      },\n      { once: true }\n    );\n  }\n\n  if (element.hasAttribute('tabindex')) {\n    element.focus();\n  } else {\n    element.setAttribute('tabindex', '-1');\n    element.focus();\n    element.addEventListener(\n      'focusout',\n      () => {\n        element.removeAttribute('tabindex');\n      },\n      { once: true }\n    );\n  }\n\n  return document.activeElement === element;\n};\n\nexport default focusNonInteractiveElement;\n"]}
+{"version":3,"file":"focusNonInteractiveElement.js","sourceRoot":"","sources":["../../src/utils/focusNonInteractiveElement.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,0BAA0B,GAAG,CAAC,OAAiC,EAAE,KAAc,EAAW,EAAE;IAChG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,KAAK,EAAE,CAAC;QACjD,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QAC1C,OAAO,CAAC,gBAAgB,CACtB,UAAU,EACV,GAAG,EAAE;YACH,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACxC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;QACrC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACvC,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,CAAC,gBAAgB,CACtB,UAAU,EACV,GAAG,EAAE;YACH,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IACJ,CAAC;IAED,OAAO,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC;AAC5C,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC","sourcesContent":["/**\n * Focuses the provided non-interactive element.\n * @param element - HTML element to apply focus to.\n * @param label - Fallback label to apply to the element if focused.\n * @returns Whether the focus was successful or not (eg. element is not visible).\n */\nconst focusNonInteractiveElement = (element: HTMLElement | SVGElement, label?: string): boolean => {\n  if (!element.hasAttribute('aria-label') && label) {\n    element.setAttribute('aria-label', label);\n    element.addEventListener(\n      'focusout',\n      () => {\n        element.removeAttribute('aria-label');\n      },\n      { once: true }\n    );\n  }\n\n  if (element.hasAttribute('tabindex')) {\n    element.focus();\n  } else {\n    element.setAttribute('tabindex', '-1');\n    element.focus();\n    element.addEventListener(\n      'focusout',\n      () => {\n        element.removeAttribute('tabindex');\n      },\n      { once: true }\n    );\n  }\n\n  return document.activeElement === element;\n};\n\nexport default focusNonInteractiveElement;\n"]}

package/lib/utils/formatListToLocaleString.d.ts

@@ -5,7 +5,6 @@ import type { TranslationFunction, TranslationPack } from '../i18n';
  * @param t translation function used internally
  * @param locale locale tag to get the localization rules for
  * @param options formatting options
- * @returns
  */
 declare const formatListToLocaleString: (list: string[], t: TranslationFunction<TranslationPack>, locale: string, { count, separator }?: {
     count?: number;

package/lib/utils/formatListToLocaleString.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatListToLocaleString.d.ts","sourceRoot":"","sources":["../../src/utils/formatListToLocaleString.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEpE;;;;;;;GAOG;AACH,QAAA,MAAM,wBAAwB,GAC5B,MAAM,MAAM,EAAE,EACd,GAAG,mBAAmB,CAAC,eAAe,CAAC,EACvC,QAAQ,MAAM,EACd,uBAGG;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACf,KACL,MAYF,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"formatListToLocaleString.d.ts","sourceRoot":"","sources":["../../src/utils/formatListToLocaleString.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEpE;;;;;;GAMG;AACH,QAAA,MAAM,wBAAwB,GAC5B,MAAM,MAAM,EAAE,EACd,GAAG,mBAAmB,CAAC,eAAe,CAAC,EACvC,QAAQ,MAAM,EACd,uBAGG;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACf,KACL,MAYF,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/lib/utils/formatListToLocaleString.js

@@ -4,7 +4,6 @@
  * @param t translation function used internally
  * @param locale locale tag to get the localization rules for
  * @param options formatting options
- * @returns
  */
 const formatListToLocaleString = (list, t, locale, { count = list.length, separator } = {}) => {
     const formattedList = count > 3 ? list.slice(0, 2) : list;

package/lib/utils/formatListToLocaleString.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatListToLocaleString.js","sourceRoot":"","sources":["../../src/utils/formatListToLocaleString.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,wBAAwB,GAAG,CAC/B,IAAc,EACd,CAAuC,EACvC,MAAc,EACd,EACE,KAAK,GAAG,IAAI,CAAC,MAAM,EACnB,SAAS,KAIP,EAAE,EACE,EAAE;IACV,MAAM,aAAa,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1D,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1E,MAAM,QAAQ,GACZ,SAAS,GAAG,CAAC;QACX,CAAC,CAAC,CAAC,GAAG,aAAa,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACxE,CAAC,CAAC,aAAa,CAAC;IAEpB,IAAI,SAAS,IAAI,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC;QAAE,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC;IAElF,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,eAAe,wBAAwB,CAAC","sourcesContent":["import type { TranslationFunction, TranslationPack } from '../i18n';\n\n/**\n * Function generates string representation of the given list accordingly to localization rules of given locale.\n * @param list list of strings to format\n * @param t translation function used internally\n * @param locale locale tag to get the localization rules for\n * @param options formatting options\n * @returns\n */\nconst formatListToLocaleString = (\n  list: string[],\n  t: TranslationFunction<TranslationPack>,\n  locale: string,\n  {\n    count = list.length,\n    separator\n  }: {\n    count?: number;\n    separator?: string;\n  } = {}\n): string => {\n  const formattedList = count > 3 ? list.slice(0, 2) : list;\n  const remainder = formattedList.length ? count - formattedList.length : 0;\n\n  const toFormat =\n    remainder > 0\n      ? [...formattedList, t('more_count', [remainder], { count: remainder })]\n      : formattedList;\n\n  if (separator || !('ListFormat' in Intl)) return toFormat.join(separator ?? ', ');\n\n  return new Intl.ListFormat(locale, { style: 'long' }).format(toFormat);\n};\n\nexport default formatListToLocaleString;\n"]}
+{"version":3,"file":"formatListToLocaleString.js","sourceRoot":"","sources":["../../src/utils/formatListToLocaleString.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,wBAAwB,GAAG,CAC/B,IAAc,EACd,CAAuC,EACvC,MAAc,EACd,EACE,KAAK,GAAG,IAAI,CAAC,MAAM,EACnB,SAAS,KAIP,EAAE,EACE,EAAE;IACV,MAAM,aAAa,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1D,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1E,MAAM,QAAQ,GACZ,SAAS,GAAG,CAAC;QACX,CAAC,CAAC,CAAC,GAAG,aAAa,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACxE,CAAC,CAAC,aAAa,CAAC;IAEpB,IAAI,SAAS,IAAI,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC;QAAE,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC;IAElF,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,eAAe,wBAAwB,CAAC","sourcesContent":["import type { TranslationFunction, TranslationPack } from '../i18n';\n\n/**\n * Function generates string representation of the given list accordingly to localization rules of given locale.\n * @param list list of strings to format\n * @param t translation function used internally\n * @param locale locale tag to get the localization rules for\n * @param options formatting options\n */\nconst formatListToLocaleString = (\n  list: string[],\n  t: TranslationFunction<TranslationPack>,\n  locale: string,\n  {\n    count = list.length,\n    separator\n  }: {\n    count?: number;\n    separator?: string;\n  } = {}\n): string => {\n  const formattedList = count > 3 ? list.slice(0, 2) : list;\n  const remainder = formattedList.length ? count - formattedList.length : 0;\n\n  const toFormat =\n    remainder > 0\n      ? [...formattedList, t('more_count', [remainder], { count: remainder })]\n      : formattedList;\n\n  if (separator || !('ListFormat' in Intl)) return toFormat.join(separator ?? ', ');\n\n  return new Intl.ListFormat(locale, { style: 'long' }).format(toFormat);\n};\n\nexport default formatListToLocaleString;\n"]}

package/lib/utils/getAllPopovers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getAllPopovers.d.ts","sourceRoot":"","sources":["../../src/utils/getAllPopovers.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAC;AAGjB,OAAO,QAAQ,SAAS,CAAC;IACvB,UAAiB,aAAa;QAC5B,UAAU,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;KAC3C;CACF;AAMD,eAAO,MAAM,UAAU,+BAEgB,CAAC;AAExC,QAAA,MAAM,cAAc,GAAI,QAAQ,UAAU,KAAG,OAAO,EAkBnD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"getAllPopovers.d.ts","sourceRoot":"","sources":["../../src/utils/getAllPopovers.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAC;AAIjB,OAAO,QAAQ,SAAS,CAAC;IACvB,UAAiB,aAAa;QAC5B,UAAU,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;KAC3C;CACF;AAMD,eAAO,MAAM,UAAU,+BAEgB,CAAC;AAExC,QAAA,MAAM,cAAc,GAAI,QAAQ,UAAU,KAAG,OAAO,EAkBnD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/utils/getAllPopovers.js

@@ -1,4 +1,5 @@
 import '../init';
+import isInstance from './isInstance';
 import windowIsAvailable from './windowIsAvailable';
 if (windowIsAvailable) {
     window.cosmos.popoverMap ??= new WeakMap();
@@ -8,7 +9,7 @@ export const popoverMap = windowIsAvailable
     : new WeakMap();
 const getAllPopovers = (parent) => {
     const rootNode = parent.getRootNode();
-    if (!(rootNode instanceof Document) && !(rootNode instanceof DocumentFragment))
+    if (!isInstance(rootNode, Document, DocumentFragment))
         return [];
     const popoverTargets = [...parent.querySelectorAll('[data-popover-target]')];
     return popoverTargets.flatMap(el => {