boreal-ui 0.0.71 → 0.0.73

package/dist/core/{NavBar-DKDzRFJ6.cjs → NavBar-Dq1f1NSn.cjs}

@@ -3,7 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
-const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
 const slugify = (s) => s.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9]/g, "");
 const BaseNavBar = ({
   items,
@@ -14,7 +14,12 @@ const BaseNavBar = ({
   rounding = borealStyleConfig.getDefaultRounding(),
   shadow = borealStyleConfig.getDefaultShadow(),
   className = "",
-  "data-testid": testId = "nav-bar"
+  "data-testid": testId = "nav-bar",
+  "aria-label": ariaLabel = "Main navigation",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "list-aria-label": listAriaLabel = "Main navigation items",
+  getItemAriaLabel
 }) => {
   const wrapperClass = React.useMemo(
     () => classNames.combineClassNames(classMap.container, classMap[theme], className),
@@ -31,38 +36,58 @@ const BaseNavBar = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
     {
-      "aria-label": "Main navigation",
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
       className: wrapperClass,
       "data-testid": `${testId}-nav-bar`,
-      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classMap.list, children: items.map((item) => {
-        const isActive = (isItemActive == null ? void 0 : isItemActive(item)) ?? false;
-        const slug = slugify(item.label || item.path);
-        return /* @__PURE__ */ jsxRuntime.jsx("li", { className: classMap.listItem, children: /* @__PURE__ */ jsxRuntime.jsx(
-          LinkWrapper,
-          {
-            href: item.path,
-            isActive,
-            className: classNames.combineClassNames(
-              itemClass,
-              isActive && classMap.item_active
-            ),
-            "data-testid": `${testId}-nav-item-${slug}`,
-            "aria-current": isActive ? "page" : void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classMap.linkContent, children: [
-              item.icon && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: classMap.icon,
-                  "aria-hidden": "true",
-                  "data-testid": `${testId}-nav-icon-${slug}`,
-                  children: item.icon
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: classMap.label, children: item.label })
-            ] })
-          }
-        ) }, `${item.path}-${slug}`);
-      }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "ul",
+        {
+          className: classMap.list,
+          "aria-label": listAriaLabel,
+          "data-testid": `${testId}-nav-list`,
+          children: items.map((item) => {
+            const isActive = (isItemActive == null ? void 0 : isItemActive(item)) ?? false;
+            const slug = slugify(item.label || item.path);
+            const itemAriaLabel = (getItemAriaLabel == null ? void 0 : getItemAriaLabel(item)) ?? item.label;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "li",
+              {
+                className: classMap.listItem,
+                "data-testid": `${testId}-nav-list-item-${slug}`,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  LinkWrapper,
+                  {
+                    href: item.path,
+                    isActive,
+                    className: classNames.combineClassNames(
+                      itemClass,
+                      isActive && classMap.item_active
+                    ),
+                    "data-testid": `${testId}-nav-item-${slug}`,
+                    "aria-current": isActive ? "page" : void 0,
+                    "aria-label": itemAriaLabel,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classMap.linkContent, children: [
+                      item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: classMap.icon,
+                          "aria-hidden": "true",
+                          "data-testid": `${testId}-nav-icon-${slug}`,
+                          children: item.icon
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: classMap.label, children: item.label })
+                    ] })
+                  }
+                )
+              },
+              `${item.path}-${slug}`
+            );
+          })
+        }
+      )
     }
   );
 };
