boreal-ui 0.0.31 → 0.0.33

package/dist/core/Sidebar-BoMGJwqC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar-BoMGJwqC.cjs","sources":["../../src/components/Sidebar/SidebarBase.tsx","../../src/components/Sidebar/core/Sidebar.tsx"],"sourcesContent":["import React, { useState, useMemo, useRef, useEffect } from \"react\";\r\nimport { combineClassNames } from \"@/utils/classNames\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"@/config/boreal-style-config\";\r\nimport { capitalize } from \"@/utils/capitalize\";\r\nimport { ChevronDownIcon } from \"@/Icons\";\r\nimport { BaseSidebarProps } from \"./Sidebar.types\";\r\n\r\nconst SidebarBase: React.FC<BaseSidebarProps> = ({\r\n  links,\r\n  classMap,\r\n  currentPath,\r\n  LinkComponent = \"a\",\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  state = \"\",\r\n  showFooter = false,\r\n  footerLinks,\r\n  footerVersion,\r\n  outline = false,\r\n  className = \"\",\r\n  \"data-testid\": testId = \"sidebar\",\r\n  ariaLabel = \"Sidebar navigation\",\r\n  ...rest\r\n}) => {\r\n  const [openItems, setOpenItems] = useState<Record<string, boolean>>({});\r\n\r\n  const idsRef = useRef<Record<string, string>>({});\r\n  const seqRef = useRef(0);\r\n  const idFor = (label: string) => {\r\n    if (!idsRef.current[label]) {\r\n      const slug = label\r\n        .toLowerCase()\r\n        .replace(/\\s+/g, \"-\")\r\n        .replace(/[^a-z0-9_-]/g, \"\");\r\n      idsRef.current[label] = `${testId}-section-${slug}-${seqRef.current++}`;\r\n    }\r\n    return idsRef.current[label];\r\n  };\r\n\r\n  useEffect(() => {\r\n    const next: Record<string, boolean> = {};\r\n\r\n    const walk = (nodes: typeof links) => {\r\n      for (const n of nodes) {\r\n        if (n.children?.length) {\r\n          const anyChildActive =\r\n            n.children.some((c) => c.href && c.href === currentPath) ||\r\n            (n.children && walk(n.children));\r\n          if (anyChildActive) next[n.label] = true;\r\n        }\r\n      }\r\n      return nodes.some(\r\n        (n) =>\r\n          (n.href && n.href === currentPath) ||\r\n          (!!n.children?.length &&\r\n            n.children!.some((c) => c.href === currentPath))\r\n      );\r\n    };\r\n\r\n    walk(links);\r\n    setOpenItems((prev) => ({ ...prev, ...next }));\r\n  }, [currentPath, links]);\r\n\r\n  const toggleItem = (key: string) =>\r\n    setOpenItems((prev) => ({ ...prev, [key]: !prev[key] }));\r\n\r\n  const submenuRefs = useRef<Record<string, HTMLDivElement | null>>({});\r\n  const setSubmenuRef = (key: string, el: HTMLDivElement | null) => {\r\n    submenuRefs.current[key] = el;\r\n  };\r\n  const getSubmenuHeight = (key: string) => {\r\n    const el = submenuRefs.current[key];\r\n    return el ? `${el.scrollHeight}px` : \"0px\";\r\n  };\r\n\r\n  const containerClasses = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.wrapper,\r\n        className,\r\n        classMap[theme],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        outline && classMap.outline\r\n      ),\r\n    [classMap, className, theme, state, outline, rounding, shadow]\r\n  );\r\n\r\n  const renderLinks = (items: typeof links, isChild = false) => (\r\n    <ul\r\n      className={combineClassNames(\r\n        classMap.list,\r\n        isChild && classMap.childList\r\n      )}\r\n      data-testid={`${testId}-list`}\r\n    >\r\n      {items.map(({ label, href, children, icon }, idx) => {\r\n        const key = `${label}-${idx}`;\r\n        const isActive = !!href && currentPath === href;\r\n        const isOpen = !!openItems[label];\r\n        const sectionId = idFor(label);\r\n        const buttonId = `${sectionId}-button`;\r\n        const panelId = `${sectionId}-panel`;\r\n\r\n        return (\r\n          <li\r\n            key={key}\r\n            className={classMap.item}\r\n            data-testid={`${testId}-listItem`}\r\n          >\r\n            {children && children.length > 0 ? (\r\n              <>\r\n                <button\r\n                  type=\"button\"\r\n                  id={buttonId}\r\n                  className={combineClassNames(\r\n                    classMap.link,\r\n                    isOpen && classMap.active\r\n                  )}\r\n                  onClick={() => toggleItem(label)}\r\n                  aria-expanded={isOpen}\r\n                  aria-controls={panelId}\r\n                  data-testid={`${testId}-expandItemButton`}\r\n                >\r\n                  {icon && <span className={classMap.icon}>{icon}</span>}\r\n                  <span data-testid={`${testId}-expandItemLabel`}>{label}</span>\r\n                  <ChevronDownIcon\r\n                    className={combineClassNames(\r\n                      classMap.chevron,\r\n                      isOpen && classMap.chevronOpen\r\n                    )}\r\n                    aria-hidden=\"true\"\r\n                    focusable={false}\r\n                    data-testid={`${testId}-expandIcon`}\r\n                  />\r\n                </button>\r\n\r\n                <div\r\n                  id={panelId}\r\n                  ref={(el) => setSubmenuRef(label, el)}\r\n                  className={combineClassNames(\r\n                    classMap.submenu,\r\n                    isOpen && classMap.submenuOpen\r\n                  )}\r\n                  role=\"group\"\r\n                  aria-labelledby={buttonId}\r\n                  hidden={!isOpen}\r\n                  data-testid={`${testId}-subMenu`}\r\n                >\r\n                  {renderLinks(children, true)}\r\n                </div>\r\n              </>\r\n            ) : href ? (\r\n              <LinkComponent\r\n                href={href}\r\n                className={combineClassNames(\r\n                  classMap.link,\r\n                  isChild && classMap.childLink,\r\n                  isActive && classMap.active\r\n                )}\r\n                aria-current={isActive ? \"page\" : undefined}\r\n                data-testid={`${testId}-sidebarLink`}\r\n              >\r\n                {icon && <span className={classMap.icon}>{icon}</span>}\r\n                {label}\r\n              </LinkComponent>\r\n            ) : (\r\n              <span\r\n                className={combineClassNames(\r\n                  classMap.link,\r\n                  isChild && classMap.childLink\r\n                )}\r\n                data-testid={`${testId}-sidebarLabel`}\r\n              >\r\n                {icon && <span className={classMap.icon}>{icon}</span>}\r\n                {label}\r\n              </span>\r\n            )}\r\n          </li>\r\n        );\r\n      })}\r\n    </ul>\r\n  );\r\n\r\n  return (\r\n    <nav\r\n      className={containerClasses}\r\n      aria-label={ariaLabel}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      <div className={classMap.nav}>{renderLinks(links)}</div>\r\n\r\n      {showFooter && (\r\n        <footer className={classMap.footer} data-testid={`${testId}-footer`}>\r\n          {footerLinks?.map(({ label, href }, i) => (\r\n            <LinkComponent\r\n              key={`${label}-${i}`}\r\n              href={href}\r\n              className={classMap.footerLink}\r\n              data-testid={`${testId}-footerLink`}\r\n            >\r\n              {label}\r\n            </LinkComponent>\r\n          ))}\r\n          {footerVersion && (\r\n            <span\r\n              className={classMap.footerVersion}\r\n              data-testid={`${testId}-footerVersion`}\r\n            >\r\n              {footerVersion}\r\n            </span>\r\n          )}\r\n        </footer>\r\n      )}\r\n    </nav>\r\n  );\r\n};\r\n\r\nSidebarBase.displayName = \"SidebarBase\";\r\nexport default SidebarBase;\r\n","import React from \"react\";\r\nimport SidebarBase from \"../SidebarBase\";\r\nimport \"./Sidebar.scss\";\r\nimport { SidebarProps } from \"../Sidebar.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"sidebar\",\r\n  nav: \"sidebar_nav\",\r\n  list: \"sidebar_list\",\r\n  childList: \"sidebar_child_list\",\r\n  item: \"sidebar_item\",\r\n  link: \"sidebar_link\",\r\n  childLink: \"sidebar_child_link\",\r\n  active: \"sidebar_active\",\r\n\r\n  footer: \"sidebar_footer\",\r\n  footerLink: \"sidebar_footer_link\",\r\n  footerVersion: \"sidebar_footer_version\",\r\n\r\n  chevron: \"sidebar_chevron\",\r\n  chevronOpen: \"sidebar_chevron_open\",\r\n\r\n  submenu: \"sidebar_submenu\",\r\n  submenuOpen: \"sidebar_submenu_open\",\r\n\r\n  outline: \"sidebar_outline\",\r\n\r\n  primary: \"sidebar_primary\",\r\n  secondary: \"sidebar_secondary\",\r\n  tertiary: \"sidebar_tertiary\",\r\n  quaternary: \"sidebar_quaternary\",\r\n\r\n  success: \"sidebar_success\",\r\n  error: \"sidebar_error\",\r\n  warning: \"sidebar_warning\",\r\n\r\n  clear: \"sidebar_clear\",\r\n\r\n  shadowNone: \"sidebar_shadow-None\",\r\n  shadowLight: \"sidebar_shadow-Light\",\r\n  shadowMedium: \"sidebar_shadow-Medium\",\r\n  shadowStrong: \"sidebar_shadow-Strong\",\r\n  shadowIntense: \"sidebar_shadow-Intense\",\r\n\r\n  roundNone: \"sidebar_round-None\",\r\n  roundSmall: \"sidebar_round-Small\",\r\n  roundMedium: \"sidebar_round-Medium\",\r\n  roundLarge: \"sidebar_round-Large\",\r\n};\r\n\r\nconst Sidebar: React.FC<SidebarProps> = ({ currentPath, ...props }) => (\r\n  <SidebarBase {...props} currentPath={currentPath} classMap={classes} />\r\n);\r\n\r\nexport default Sidebar;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useState","useRef","useEffect","_a","useMemo","combineClassNames","capitalize","jsx","jsxs","Fragment","ChevronDownIcon"],"mappings":"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"}