@@ -130,4 +155,4 @@ const NavBar = ({
 };
 NavBar.displayName = "NavBar";
 exports.NavBar = NavBar;
-//# sourceMappingURL=NavBar-DKDzRFJ6.cjs.map
+//# sourceMappingURL=NavBar-Dq1f1NSn.cjs.map

package/dist/core/NavBar-Dq1f1NSn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar-Dq1f1NSn.cjs","sources":["../../src/components/NavBar/NavBarBase.tsx","../../src/components/NavBar/core/NavBar.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\nimport { BaseNavBarProps } from \"./NavBar.types\";\r\n\r\nconst slugify = (s: string) =>\r\n  s\r\n    .toLowerCase()\r\n    .trim()\r\n    .replace(/\\s+/g, \"-\")\r\n    .replace(/[^a-z0-9]/g, \"\");\r\n\r\nconst BaseNavBar: React.FC<BaseNavBarProps> = ({\r\n  items,\r\n  LinkWrapper,\r\n  classMap,\r\n  isItemActive,\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  className = \"\",\r\n  \"data-testid\": testId = \"nav-bar\",\r\n  \"aria-label\": ariaLabel = \"Main navigation\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"list-aria-label\": listAriaLabel = \"Main navigation items\",\r\n  getItemAriaLabel,\r\n}) => {\r\n  const wrapperClass = useMemo(\r\n    () => combineClassNames(classMap.container, classMap[theme], className),\r\n    [classMap, theme, className],\r\n  );\r\n\r\n  const itemClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.item,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n      ),\r\n    [classMap, shadow, rounding],\r\n  );\r\n\r\n  return (\r\n    <nav\r\n      aria-label={ariaLabelledBy ? undefined : ariaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-describedby={ariaDescribedBy}\r\n      className={wrapperClass}\r\n      data-testid={`${testId}-nav-bar`}\r\n    >\r\n      <ul\r\n        className={classMap.list}\r\n        aria-label={listAriaLabel}\r\n        data-testid={`${testId}-nav-list`}\r\n      >\r\n        {items.map((item) => {\r\n          const isActive = isItemActive?.(item) ?? false;\r\n          const slug = slugify(item.label || item.path);\r\n          const itemAriaLabel = getItemAriaLabel?.(item) ?? item.label;\r\n\r\n          return (\r\n            <li\r\n              key={`${item.path}-${slug}`}\r\n              className={classMap.listItem}\r\n              data-testid={`${testId}-nav-list-item-${slug}`}\r\n            >\r\n              <LinkWrapper\r\n                href={item.path}\r\n                isActive={isActive}\r\n                className={combineClassNames(\r\n                  itemClass,\r\n                  isActive && classMap.item_active,\r\n                )}\r\n                data-testid={`${testId}-nav-item-${slug}`}\r\n                aria-current={isActive ? \"page\" : undefined}\r\n                aria-label={itemAriaLabel}\r\n              >\r\n                <span className={classMap.linkContent}>\r\n                  {item.icon && (\r\n                    <span\r\n                      className={classMap.icon}\r\n                      aria-hidden=\"true\"\r\n                      data-testid={`${testId}-nav-icon-${slug}`}\r\n                    >\r\n                      {item.icon}\r\n                    </span>\r\n                  )}\r\n                  <span className={classMap.label}>{item.label}</span>\r\n                </span>\r\n              </LinkWrapper>\r\n            </li>\r\n          );\r\n        })}\r\n      </ul>\r\n    </nav>\r\n  );\r\n};\r\n\r\nBaseNavBar.displayName = \"BaseNavBar\";\r\nexport default BaseNavBar;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport BaseNavBar from \"../NavBarBase\";\r\nimport \"./NavBar.scss\";\r\nimport { NavBarProps, NavItem } from \"../NavBar.types\";\r\n\r\nconst classes = {\r\n  container: \"nav\",\r\n  item: \"nav_item\",\r\n  list: \"nav_list\",\r\n  listItem: \"nav_list_item\",\r\n  item_active: \"nav_active\",\r\n  icon: \"nav_icon_container\",\r\n  label: \"nav_label\",\r\n  linkContent: \"nav_link_container\",\r\n\r\n  primary: \"nav_primary\",\r\n  secondary: \"nav_secondary\",\r\n  tertiary: \"nav_tertiary\",\r\n  quaternary: \"nav_quaternary\",\r\n  clear: \"nav_clear\",\r\n\r\n  shadowNone: \"nav_shadow-None\",\r\n  shadowLight: \"nav_shadow-Light\",\r\n  shadowMedium: \"nav_shadow-Medium\",\r\n  shadowStrong: \"nav_shadow-Strong\",\r\n  shadowIntense: \"nav_shadow-Intense\",\r\n\r\n  roundNone: \"nav_round-None\",\r\n  roundSmall: \"nav_round-Small\",\r\n  roundMedium: \"nav_round-Medium\",\r\n  roundLarge: \"nav_round-Large\",\r\n  roundFull: \"nav_round-Full\",\r\n};\r\n\r\nconst normalizePath = (p: string) =>\r\n  p.endsWith(\"/\") && p.length > 1 ? p.slice(0, -1) : p;\r\n\r\nconst NavBar: React.FC<NavBarProps> = ({\r\n  isItemActive: consumerIsItemActive,\r\n  ...props\r\n}) => {\r\n  const [pathname, setPathname] = useState(\"/\");\r\n\r\n  useEffect(() => {\r\n    setPathname(window.location.pathname || \"/\");\r\n  }, []);\r\n\r\n  const defaultIsItemActive = (item: NavItem) =>\r\n    normalizePath(item.path) === normalizePath(pathname);\r\n\r\n  const resolvedIsItemActive = consumerIsItemActive ?? defaultIsItemActive;\r\n\r\n  return (\r\n    <BaseNavBar\r\n      {...props}\r\n      isItemActive={resolvedIsItemActive}\r\n      LinkWrapper={({\r\n        href,\r\n        children,\r\n        className,\r\n        isActive,\r\n        \"data-testid\": testId,\r\n      }) => (\r\n        <a\r\n          href={href}\r\n          className={className}\r\n          aria-current={isActive ? \"page\" : undefined}\r\n          data-testid={testId}\r\n        >\r\n          {children}\r\n        </a>\r\n      )}\r\n      classMap={classes}\r\n    />\r\n  );\r\n};\r\n\r\nNavBar.displayName = \"NavBar\";\r\nexport default NavBar;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useMemo","combineClassNames","capitalize","jsx","jsxs","useState","useEffect"],"mappings":"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"}