package/dist/core/{Sidebar-z0mG5nn_.js → Sidebar-CnGBAT2_.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { a as getDefaultRounding, b as getDefaultShadow, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
@@ -23,17 +23,40 @@ const SidebarBase = ({
   ...rest
 }) => {
   const [openItems, setOpenItems] = useState({});
-  const toggleItem = (key) => {
-    setOpenItems((prev) => ({ ...prev, [key]: !prev[key] }));
+  const idsRef = useRef({});
+  const seqRef = useRef(0);
+  const idFor = (label) => {
+    if (!idsRef.current[label]) {
+      const slug = label.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9_-]/g, "");
+      idsRef.current[label] = `${testId}-section-${slug}-${seqRef.current++}`;
+    }
+    return idsRef.current[label];
   };
+  useEffect(() => {
+    const next = {};
+    const walk = (nodes) => {
+      var _a;
+      for (const n of nodes) {
+        if ((_a = n.children) == null ? void 0 : _a.length) {
+          const anyChildActive = n.children.some((c) => c.href && c.href === currentPath) || n.children && walk(n.children);
+          if (anyChildActive) next[n.label] = true;
+        }
+      }
+      return nodes.some(
+        (n) => {
+          var _a2;
+          return n.href && n.href === currentPath || !!((_a2 = n.children) == null ? void 0 : _a2.length) && n.children.some((c) => c.href === currentPath);
+        }
+      );
+    };
+    walk(links);
+    setOpenItems((prev) => ({ ...prev, ...next }));
+  }, [currentPath, links]);
+  const toggleItem = (key) => setOpenItems((prev) => ({ ...prev, [key]: !prev[key] }));
   const submenuRefs = useRef({});
   const setSubmenuRef = (key, el) => {
     submenuRefs.current[key] = el;
   };
-  const getSubmenuHeight = (key) => {
-    const el = submenuRefs.current[key];
-    return el ? `${el.scrollHeight}px` : "0px";
-  };
   const containerClasses = useMemo(
     () => combineClassNames(
       classMap.wrapper,
@@ -42,49 +65,57 @@ const SidebarBase = ({
       classMap[state],
       shadow && classMap[`shadow${capitalize(shadow)}`],
       rounding && classMap[`round${capitalize(rounding)}`],
-      outline ? classMap.outline : ""
+      outline && classMap.outline
     ),
-    [className, theme, state, outline, rounding, shadow]
+    [classMap, className, theme, state, outline, rounding, shadow]
   );
   const renderLinks = (items, isChild = false) => /* @__PURE__ */ jsx(
     "ul",
     {
       className: combineClassNames(
         classMap.list,
-        isChild ? classMap.childList : ""
+        isChild && classMap.childList
       ),
       "data-testid": `${testId}-list`,
-      children: items.map(({ label, href, children, icon }) => {
-        const isActive = href && currentPath === href;
-        const isOpen = openItems[label] || false;
+      children: items.map(({ label, href, children, icon }, idx) => {
+        const key = `${label}-${idx}`;
+        const isActive = !!href && currentPath === href;
+        const isOpen = !!openItems[label];
+        const sectionId = idFor(label);
+        const buttonId = `${sectionId}-button`;
+        const panelId = `${sectionId}-panel`;
         return /* @__PURE__ */ jsx(
           "li",
           {
             className: classMap.item,
-            "data-testid": `${testId}-listItems`,
+            "data-testid": `${testId}-listItem`,
             children: children && children.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
+                  id: buttonId,
                   className: combineClassNames(
                     classMap.link,
-                    isOpen ? classMap.active : ""
+                    isOpen && classMap.active
                   ),
                   onClick: () => toggleItem(label),
                   "aria-expanded": isOpen,
-                  "data-testid": `${testId}-exapndItemButton`,
+                  "aria-controls": panelId,
+                  "data-testid": `${testId}-expandItemButton`,
                   children: [
                     icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, children: icon }),
-                    /* @__PURE__ */ jsx("span", { "data-testid": `${testId}-exapndItemLabel`, children: label }),
+                    /* @__PURE__ */ jsx("span", { "data-testid": `${testId}-expandItemLabel`, children: label }),
                     /* @__PURE__ */ jsx(
                       ChevronDownIcon,
                       {
                         className: combineClassNames(
                           classMap.chevron,
-                          isOpen ? classMap.chevronOpen : ""
+                          isOpen && classMap.chevronOpen
                         ),
-                        "data-testid": `${testId}-exapndIcon`
+                        "aria-hidden": "true",
+                        focusable: false,
+                        "data-testid": `${testId}-expandIcon`
                       }
                     )
                   ]
@@ -93,14 +124,15 @@ const SidebarBase = ({
               /* @__PURE__ */ jsx(
                 "div",
                 {
+                  id: panelId,
                   ref: (el) => setSubmenuRef(label, el),
                   className: combineClassNames(
                     classMap.submenu,
-                    isOpen ? classMap.submenuOpen : ""
+                    isOpen && classMap.submenuOpen
                   ),
-                  style: {
-                    maxHeight: isOpen ? getSubmenuHeight(label) : "0px"
-                  },
+                  role: "group",
+                  "aria-labelledby": buttonId,
+                  hidden: !isOpen,
                   "data-testid": `${testId}-subMenu`,
                   children: renderLinks(children, true)
                 }
@@ -111,8 +143,8 @@ const SidebarBase = ({
                 href,
                 className: combineClassNames(
                   classMap.link,
-                  isChild ? classMap.childLink : "",
-                  isActive ? classMap.active : ""
+                  isChild && classMap.childLink,
+                  isActive && classMap.active
                 ),
                 "aria-current": isActive ? "page" : void 0,
                 "data-testid": `${testId}-sidebarLink`,
@@ -126,7 +158,7 @@ const SidebarBase = ({
               {
                 className: combineClassNames(
                   classMap.link,
-                  isChild ? classMap.childLink : ""
+                  isChild && classMap.childLink
                 ),
                 "data-testid": `${testId}-sidebarLabel`,
                 children: [
@@ -136,7 +168,7 @@ const SidebarBase = ({
               }
             )
           },
-          label
+          key
         );
       })
     }
@@ -146,12 +178,12 @@ const SidebarBase = ({
     {
       className: containerClasses,
       "aria-label": ariaLabel,
-      ...rest,
       "data-testid": testId,
+      ...rest,
       children: [
-        /* @__PURE__ */ jsx("nav", { className: classMap.nav, children: renderLinks(links) }),
+        /* @__PURE__ */ jsx("div", { className: classMap.nav, children: renderLinks(links) }),
         showFooter && /* @__PURE__ */ jsxs("footer", { className: classMap.footer, "data-testid": `${testId}-footer`, children: [
-          footerLinks == null ? void 0 : footerLinks.map(({ label, href }) => /* @__PURE__ */ jsx(
+          footerLinks == null ? void 0 : footerLinks.map(({ label, href }, i) => /* @__PURE__ */ jsx(
             LinkComponent,
             {
               href,
@@ -159,7 +191,7 @@ const SidebarBase = ({
               "data-testid": `${testId}-footerLink`,
               children: label
             },
-            label
+            `${label}-${i}`
           )),
           footerVersion && /* @__PURE__ */ jsx(
             "span",
@@ -179,14 +211,14 @@ const classes = {
   wrapper: "sidebar",
   nav: "sidebar_nav",
   list: "sidebar_list",
-  childList: "sidebar_child-list",
+  childList: "sidebar_child_list",
   item: "sidebar_item",
   link: "sidebar_link",
-  childLink: "sidebar_child-link",
+  childLink: "sidebar_child_link",
   active: "sidebar_active",
   footer: "sidebar_footer",
-  footerLink: "sidebar_footer-link",
-  footerVersion: "sidebar_footer-version",
+  footerLink: "sidebar_footer_link",
+  footerVersion: "sidebar_footer_version",
   chevron: "sidebar_chevron",
   chevronOpen: "sidebar_chevron_open",
   submenu: "sidebar_submenu",
@@ -214,4 +246,4 @@ const Sidebar = ({ currentPath, ...props }) => /* @__PURE__ */ jsx(SidebarBase,
 export {
   Sidebar as S
 };
-//# sourceMappingURL=Sidebar-z0mG5nn_.js.map
+//# sourceMappingURL=Sidebar-CnGBAT2_.js.map

package/dist/core/Sidebar-CnGBAT2_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar-CnGBAT2_.js","sources":["../../src/components/Sidebar/SidebarBase.tsx","../../src/components/Sidebar/core/Sidebar.tsx"],"sourcesContent":["import React, { useState, useMemo, useRef, useEffect } from \"react\";\r\nimport { combineClassNames } from \"@/utils/classNames\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"@/config/boreal-style-config\";\r\nimport { capitalize } from \"@/utils/capitalize\";\r\nimport { ChevronDownIcon } from \"@/Icons\";\r\nimport { BaseSidebarProps } from \"./Sidebar.types\";\r\n\r\nconst SidebarBase: React.FC<BaseSidebarProps> = ({\r\n  links,\r\n  classMap,\r\n  currentPath,\r\n  LinkComponent = \"a\",\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  state = \"\",\r\n  showFooter = false,\r\n  footerLinks,\r\n  footerVersion,\r\n  outline = false,\r\n  className = \"\",\r\n  \"data-testid\": testId = \"sidebar\",\r\n  ariaLabel = \"Sidebar navigation\",\r\n  ...rest\r\n}) => {\r\n  const [openItems, setOpenItems] = useState<Record<string, boolean>>({});\r\n\r\n  const idsRef = useRef<Record<string, string>>({});\r\n  const seqRef = useRef(0);\r\n  const idFor = (label: string) => {\r\n    if (!idsRef.current[label]) {\r\n      const slug = label\r\n        .toLowerCase()\r\n        .replace(/\\s+/g, \"-\")\r\n        .replace(/[^a-z0-9_-]/g, \"\");\r\n      idsRef.current[label] = `${testId}-section-${slug}-${seqRef.current++}`;\r\n    }\r\n    return idsRef.current[label];\r\n  };\r\n\r\n  useEffect(() => {\r\n    const next: Record<string, boolean> = {};\r\n\r\n    const walk = (nodes: typeof links) => {\r\n      for (const n of nodes) {\r\n        if (n.children?.length) {\r\n          const anyChildActive =\r\n            n.children.some((c) => c.href && c.href === currentPath) ||\r\n            (n.children && walk(n.children));\r\n          if (anyChildActive) next[n.label] = true;\r\n        }\r\n      }\r\n      return nodes.some(\r\n        (n) =>\r\n          (n.href && n.href === currentPath) ||\r\n          (!!n.children?.length &&\r\n            n.children!.some((c) => c.href === currentPath))\r\n      );\r\n    };\r\n\r\n    walk(links);\r\n    setOpenItems((prev) => ({ ...prev, ...next }));\r\n  }, [currentPath, links]);\r\n\r\n  const toggleItem = (key: string) =>\r\n    setOpenItems((prev) => ({ ...prev, [key]: !prev[key] }));\r\n\r\n  const submenuRefs = useRef<Record<string, HTMLDivElement | null>>({});\r\n  const setSubmenuRef = (key: string, el: HTMLDivElement | null) => {\r\n    submenuRefs.current[key] = el;\r\n  };\r\n  const getSubmenuHeight = (key: string) => {\r\n    const el = submenuRefs.current[key];\r\n    return el ? `${el.scrollHeight}px` : \"0px\";\r\n  };\r\n\r\n  const containerClasses = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.wrapper,\r\n        className,\r\n        classMap[theme],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        outline && classMap.outline\r\n      ),\r\n    [classMap, className, theme, state, outline, rounding, shadow]\r\n  );\r\n\r\n  const renderLinks = (items: typeof links, isChild = false) => (\r\n    <ul\r\n      className={combineClassNames(\r\n        classMap.list,\r\n        isChild && classMap.childList\r\n      )}\r\n      data-testid={`${testId}-list`}\r\n    >\r\n      {items.map(({ label, href, children, icon }, idx) => {\r\n        const key = `${label}-${idx}`;\r\n        const isActive = !!href && currentPath === href;\r\n        const isOpen = !!openItems[label];\r\n        const sectionId = idFor(label);\r\n        const buttonId = `${sectionId}-button`;\r\n        const panelId = `${sectionId}-panel`;\r\n\r\n        return (\r\n          <li\r\n            key={key}\r\n            className={classMap.item}\r\n            data-testid={`${testId}-listItem`}\r\n          >\r\n            {children && children.length > 0 ? (\r\n              <>\r\n                <button\r\n                  type=\"button\"\r\n                  id={buttonId}\r\n                  className={combineClassNames(\r\n                    classMap.link,\r\n                    isOpen && classMap.active\r\n                  )}\r\n                  onClick={() => toggleItem(label)}\r\n                  aria-expanded={isOpen}\r\n                  aria-controls={panelId}\r\n                  data-testid={`${testId}-expandItemButton`}\r\n                >\r\n                  {icon && <span className={classMap.icon}>{icon}</span>}\r\n                  <span data-testid={`${testId}-expandItemLabel`}>{label}</span>\r\n                  <ChevronDownIcon\r\n                    className={combineClassNames(\r\n                      classMap.chevron,\r\n                      isOpen && classMap.chevronOpen\r\n                    )}\r\n                    aria-hidden=\"true\"\r\n                    focusable={false}\r\n                    data-testid={`${testId}-expandIcon`}\r\n                  />\r\n                </button>\r\n\r\n                <div\r\n                  id={panelId}\r\n                  ref={(el) => setSubmenuRef(label, el)}\r\n                  className={combineClassNames(\r\n                    classMap.submenu,\r\n                    isOpen && classMap.submenuOpen\r\n                  )}\r\n                  role=\"group\"\r\n                  aria-labelledby={buttonId}\r\n                  hidden={!isOpen}\r\n                  data-testid={`${testId}-subMenu`}\r\n                >\r\n                  {renderLinks(children, true)}\r\n                </div>\r\n              </>\r\n            ) : href ? (\r\n              <LinkComponent\r\n                href={href}\r\n                className={combineClassNames(\r\n                  classMap.link,\r\n                  isChild && classMap.childLink,\r\n                  isActive && classMap.active\r\n                )}\r\n                aria-current={isActive ? \"page\" : undefined}\r\n                data-testid={`${testId}-sidebarLink`}\r\n              >\r\n                {icon && <span className={classMap.icon}>{icon}</span>}\r\n                {label}\r\n              </LinkComponent>\r\n            ) : (\r\n              <span\r\n                className={combineClassNames(\r\n                  classMap.link,\r\n                  isChild && classMap.childLink\r\n                )}\r\n                data-testid={`${testId}-sidebarLabel`}\r\n              >\r\n                {icon && <span className={classMap.icon}>{icon}</span>}\r\n                {label}\r\n              </span>\r\n            )}\r\n          </li>\r\n        );\r\n      })}\r\n    </ul>\r\n  );\r\n\r\n  return (\r\n    <nav\r\n      className={containerClasses}\r\n      aria-label={ariaLabel}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      <div className={classMap.nav}>{renderLinks(links)}</div>\r\n\r\n      {showFooter && (\r\n        <footer className={classMap.footer} data-testid={`${testId}-footer`}>\r\n          {footerLinks?.map(({ label, href }, i) => (\r\n            <LinkComponent\r\n              key={`${label}-${i}`}\r\n              href={href}\r\n              className={classMap.footerLink}\r\n              data-testid={`${testId}-footerLink`}\r\n            >\r\n              {label}\r\n            </LinkComponent>\r\n          ))}\r\n          {footerVersion && (\r\n            <span\r\n              className={classMap.footerVersion}\r\n              data-testid={`${testId}-footerVersion`}\r\n            >\r\n              {footerVersion}\r\n            </span>\r\n          )}\r\n        </footer>\r\n      )}\r\n    </nav>\r\n  );\r\n};\r\n\r\nSidebarBase.displayName = \"SidebarBase\";\r\nexport default SidebarBase;\r\n","import React from \"react\";\r\nimport SidebarBase from \"../SidebarBase\";\r\nimport \"./Sidebar.scss\";\r\nimport { SidebarProps } from \"../Sidebar.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"sidebar\",\r\n  nav: \"sidebar_nav\",\r\n  list: \"sidebar_list\",\r\n  childList: \"sidebar_child_list\",\r\n  item: \"sidebar_item\",\r\n  link: \"sidebar_link\",\r\n  childLink: \"sidebar_child_link\",\r\n  active: \"sidebar_active\",\r\n\r\n  footer: \"sidebar_footer\",\r\n  footerLink: \"sidebar_footer_link\",\r\n  footerVersion: \"sidebar_footer_version\",\r\n\r\n  chevron: \"sidebar_chevron\",\r\n  chevronOpen: \"sidebar_chevron_open\",\r\n\r\n  submenu: \"sidebar_submenu\",\r\n  submenuOpen: \"sidebar_submenu_open\",\r\n\r\n  outline: \"sidebar_outline\",\r\n\r\n  primary: \"sidebar_primary\",\r\n  secondary: \"sidebar_secondary\",\r\n  tertiary: \"sidebar_tertiary\",\r\n  quaternary: \"sidebar_quaternary\",\r\n\r\n  success: \"sidebar_success\",\r\n  error: \"sidebar_error\",\r\n  warning: \"sidebar_warning\",\r\n\r\n  clear: \"sidebar_clear\",\r\n\r\n  shadowNone: \"sidebar_shadow-None\",\r\n  shadowLight: \"sidebar_shadow-Light\",\r\n  shadowMedium: \"sidebar_shadow-Medium\",\r\n  shadowStrong: \"sidebar_shadow-Strong\",\r\n  shadowIntense: \"sidebar_shadow-Intense\",\r\n\r\n  roundNone: \"sidebar_round-None\",\r\n  roundSmall: \"sidebar_round-Small\",\r\n  roundMedium: \"sidebar_round-Medium\",\r\n  roundLarge: \"sidebar_round-Large\",\r\n};\r\n\r\nconst Sidebar: React.FC<SidebarProps> = ({ currentPath, ...props }) => (\r\n  <SidebarBase {...props} currentPath={currentPath} classMap={classes} />\r\n);\r\n\r\nexport default Sidebar;\r\n"],"names":["_a"],"mappings":"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"}

package/dist/core/Sidebar.cjs.js

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

package/dist/core/Sidebar.js

@@ -1,4 +1,4 @@
-import { S } from "./Sidebar-z0mG5nn_.js";
+import { S } from "./Sidebar-CnGBAT2_.js";
 export {
   S as default
 };

package/dist/core/{Skeleton-CeMwLgnq.cjs → Skeleton-BlyxKLt_.cjs}

@@ -1,5 +1,6 @@
 "use strict";
 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");
@@ -9,30 +10,41 @@ const SkeletonBase = ({
   rounding = borealStyleConfig.getDefaultRounding(),
   shadow = borealStyleConfig.getDefaultShadow(),
   className = "",
-  label = "Loading content...",
+  label = "Loading content…",
+  announce = true,
+  animate = true,
+  as: Tag = "div",
   "data-testid": testId = "skeleton-loader",
   classMap,
   ...rest
 }) => {
   const descriptionId = `${testId}-desc`;
-  const skeletonClasses = classNames.combineClassNames(
-    shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
-    rounding && classMap[`round${capitalize.capitalize(rounding)}`],
-    className
+  const skeletonClasses = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.skeleton,
+      animate && classMap.animated,
+      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize.capitalize(rounding)}`],
+      className
+    ),
+    [classMap, animate, shadow, rounding, className, announce]
   );
+  const ariaProps = announce ? {
+    role: "status",
+    "aria-busy": true,
+    "aria-live": "polite",
+    "aria-relevant": "additions text",
+    "aria-describedby": descriptionId
+  } : { "aria-hidden": true };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    Tag,
     {
       className: skeletonClasses,
       style: { width, height },
-      role: "status",
-      "aria-busy": "true",
-      "aria-live": "polite",
-      "aria-describedby": descriptionId,
       "data-testid": testId,
-      "aria-label": label,
+      ...ariaProps,
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: announce && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           id: descriptionId,
@@ -44,6 +56,7 @@ const SkeletonBase = ({
     }
   );
 };
+SkeletonBase.displayName = "SkeletonBase";
 const classes = {
   shadowNone: "skeleton_shadow-None",
   shadowLight: "skeleton_shadow-Light",
@@ -66,4 +79,4 @@ const SkeletonLoader = (props) => {
   );
 };
 exports.SkeletonLoader = SkeletonLoader;
-//# sourceMappingURL=Skeleton-CeMwLgnq.cjs.map
+//# sourceMappingURL=Skeleton-BlyxKLt_.cjs.map

package/dist/core/Skeleton-BlyxKLt_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton-BlyxKLt_.cjs","sources":["../../src/components/Skeleton/SkeletonBase.tsx","../../src/components/Skeleton/core/Skeleton.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} from \"../../config/boreal-style-config\";\r\nimport { ExtraProps, SkeletonBaseProps } from \"./Skeleton.types\";\r\n\r\nconst SkeletonBase: React.FC<SkeletonBaseProps & ExtraProps> = ({\r\n  width = \"100%\",\r\n  height = \"100%\",\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  className = \"\",\r\n  label = \"Loading content…\",\r\n  announce = true,\r\n  animate = true,\r\n  as: Tag = \"div\",\r\n  \"data-testid\": testId = \"skeleton-loader\",\r\n  classMap,\r\n  ...rest\r\n}) => {\r\n  const descriptionId = `${testId}-desc`;\r\n\r\n  const skeletonClasses = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.skeleton,\r\n        animate && classMap.animated,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className\r\n      ),\r\n    [classMap, animate, shadow, rounding, className, announce]\r\n  );\r\n\r\n  const ariaProps = announce\r\n    ? {\r\n        role: \"status\" as const,\r\n        \"aria-busy\": true,\r\n        \"aria-live\": \"polite\" as const,\r\n        \"aria-relevant\": \"additions text\" as const,\r\n        \"aria-describedby\": descriptionId,\r\n      }\r\n    : { \"aria-hidden\": true as const };\r\n\r\n  return (\r\n    <Tag\r\n      className={skeletonClasses}\r\n      style={{ width, height }}\r\n      data-testid={testId}\r\n      {...ariaProps}\r\n      {...rest}\r\n    >\r\n      {announce && (\r\n        <span\r\n          id={descriptionId}\r\n          className=\"sr_only\"\r\n          data-testid={`${testId}-description`}\r\n        >\r\n          {label}\r\n        </span>\r\n      )}\r\n    </Tag>\r\n  );\r\n};\r\n\r\nSkeletonBase.displayName = \"SkeletonBase\";\r\nexport default SkeletonBase;\r\n","import React from \"react\";\r\nimport \"./Skeleton.scss\";\r\nimport SkeletonBase from \"../SkeletonBase\";\r\nimport { SkeletonProps } from \"../Skeleton.types\";\r\nimport { combineClassNames } from \"../../../utils/classNames\";\r\n\r\nconst classes = {\r\n  shadowNone: \"skeleton_shadow-None\",\r\n  shadowLight: \"skeleton_shadow-Light\",\r\n  shadowMedium: \"skeleton_shadow-Medium\",\r\n  shadowStrong: \"skeleton_shadow-Strong\",\r\n  shadowIntense: \"skeleton_shadow-Intense\",\r\n\r\n  roundNone: \"skeleton_round-None\",\r\n  roundSmall: \"skeleton_round-Small\",\r\n  roundMedium: \"skeleton_round-Medium\",\r\n  roundLarge: \"skeleton_round-Large\",\r\n};\r\n\r\nconst SkeletonLoader: React.FC<SkeletonProps> = (props) => {\r\n  return (\r\n    <SkeletonBase\r\n      {...props}\r\n      className={combineClassNames(\"skeleton_loader\", props.className)}\r\n      classMap={classes}\r\n    />\r\n  );\r\n};\r\n\r\nexport default SkeletonLoader;\r\n"],"names":["getDefaultRounding","getDefaultShadow","useMemo","combineClassNames","capitalize","jsx"],"mappings":";;;;;;AASA,MAAM,eAAyD,CAAC;AAAA,EAC9D,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAWA,kBAAAA,mBAAA;AAAA,EACX,SAASC,kBAAAA,iBAAA;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,IAAI,MAAM;AAAA,EACV,eAAe,SAAS;AAAA,EACxB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,gBAAgB,GAAG,MAAM;AAE/B,QAAM,kBAAkBC,MAAAA;AAAAA,IACtB,MACEC,WAAAA;AAAAA,MACE,SAAS;AAAA,MACT,WAAW,SAAS;AAAA,MACpB,UAAU,SAAS,SAASC,WAAAA,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQA,WAAAA,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnD;AAAA,IAAA;AAAA,IAEJ,CAAC,UAAU,SAAS,QAAQ,UAAU,WAAW,QAAQ;AAAA,EAAA;AAG3D,QAAM,YAAY,WACd;AAAA,IACE,MAAM;AAAA,IACN,aAAa;AAAA,IACb,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EAAA,IAEtB,EAAE,eAAe,KAAA;AAErB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,OAAO,OAAA;AAAA,MAChB,eAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,UAAA,YACCA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,eAAa,GAAG,MAAM;AAAA,UAErB,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAIR;AAEA,aAAa,cAAc;AC9D3B,MAAM,UAAU;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AACd;AAEA,MAAM,iBAA0C,CAAC,UAAU;AACzD,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAWF,WAAAA,kBAAkB,mBAAmB,MAAM,SAAS;AAAA,MAC/D,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;;"}

package/dist/core/{Skeleton-BniIVZmx.js → Skeleton-CMhlYg-Q.js}

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
 import { a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
@@ -8,30 +9,41 @@ const SkeletonBase = ({
   rounding = getDefaultRounding(),
   shadow = getDefaultShadow(),
   className = "",
-  label = "Loading content...",
+  label = "Loading content…",
+  announce = true,
+  animate = true,
+  as: Tag = "div",
   "data-testid": testId = "skeleton-loader",
   classMap,
   ...rest
 }) => {
   const descriptionId = `${testId}-desc`;
-  const skeletonClasses = combineClassNames(
-    shadow && classMap[`shadow${capitalize(shadow)}`],
-    rounding && classMap[`round${capitalize(rounding)}`],
-    className
+  const skeletonClasses = useMemo(
+    () => combineClassNames(
+      classMap.skeleton,
+      animate && classMap.animated,
+      shadow && classMap[`shadow${capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize(rounding)}`],
+      className
+    ),
+    [classMap, animate, shadow, rounding, className, announce]
   );
+  const ariaProps = announce ? {
+    role: "status",
+    "aria-busy": true,
+    "aria-live": "polite",
+    "aria-relevant": "additions text",
+    "aria-describedby": descriptionId
+  } : { "aria-hidden": true };
   return /* @__PURE__ */ jsx(
-    "div",
+    Tag,
     {
       className: skeletonClasses,
       style: { width, height },
-      role: "status",
-      "aria-busy": "true",
-      "aria-live": "polite",
-      "aria-describedby": descriptionId,
       "data-testid": testId,
-      "aria-label": label,
+      ...ariaProps,
       ...rest,
-      children: /* @__PURE__ */ jsx(
+      children: announce && /* @__PURE__ */ jsx(
         "span",
         {
           id: descriptionId,
@@ -43,6 +55,7 @@ const SkeletonBase = ({
     }
   );
 };
+SkeletonBase.displayName = "SkeletonBase";
 const classes = {
   shadowNone: "skeleton_shadow-None",
   shadowLight: "skeleton_shadow-Light",
@@ -67,4 +80,4 @@ const SkeletonLoader = (props) => {
 export {
   SkeletonLoader as S
 };
-//# sourceMappingURL=Skeleton-BniIVZmx.js.map
+//# sourceMappingURL=Skeleton-CMhlYg-Q.js.map

package/dist/core/Skeleton-CMhlYg-Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton-CMhlYg-Q.js","sources":["../../src/components/Skeleton/SkeletonBase.tsx","../../src/components/Skeleton/core/Skeleton.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} from \"../../config/boreal-style-config\";\r\nimport { ExtraProps, SkeletonBaseProps } from \"./Skeleton.types\";\r\n\r\nconst SkeletonBase: React.FC<SkeletonBaseProps & ExtraProps> = ({\r\n  width = \"100%\",\r\n  height = \"100%\",\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  className = \"\",\r\n  label = \"Loading content…\",\r\n  announce = true,\r\n  animate = true,\r\n  as: Tag = \"div\",\r\n  \"data-testid\": testId = \"skeleton-loader\",\r\n  classMap,\r\n  ...rest\r\n}) => {\r\n  const descriptionId = `${testId}-desc`;\r\n\r\n  const skeletonClasses = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.skeleton,\r\n        animate && classMap.animated,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className\r\n      ),\r\n    [classMap, animate, shadow, rounding, className, announce]\r\n  );\r\n\r\n  const ariaProps = announce\r\n    ? {\r\n        role: \"status\" as const,\r\n        \"aria-busy\": true,\r\n        \"aria-live\": \"polite\" as const,\r\n        \"aria-relevant\": \"additions text\" as const,\r\n        \"aria-describedby\": descriptionId,\r\n      }\r\n    : { \"aria-hidden\": true as const };\r\n\r\n  return (\r\n    <Tag\r\n      className={skeletonClasses}\r\n      style={{ width, height }}\r\n      data-testid={testId}\r\n      {...ariaProps}\r\n      {...rest}\r\n    >\r\n      {announce && (\r\n        <span\r\n          id={descriptionId}\r\n          className=\"sr_only\"\r\n          data-testid={`${testId}-description`}\r\n        >\r\n          {label}\r\n        </span>\r\n      )}\r\n    </Tag>\r\n  );\r\n};\r\n\r\nSkeletonBase.displayName = \"SkeletonBase\";\r\nexport default SkeletonBase;\r\n","import React from \"react\";\r\nimport \"./Skeleton.scss\";\r\nimport SkeletonBase from \"../SkeletonBase\";\r\nimport { SkeletonProps } from \"../Skeleton.types\";\r\nimport { combineClassNames } from \"../../../utils/classNames\";\r\n\r\nconst classes = {\r\n  shadowNone: \"skeleton_shadow-None\",\r\n  shadowLight: \"skeleton_shadow-Light\",\r\n  shadowMedium: \"skeleton_shadow-Medium\",\r\n  shadowStrong: \"skeleton_shadow-Strong\",\r\n  shadowIntense: \"skeleton_shadow-Intense\",\r\n\r\n  roundNone: \"skeleton_round-None\",\r\n  roundSmall: \"skeleton_round-Small\",\r\n  roundMedium: \"skeleton_round-Medium\",\r\n  roundLarge: \"skeleton_round-Large\",\r\n};\r\n\r\nconst SkeletonLoader: React.FC<SkeletonProps> = (props) => {\r\n  return (\r\n    <SkeletonBase\r\n      {...props}\r\n      className={combineClassNames(\"skeleton_loader\", props.className)}\r\n      classMap={classes}\r\n    />\r\n  );\r\n};\r\n\r\nexport default SkeletonLoader;\r\n"],"names":[],"mappings":";;;;;AASA,MAAM,eAAyD,CAAC;AAAA,EAC9D,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,IAAI,MAAM;AAAA,EACV,eAAe,SAAS;AAAA,EACxB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,gBAAgB,GAAG,MAAM;AAE/B,QAAM,kBAAkB;AAAA,IACtB,MACE;AAAA,MACE,SAAS;AAAA,MACT,WAAW,SAAS;AAAA,MACpB,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnD;AAAA,IAAA;AAAA,IAEJ,CAAC,UAAU,SAAS,QAAQ,UAAU,WAAW,QAAQ;AAAA,EAAA;AAG3D,QAAM,YAAY,WACd;AAAA,IACE,MAAM;AAAA,IACN,aAAa;AAAA,IACb,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EAAA,IAEtB,EAAE,eAAe,KAAA;AAErB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,OAAO,OAAA;AAAA,MAChB,eAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,UAAA,YACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,eAAa,GAAG,MAAM;AAAA,UAErB,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAIR;AAEA,aAAa,cAAc;AC9D3B,MAAM,UAAU;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AACd;AAEA,MAAM,iBAA0C,CAAC,UAAU;AACzD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,kBAAkB,mBAAmB,MAAM,SAAS;AAAA,MAC/D,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/dist/core/Skeleton.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Skeleton = require("./Skeleton-CeMwLgnq.cjs");
+const Skeleton = require("./Skeleton-BlyxKLt_.cjs");
 module.exports = Skeleton.SkeletonLoader;
 //# sourceMappingURL=Skeleton.cjs.js.map

package/dist/core/Skeleton.js

@@ -1,4 +1,4 @@
-import { S } from "./Skeleton-BniIVZmx.js";
+import { S } from "./Skeleton-CMhlYg-Q.js";
 export {
   S as default
 };

package/dist/core/{Slider-DZycGDIY.cjs → Slider-BT1Pi-VJ.cjs}

@@ -7,6 +7,7 @@ const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
 const SliderBase = ({
   value,
   onChange,
+  onValueChange,
   min = 0,
   max = 100,
   step = 1,
@@ -19,12 +20,19 @@ const SliderBase = ({
   showValue = true,
   className = "",
   "aria-label": ariaLabel,
+  disabled = false,
   "data-testid": testId = "slider",
-  classMap
+  classMap,
+  ...rest
 }) => {
-  const inputId = `${testId}-input`;
-  const labelId = `${testId}-label`;
-  const valueText = `${value}`;
+  const uid = React.useId();
+  const inputId = `${testId}-input-${uid}`;
+  const labelId = label ? `${testId}-label-${uid}` : void 0;
+  const valueId = showValue ? `${testId}-value-${uid}` : void 0;
+  const safeMin = Number.isFinite(min) ? Number(min) : 0;
+  const safeMax = Number.isFinite(max) ? Number(max) : 100;
+  const safeStep = step > 0 ? step : 1;
+  const clamped = Math.min(safeMax, Math.max(safeMin, Number(value)));
   const containerClasses = React.useMemo(
     () => classNames.combineClassNames(
       classMap.container,
@@ -35,8 +43,13 @@ const SliderBase = ({
       rounding && classMap[`round${capitalize.capitalize(rounding)}`],
       className
     ),
-    [classMap, size, theme, state, className]
+    [classMap, size, theme, state, className, shadow, rounding]
   );
+  const handleChange = (e) => {
+    const numeric = Number(e.target.value);
+    onChange == null ? void 0 : onChange(e);
+    onValueChange == null ? void 0 : onValueChange(numeric);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClasses, "data-testid": `${testId}-container`, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("label", { id: labelId, htmlFor: inputId, className: classMap.label, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classMap.wrapper, children: [
@@ -46,33 +59,33 @@ const SliderBase = ({
           id: inputId,
           type: "range",
           className: classMap.slider,
-          value,
-          onChange,
-          min,
-          max,
-          step,
-          "aria-valuemin": min,
-          "aria-valuemax": max,
-          "aria-valuenow": value,
-          "aria-valuetext": valueText,
+          value: clamped,
+          onChange: handleChange,
+          min: safeMin,
+          max: safeMax,
+          step: safeStep,
           "aria-labelledby": label ? labelId : void 0,
           "aria-label": label ? void 0 : ariaLabel || "Slider",
-          "data-testid": testId
+          "aria-describedby": valueId,
+          disabled,
+          "data-testid": testId,
+          ...rest
         }
       ),
       showValue && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
+        "output",
         {
+          id: valueId,
           className: classMap.value,
-          id: `${testId}-value`,
-          "aria-live": "polite",
+          htmlFor: inputId,
           "data-testid": `${testId}-value`,
-          children: value
+          children: clamped
         }
       )
     ] })
   ] });
 };
+SliderBase.displayName = "SliderBase";
 const coreStyles = {
   container: "slider_container",
   label: "slider_label",
@@ -113,4 +126,4 @@ const Slider = (props) => {
   );
 };
 exports.Slider = Slider;
-//# sourceMappingURL=Slider-DZycGDIY.cjs.map
+//# sourceMappingURL=Slider-BT1Pi-VJ.cjs.map

package/dist/core/Slider-BT1Pi-VJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider-BT1Pi-VJ.cjs","sources":["../../src/components/Slider/SliderBase.tsx","../../src/components/Slider/core/Slider.tsx"],"sourcesContent":["import React, { useMemo, useId } from \"react\";\r\nimport { SliderProps } from \"./Slider.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst SliderBase: React.FC<\r\n  SliderProps & { classMap: Record<string, string> }\r\n> = ({\r\n  value,\r\n  onChange,\r\n  onValueChange,\r\n  min = 0,\r\n  max = 100,\r\n  step = 1,\r\n  label,\r\n  size = getDefaultSize(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  showValue = true,\r\n  className = \"\",\r\n  \"aria-label\": ariaLabel,\r\n  disabled = false,\r\n  \"data-testid\": testId = \"slider\",\r\n  classMap,\r\n  ...rest\r\n}) => {\r\n  const uid = useId();\r\n  const inputId = `${testId}-input-${uid}`;\r\n  const labelId = label ? `${testId}-label-${uid}` : undefined;\r\n  const valueId = showValue ? `${testId}-value-${uid}` : undefined;\r\n\r\n  const safeMin = Number.isFinite(min) ? Number(min) : 0;\r\n  const safeMax = Number.isFinite(max) ? Number(max) : 100;\r\n  const safeStep = step > 0 ? step : 1;\r\n  const clamped = Math.min(safeMax, Math.max(safeMin, Number(value)));\r\n\r\n  const containerClasses = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.container,\r\n        classMap[size],\r\n        classMap[theme],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className\r\n      ),\r\n    [classMap, size, theme, state, className, shadow, rounding]\r\n  );\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const numeric = Number(e.target.value);\r\n    onChange?.(e);\r\n    onValueChange?.(numeric);\r\n  };\r\n\r\n  return (\r\n    <div className={containerClasses} data-testid={`${testId}-container`}>\r\n      {label && (\r\n        <label id={labelId} htmlFor={inputId} className={classMap.label}>\r\n          {label}\r\n        </label>\r\n      )}\r\n\r\n      <div className={classMap.wrapper}>\r\n        <input\r\n          id={inputId}\r\n          type=\"range\"\r\n          className={classMap.slider}\r\n          value={clamped}\r\n          onChange={handleChange}\r\n          min={safeMin}\r\n          max={safeMax}\r\n          step={safeStep}\r\n          aria-labelledby={label ? labelId : undefined}\r\n          aria-label={label ? undefined : ariaLabel || \"Slider\"}\r\n          aria-describedby={valueId}\r\n          disabled={disabled}\r\n          data-testid={testId}\r\n          {...rest}\r\n        />\r\n        {showValue && (\r\n          <output\r\n            id={valueId}\r\n            className={classMap.value}\r\n            htmlFor={inputId}\r\n            data-testid={`${testId}-value`}\r\n          >\r\n            {clamped}\r\n          </output>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nSliderBase.displayName = \"SliderBase\";\r\nexport default SliderBase;\r\n","import React from \"react\";\r\nimport \"./Slider.scss\"; // Non-module SCSS\r\nimport { SliderProps } from \"../Slider.types\";\r\nimport SliderBase from \"../SliderBase\";\r\nimport { combineClassNames } from \"../../../utils/classNames\";\r\n\r\nconst coreStyles = {\r\n  container: \"slider_container\",\r\n  label: \"slider_label\",\r\n  wrapper: \"slider_wrapper\",\r\n  slider: \"slider\",\r\n  value: \"slider_value\",\r\n\r\n  xs: \"slider_xs\",\r\n  small: \"slider_small\",\r\n  medium: \"slider_medium\",\r\n  large: \"slider_large\",\r\n  xl: \"slider_xl\",\r\n\r\n  primary: \"slider_primary\",\r\n  secondary: \"slider_secondary\",\r\n  tertiary: \"slider_tertiary\",\r\n  quaternary: \"slider_quaternary\",\r\n\r\n  success: \"slider_success\",\r\n  error: \"slider_error\",\r\n  warning: \"slider_warning\",\r\n\r\n  clear: \"slider_clear\",\r\n\r\n  shadowNone: \"slider_shadow-None\",\r\n  shadowLight: \"slider_shadow-Light\",\r\n  shadowMedium: \"slider_shadow-Medium\",\r\n  shadowStrong: \"slider_shadow-Strong\",\r\n  shadowIntense: \"slider_shadow-Intense\",\r\n\r\n  roundNone: \"slider_round-None\",\r\n  roundSmall: \"slider_round-Small\",\r\n  roundMedium: \"slider_round-Medium\",\r\n  roundLarge: \"slider_round-Large\",\r\n};\r\n\r\nconst Slider: React.FC<SliderProps> = (props) => {\r\n  return (\r\n    <SliderBase\r\n      {...props}\r\n      className={combineClassNames(props.className)}\r\n      classMap={coreStyles}\r\n    />\r\n  );\r\n};\r\n\r\nexport default Slider;\r\n"],"names":["getDefaultSize","getDefaultRounding","getDefaultShadow","getDefaultTheme","useId","useMemo","combineClassNames","capitalize","jsx","jsxs"],"mappings":"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"}