package/dist/core/NavBar.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const NavBar = require("./NavBar-DKDzRFJ6.cjs");
+const NavBar = require("./NavBar-Dq1f1NSn.cjs");
 module.exports = NavBar.NavBar;
 //# sourceMappingURL=NavBar.cjs.js.map

package/dist/core/NavBar.js

@@ -1,4 +1,4 @@
-import { N } from "./NavBar-BcL7Dh52.js";
+import { N } from "./NavBar-DelYH3IR.js";
 export {
   N as default
 };

package/dist/core/{NotificationCenter-DfOOEt9N.cjs → NotificationCenter-CsKJTZhk.cjs}

@@ -4,10 +4,10 @@ const React = require("react");
 const CloseIcon = require("./CloseIcon-DSnN6ggf.cjs");
 const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
-const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
 ;/* empty css                   */
-const Button = require("./Button-zvElXSem.cjs");
-const IconButton = require("./IconButton-Bio6Azm-.cjs");
+const Button = require("./Button-nxtJFOWD.cjs");
+const IconButton = require("./IconButton-C_ktew-6.cjs");
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -168,6 +168,16 @@ const BaseNotificationCenter = ({
   controlShadow = borealStyleConfig.getDefaultShadow(),
   notificationRounding = borealStyleConfig.getDefaultRounding(),
   notificationShadow = borealStyleConfig.getDefaultShadow(),
+  "aria-label": ariaLabel = "Notification center",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "list-aria-label": listAriaLabel,
+  liveRegionPoliteness = "polite",
+  liveRegionRelevant = "additions text",
+  liveRegionAtomic = false,
+  emptyMessage = "No notifications.",
+  dismissButtonLabelPrefix = "Dismiss notification",
+  clearAllAriaLabel = "Clear all notifications",
   Button: Button2,
   IconButton: IconButton2,
   classMap,
@@ -175,6 +185,8 @@ const BaseNotificationCenter = ({
 }) => {
   const timers = React.useRef({});
   const prevIds = React.useRef(/* @__PURE__ */ new Set());
+  const internalTitleId = `${testId}-title`;
+  const resolvedLabelledBy = ariaLabelledBy || internalTitleId;
   React.useEffect(() => {
     if (maxNotifications && notifications.length > maxNotifications && clearOldOnOverflow && setNotifications) {
       const overflow = notifications.length - maxNotifications;
@@ -233,11 +245,13 @@ const BaseNotificationCenter = ({
     {
       className: classMap.wrapper,
       role: "region",
-      "aria-label": "Notification center",
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+      "aria-labelledby": resolvedLabelledBy,
+      "aria-describedby": ariaDescribedBy,
       "data-testid": testId,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classMap.header, "data-testid": `${testId}-header`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { id: `${testId}-title`, children: "Notifications" }),
+          !ariaLabelledBy && /* @__PURE__ */ jsxRuntime.jsx("h3", { id: internalTitleId, children: "Notifications" }),
           showClearAll && notifications.length > 0 && onClearAll && /* @__PURE__ */ jsxRuntime.jsx(
             Button2,
             {
@@ -247,7 +261,7 @@ const BaseNotificationCenter = ({
               shadow: controlShadow,
               className: classMap.clearAll,
               onClick: onClearAll,
-              "aria-label": "Clear all notifications",
+              "aria-label": clearAllAriaLabel,
               "data-testid": `${testId}-clear-all`,
               type: "button",
               children: "Clear All"
@@ -258,72 +272,104 @@ const BaseNotificationCenter = ({
           "div",
           {
             role: "status",
-            "aria-live": "polite",
-            "aria-relevant": "additions text",
+            "aria-live": liveRegionPoliteness,
+            "aria-relevant": liveRegionRelevant,
+            "aria-atomic": liveRegionAtomic,
             className: classMap.body,
-            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classMap.list, "aria-labelledby": `${testId}-title`, children: notifications.map((note, index) => {
-              var _a;
-              const Icon = themeIcons[note.type || "info"];
-              const noteTestId = `${testId}-item-${note.id}`;
-              const timestampStr = (_a = note.timestamp) == null ? void 0 : _a.toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit"
-              });
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "li",
-                {
-                  className: classNames.combineClassNames(
-                    notificationClass,
-                    classMap[note.type || "info"]
-                  ),
-                  "data-testid": noteTestId,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Icon,
-                      {
-                        className: classMap.icon,
-                        "aria-hidden": "true",
-                        focusable: false
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classMap.content, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: classMap.message,
-                          "data-testid": `${noteTestId}-message`,
-                          children: note.message
-                        }
+            "data-testid": `${testId}-live-region`,
+            children: notifications.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: classMap.empty, "data-testid": `${testId}-empty`, children: emptyMessage }) : /* @__PURE__ */ jsxRuntime.jsx(
+              "ul",
+              {
+                className: classMap.list,
+                "aria-labelledby": listAriaLabel ? void 0 : resolvedLabelledBy,
+                "aria-label": listAriaLabel,
+                children: notifications.map((note, index) => {
+                  var _a;
+                  const Icon = themeIcons[note.type || "info"];
+                  const noteTestId = `${testId}-item-${note.id}`;
+                  const messageId = `${noteTestId}-message`;
+                  const timestampId = `${noteTestId}-timestamp`;
+                  const descriptionId = note.ariaDescription ? `${noteTestId}-description` : void 0;
+                  const describedByIds = [
+                    note.timestamp ? timestampId : void 0,
+                    descriptionId
+                  ].filter(Boolean).join(" ");
+                  const timestampStr = (_a = note.timestamp) == null ? void 0 : _a.toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit"
+                  });
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "li",
+                    {
+                      className: classNames.combineClassNames(
+                        notificationClass,
+                        classMap[note.type || "info"]
                       ),
-                      note.timestamp && /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: classMap.timestamp,
-                          "data-testid": `${noteTestId}-timestamp`,
-                          children: timestampStr
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      IconButton2,
-                      {
-                        className: classMap.close,
-                        state: "error",
-                        size: "small",
-                        outline: true,
-                        icon: CloseIcon.CloseIcon,
-                        onClick: () => onRemove(note.id),
-                        ariaLabel: `Dismiss notification ${index + 1}`,
-                        title: "Dismiss",
-                        "data-testid": `${noteTestId}-dismiss`,
-                        type: "button"
-                      }
-                    )
-                  ]
-                },
-                note.id
-              );
-            }) })
+                      role: "listitem",
+                      "aria-label": note.ariaLabel,
+                      "aria-labelledby": note.ariaLabel ? void 0 : messageId,
+                      "aria-describedby": describedByIds || void 0,
+                      "data-testid": noteTestId,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          Icon,
+                          {
+                            className: classMap.icon,
+                            "aria-hidden": "true",
+                            focusable: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classMap.content, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              id: messageId,
+                              className: classMap.message,
+                              "data-testid": `${noteTestId}-message`,
+                              children: note.message
+                            }
+                          ),
+                          note.timestamp && /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              id: timestampId,
+                              className: classMap.timestamp,
+                              "data-testid": `${noteTestId}-timestamp`,
+                              children: timestampStr
+                            }
+                          ),
+                          note.ariaDescription && /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              id: descriptionId,
+                              className: classMap.srOnly,
+                              "data-testid": `${noteTestId}-description`,
+                              children: note.ariaDescription
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          IconButton2,
+                          {
+                            className: classMap.close,
+                            state: "error",
+                            size: "small",
+                            outline: true,
+                            icon: CloseIcon.CloseIcon,
+                            onClick: () => onRemove(note.id),
+                            "aria-label": `${dismissButtonLabelPrefix} ${index + 1}`,
+                            title: "Dismiss",
+                            "data-testid": `${noteTestId}-dismiss`,
+                            type: "button"
+                          }
+                        )
+                      ]
+                    },
+                    note.id
+                  );
+                })
+              }
+            )
           }
         )
       ]
@@ -371,5 +417,4 @@ const NotificationCenter = (props) => {
 };
 NotificationCenter.displayName = "NotificationCenter";
 exports.NotificationCenter = NotificationCenter;
-exports.themeIcons = themeIcons;
-//# sourceMappingURL=NotificationCenter-DfOOEt9N.cjs.map
+//# sourceMappingURL=NotificationCenter-CsKJTZhk.cjs.map