boreal-ui 0.0.72 → 0.0.73

package/dist/core/{Accordion-CyxuUy_t.cjs → Accordion-7FjsUwVp.cjs}

@@ -28,6 +28,13 @@ const AccordionBase = ({
   className = "",
   getUniqueId,
   classMap,
+  regionAriaLabel,
+  regionAriaLabelledBy,
+  regionAriaDescribedBy,
+  loadingAriaLabel,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   "data-testid": testId = "accordion",
   ...rest
 }) => {
@@ -37,9 +44,17 @@ const AccordionBase = ({
   const [hasBeenExpanded, setHasBeenExpanded] = React.useState(initiallyExpanded);
   const [isLoading, setIsLoading] = React.useState(asyncContent && initiallyExpanded);
   const isExpanded = isControlled ? expanded : internalExpanded;
-  const contentId = `${id || internalId}-content`;
-  const buttonId = `${id || internalId}-button`;
-  const descId = description ? `${id || internalId}-desc` : void 0;
+  const baseId = id || internalId;
+  const contentId = `${baseId}-content`;
+  const buttonId = `${baseId}-button`;
+  const descId = description ? `${baseId}-desc` : void 0;
+  const loadingId = `${baseId}-loading`;
+  const buttonDescribedBy = [descId, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  const regionLabelledBy = regionAriaLabelledBy || (!regionAriaLabel ? buttonId : void 0);
+  const regionDescribedBy = [
+    regionAriaDescribedBy,
+    asyncContent && isExpanded && isLoading ? loadingId : void 0
+  ].filter(Boolean).join(" ") || void 0;
   const toggleAccordion = () => {
     if (disabled) return;
     if (!isToggleable && isExpanded) return;
@@ -56,19 +71,21 @@ const AccordionBase = ({
       toggleAccordion();
     }
   };
-  React.useMemo(() => {
+  React.useEffect(() => {
     if (isExpanded && !hasBeenExpanded) {
       setHasBeenExpanded(true);
     }
-  }, [isExpanded]);
-  React.useMemo(() => {
-    if (asyncContent && isExpanded && isLoading) {
+  }, [isExpanded, hasBeenExpanded]);
+  React.useEffect(() => {
+    if (asyncContent && isExpanded) {
+      setIsLoading(true);
       const timer = setTimeout(() => {
         setIsLoading(false);
       }, 1e3);
       return () => clearTimeout(timer);
     }
-  }, [asyncContent, isExpanded, isLoading]);
+    return void 0;
+  }, [asyncContent, isExpanded]);
   const renderedIcon = isExpanded ? customExpandedIcon ?? "−" : customCollapsedIcon ?? "+";
   const wrapperClassName = React.useMemo(
     () => classNames.combineClassNames(
@@ -81,7 +98,7 @@ const AccordionBase = ({
       isExpanded && classMap.expanded,
       className
     ),
-    [classMap, size, disabled, isExpanded, className]
+    [classMap, size, state, shadow, rounding, disabled, isExpanded, className]
   );
   const headerClassName = React.useMemo(
     () => classNames.combineClassNames(
@@ -92,7 +109,7 @@ const AccordionBase = ({
       disabled && classMap.disabled,
       isExpanded && classMap.expanded
     ),
-    [classMap, isExpanded]
+    [classMap, theme, state, outline, disabled, isExpanded]
   );
   const contentClassName = React.useMemo(
     () => classNames.combineClassNames(classMap.content, isExpanded && classMap.expanded),
@@ -113,8 +130,10 @@ const AccordionBase = ({
         type: "button",
         "aria-expanded": isExpanded,
         "aria-controls": contentId,
-        "aria-disabled": disabled,
-        "aria-describedby": descId,
+        "aria-disabled": disabled || void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": buttonDescribedBy,
         tabIndex: disabled ? -1 : 0,
         disabled,
         "data-testid": testId ? `${testId}-accordion-toggle` : void 0,
@@ -162,12 +181,25 @@ const AccordionBase = ({
       {
         id: contentId,
         role: "region",
-        "aria-labelledby": buttonId,
+        "aria-label": regionAriaLabel,
+        "aria-labelledby": regionLabelledBy,
+        "aria-describedby": regionDescribedBy,
+        "aria-busy": asyncContent && isExpanded && isLoading ? true : void 0,
         className: contentClassName,
         "data-state": isExpanded ? "open" : "collapsed",
         "data-testid": testId ? `${testId}-content` : void 0,
         children: [
-          isExpanded && asyncContent && isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classMap.loading, children: "Loading..." }),
+          isExpanded && asyncContent && isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: loadingId,
+              className: classMap.loading,
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              "data-testid": testId ? `${testId}-loading` : void 0,
+              children: loadingAriaLabel || "Loading content"
+            }
+          ),
           (!lazyLoad || hasBeenExpanded) && (!asyncContent || !isLoading) && children
         ]
       }
@@ -180,7 +212,7 @@ const classes = {
   header: "accordion_header",
   content: "accordion_content",
   icon: "accordion_icon",
-  title: "accordion_title",
+  accordionTitle: "accordion_title",
   shadowNone: "accordion_shadow-None",
   shadowLight: "accordion_shadow-Light",
   shadowMedium: "accordion_shadow-Medium",
@@ -214,4 +246,4 @@ const generateUniqueId = /* @__PURE__ */ (() => {
 const Accordion = (props) => /* @__PURE__ */ jsxRuntime.jsx(AccordionBase, { ...props, getUniqueId: generateUniqueId, classMap: classes });
 Accordion.displayName = "Accordion";
 exports.Accordion = Accordion;
-//# sourceMappingURL=Accordion-CyxuUy_t.cjs.map
+//# sourceMappingURL=Accordion-7FjsUwVp.cjs.map

package/dist/core/Accordion-7FjsUwVp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion-7FjsUwVp.cjs","sources":["../../src/components/Accordion/AccordionBase.tsx","../../src/components/Accordion/core/Accordion.tsx"],"sourcesContent":["import React, { useMemo, useState, KeyboardEvent, useEffect } from \"react\";\r\nimport { AccordionProps } from \"./Accordion.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\nexport interface AccordionBaseProps extends AccordionProps {\r\n  getUniqueId: () => string;\r\n  classMap: Record<string, string>;\r\n}\r\n\r\nexport const AccordionBase: React.FC<AccordionBaseProps> = ({\r\n  title,\r\n  id,\r\n  children,\r\n  lazyLoad = false,\r\n  iconPosition = \"right\",\r\n  isToggleable = true,\r\n  asyncContent = false,\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  description,\r\n  size = getDefaultSize(),\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  outline = false,\r\n  expanded,\r\n  disabled,\r\n  customCollapsedIcon,\r\n  customExpandedIcon,\r\n  onToggle,\r\n  initiallyExpanded = false,\r\n  className = \"\",\r\n  getUniqueId,\r\n  classMap,\r\n  regionAriaLabel,\r\n  regionAriaLabelledBy,\r\n  regionAriaDescribedBy,\r\n  loadingAriaLabel,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"accordion\",\r\n  ...rest\r\n}) => {\r\n  const isControlled = expanded !== undefined;\r\n  const internalId = useMemo(getUniqueId, []);\r\n  const [internalExpanded, setInternalExpanded] = useState(initiallyExpanded);\r\n  const [hasBeenExpanded, setHasBeenExpanded] = useState(initiallyExpanded);\r\n  const [isLoading, setIsLoading] = useState(asyncContent && initiallyExpanded);\r\n\r\n  const isExpanded = isControlled ? expanded : internalExpanded;\r\n\r\n  const baseId = id || internalId;\r\n  const contentId = `${baseId}-content`;\r\n  const buttonId = `${baseId}-button`;\r\n  const descId = description ? `${baseId}-desc` : undefined;\r\n  const loadingId = `${baseId}-loading`;\r\n\r\n  const buttonDescribedBy =\r\n    [descId, ariaDescribedBy].filter(Boolean).join(\" \") || undefined;\r\n\r\n  const regionLabelledBy =\r\n    regionAriaLabelledBy || (!regionAriaLabel ? buttonId : undefined);\r\n\r\n  const regionDescribedBy =\r\n    [\r\n      regionAriaDescribedBy,\r\n      asyncContent && isExpanded && isLoading ? loadingId : undefined,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(\" \") || undefined;\r\n\r\n  const toggleAccordion = () => {\r\n    if (disabled) return;\r\n    if (!isToggleable && isExpanded) return;\r\n\r\n    if (isControlled) {\r\n      onToggle?.(!expanded);\r\n    } else {\r\n      setInternalExpanded((prev) => !prev);\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n    if (disabled) return;\r\n\r\n    if (e.key === \"Enter\" || e.key === \" \") {\r\n      e.preventDefault();\r\n      toggleAccordion();\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isExpanded && !hasBeenExpanded) {\r\n      setHasBeenExpanded(true);\r\n    }\r\n  }, [isExpanded, hasBeenExpanded]);\r\n\r\n  useEffect(() => {\r\n    if (asyncContent && isExpanded) {\r\n      setIsLoading(true);\r\n\r\n      const timer = setTimeout(() => {\r\n        setIsLoading(false);\r\n      }, 1000);\r\n\r\n      return () => clearTimeout(timer);\r\n    }\r\n\r\n    return undefined;\r\n  }, [asyncContent, isExpanded]);\r\n\r\n  const renderedIcon = isExpanded\r\n    ? (customExpandedIcon ?? \"−\")\r\n    : (customCollapsedIcon ?? \"+\");\r\n\r\n  const wrapperClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.accordion,\r\n        classMap[size],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        disabled && classMap.disabled,\r\n        isExpanded && classMap.expanded,\r\n        className,\r\n      ),\r\n    [classMap, size, state, shadow, rounding, disabled, isExpanded, className],\r\n  );\r\n\r\n  const headerClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.header,\r\n        classMap[theme],\r\n        classMap[state],\r\n        outline && classMap.outline,\r\n        disabled && classMap.disabled,\r\n        isExpanded && classMap.expanded,\r\n      ),\r\n    [classMap, theme, state, outline, disabled, isExpanded],\r\n  );\r\n\r\n  const contentClassName = useMemo(\r\n    () => combineClassNames(classMap.content, isExpanded && classMap.expanded),\r\n    [classMap, isExpanded],\r\n  );\r\n\r\n  const iconClassName = useMemo(\r\n    () => combineClassNames(classMap.icon, isExpanded && classMap.expanded),\r\n    [classMap, isExpanded],\r\n  );\r\n\r\n  return (\r\n    <div {...rest} className={wrapperClassName}>\r\n      <button\r\n        id={buttonId}\r\n        className={headerClassName}\r\n        onClick={toggleAccordion}\r\n        onKeyDown={handleKeyDown}\r\n        type=\"button\"\r\n        aria-expanded={isExpanded}\r\n        aria-controls={contentId}\r\n        aria-disabled={disabled || undefined}\r\n        aria-label={ariaLabel}\r\n        aria-labelledby={ariaLabelledBy}\r\n        aria-describedby={buttonDescribedBy}\r\n        tabIndex={disabled ? -1 : 0}\r\n        disabled={disabled}\r\n        data-testid={testId ? `${testId}-accordion-toggle` : undefined}\r\n      >\r\n        {iconPosition === \"left\" && (\r\n          <span\r\n            className={iconClassName}\r\n            aria-hidden=\"true\"\r\n            data-testid={testId ? `${testId}-icon` : undefined}\r\n          >\r\n            {renderedIcon}\r\n          </span>\r\n        )}\r\n\r\n        <span\r\n          className={classMap.accordionTitle}\r\n          data-testid={testId ? `${testId}-title` : undefined}\r\n        >\r\n          {title}\r\n        </span>\r\n\r\n        {iconPosition === \"right\" && (\r\n          <span\r\n            className={iconClassName}\r\n            aria-hidden=\"true\"\r\n            data-testid={testId ? `${testId}-icon` : undefined}\r\n          >\r\n            {renderedIcon}\r\n          </span>\r\n        )}\r\n      </button>\r\n\r\n      {description && (\r\n        <span\r\n          id={descId}\r\n          className=\"sr_only\"\r\n          data-testid={testId ? `${testId}-description` : undefined}\r\n        >\r\n          {description}\r\n        </span>\r\n      )}\r\n\r\n      <div\r\n        id={contentId}\r\n        role=\"region\"\r\n        aria-label={regionAriaLabel}\r\n        aria-labelledby={regionLabelledBy}\r\n        aria-describedby={regionDescribedBy}\r\n        aria-busy={asyncContent && isExpanded && isLoading ? true : undefined}\r\n        className={contentClassName}\r\n        data-state={isExpanded ? \"open\" : \"collapsed\"}\r\n        data-testid={testId ? `${testId}-content` : undefined}\r\n      >\r\n        {isExpanded && asyncContent && isLoading && (\r\n          <div\r\n            id={loadingId}\r\n            className={classMap.loading}\r\n            aria-live=\"polite\"\r\n            aria-atomic=\"true\"\r\n            data-testid={testId ? `${testId}-loading` : undefined}\r\n          >\r\n            {loadingAriaLabel || \"Loading content\"}\r\n          </div>\r\n        )}\r\n\r\n        {(!lazyLoad || hasBeenExpanded) &&\r\n          (!asyncContent || !isLoading) &&\r\n          children}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nAccordionBase.displayName = \"AccordionBase\";\r\n","import React from \"react\";\r\nimport \"./Accordion.scss\";\r\nimport { AccordionBase } from \"../AccordionBase\";\r\nimport type { AccordionProps } from \"../Accordion.types\";\r\n\r\nconst classes = {\r\n  accordion: \"accordion\",\r\n  header: \"accordion_header\",\r\n  content: \"accordion_content\",\r\n  icon: \"accordion_icon\",\r\n  accordionTitle: \"accordion_title\",\r\n\r\n  shadowNone: \"accordion_shadow-None\",\r\n  shadowLight: \"accordion_shadow-Light\",\r\n  shadowMedium: \"accordion_shadow-Medium\",\r\n  shadowStrong: \"accordion_shadow-Strong\",\r\n  shadowIntense: \"accordion_shadow-Intense\",\r\n\r\n  roundNone: \"accordion_round-None\",\r\n  roundSmall: \"accordion_round-Small\",\r\n  roundMedium: \"accordion_round-Medium\",\r\n  roundLarge: \"accordion_round-Large\",\r\n\r\n  disabled: \"accordion_disabled\",\r\n  expanded: \"accordion_expanded\",\r\n\r\n  primary: \"accordion_primary\",\r\n  secondary: \"accordion_secondary\",\r\n\r\n  tertiary: \"accordion_tertiary\",\r\n  quaternary: \"accordion_quaternary\",\r\n\r\n  success: \"accordion_success\",\r\n  error: \"accordion_error\",\r\n  warning: \"accordion_warning\",\r\n  clear: \"accordion_clear\",\r\n  outline: \"accordion_outline\",\r\n\r\n  xs: \"accordion_xs\",\r\n  small: \"accordion_small\",\r\n  medium: \"accordion_medium\",\r\n  large: \"accordion_large\",\r\n  xl: \"accordion_xl\",\r\n};\r\n\r\nconst generateUniqueId = (() => {\r\n  let counter = 0;\r\n  return () => `accordion-core-${counter++}`;\r\n})();\r\n\r\nconst Accordion: React.FC<AccordionProps> = (props) => (\r\n  <AccordionBase {...props} getUniqueId={generateUniqueId} classMap={classes} />\r\n);\r\nAccordion.displayName = \"Accordion\";\r\nexport default Accordion;\r\n"],"names":["getDefaultRounding","getDefaultShadow","getDefaultSize","getDefaultTheme","useMemo","useState","useEffect","combineClassNames","capitalize","jsxs","jsx"],"mappings":"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"}

package/dist/core/{Accordion-BwtII31u.js → Accordion-Bp-rbJiD.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } 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, c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-DsaRlxmw.js";
@@ -27,6 +27,13 @@ const AccordionBase = ({
   className = "",
   getUniqueId,
   classMap,
+  regionAriaLabel,
+  regionAriaLabelledBy,
+  regionAriaDescribedBy,
+  loadingAriaLabel,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   "data-testid": testId = "accordion",
   ...rest
 }) => {
@@ -36,9 +43,17 @@ const AccordionBase = ({
   const [hasBeenExpanded, setHasBeenExpanded] = useState(initiallyExpanded);
   const [isLoading, setIsLoading] = useState(asyncContent && initiallyExpanded);
   const isExpanded = isControlled ? expanded : internalExpanded;
-  const contentId = `${id || internalId}-content`;
-  const buttonId = `${id || internalId}-button`;
-  const descId = description ? `${id || internalId}-desc` : void 0;
+  const baseId = id || internalId;
+  const contentId = `${baseId}-content`;
+  const buttonId = `${baseId}-button`;
+  const descId = description ? `${baseId}-desc` : void 0;
+  const loadingId = `${baseId}-loading`;
+  const buttonDescribedBy = [descId, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  const regionLabelledBy = regionAriaLabelledBy || (!regionAriaLabel ? buttonId : void 0);
+  const regionDescribedBy = [
+    regionAriaDescribedBy,
+    asyncContent && isExpanded && isLoading ? loadingId : void 0
+  ].filter(Boolean).join(" ") || void 0;
   const toggleAccordion = () => {
     if (disabled) return;
     if (!isToggleable && isExpanded) return;
@@ -55,19 +70,21 @@ const AccordionBase = ({
       toggleAccordion();
     }
   };
-  useMemo(() => {
+  useEffect(() => {
     if (isExpanded && !hasBeenExpanded) {
       setHasBeenExpanded(true);
     }
-  }, [isExpanded]);
-  useMemo(() => {
-    if (asyncContent && isExpanded && isLoading) {
+  }, [isExpanded, hasBeenExpanded]);
+  useEffect(() => {
+    if (asyncContent && isExpanded) {
+      setIsLoading(true);
       const timer = setTimeout(() => {
         setIsLoading(false);
       }, 1e3);
       return () => clearTimeout(timer);
     }
-  }, [asyncContent, isExpanded, isLoading]);
+    return void 0;
+  }, [asyncContent, isExpanded]);
   const renderedIcon = isExpanded ? customExpandedIcon ?? "−" : customCollapsedIcon ?? "+";
   const wrapperClassName = useMemo(
     () => combineClassNames(
@@ -80,7 +97,7 @@ const AccordionBase = ({
       isExpanded && classMap.expanded,
       className
     ),
-    [classMap, size, disabled, isExpanded, className]
+    [classMap, size, state, shadow, rounding, disabled, isExpanded, className]
   );
   const headerClassName = useMemo(
     () => combineClassNames(
@@ -91,7 +108,7 @@ const AccordionBase = ({
       disabled && classMap.disabled,
       isExpanded && classMap.expanded
     ),
-    [classMap, isExpanded]
+    [classMap, theme, state, outline, disabled, isExpanded]
   );
   const contentClassName = useMemo(
     () => combineClassNames(classMap.content, isExpanded && classMap.expanded),
@@ -112,8 +129,10 @@ const AccordionBase = ({
         type: "button",
         "aria-expanded": isExpanded,
         "aria-controls": contentId,
-        "aria-disabled": disabled,
-        "aria-describedby": descId,
+        "aria-disabled": disabled || void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": buttonDescribedBy,
         tabIndex: disabled ? -1 : 0,
         disabled,
         "data-testid": testId ? `${testId}-accordion-toggle` : void 0,
@@ -161,12 +180,25 @@ const AccordionBase = ({
       {
         id: contentId,
         role: "region",
-        "aria-labelledby": buttonId,
+        "aria-label": regionAriaLabel,
+        "aria-labelledby": regionLabelledBy,
+        "aria-describedby": regionDescribedBy,
+        "aria-busy": asyncContent && isExpanded && isLoading ? true : void 0,
         className: contentClassName,
         "data-state": isExpanded ? "open" : "collapsed",
         "data-testid": testId ? `${testId}-content` : void 0,
         children: [
-          isExpanded && asyncContent && isLoading && /* @__PURE__ */ jsx("div", { className: classMap.loading, children: "Loading..." }),
+          isExpanded && asyncContent && isLoading && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: loadingId,
+              className: classMap.loading,
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              "data-testid": testId ? `${testId}-loading` : void 0,
+              children: loadingAriaLabel || "Loading content"
+            }
+          ),
           (!lazyLoad || hasBeenExpanded) && (!asyncContent || !isLoading) && children
         ]
       }
@@ -179,7 +211,7 @@ const classes = {
   header: "accordion_header",
   content: "accordion_content",
   icon: "accordion_icon",
-  title: "accordion_title",
+  accordionTitle: "accordion_title",
   shadowNone: "accordion_shadow-None",
   shadowLight: "accordion_shadow-Light",
   shadowMedium: "accordion_shadow-Medium",
@@ -215,4 +247,4 @@ Accordion.displayName = "Accordion";
 export {
   Accordion as A
 };
-//# sourceMappingURL=Accordion-BwtII31u.js.map
+//# sourceMappingURL=Accordion-Bp-rbJiD.js.map

package/dist/core/Accordion-Bp-rbJiD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion-Bp-rbJiD.js","sources":["../../src/components/Accordion/AccordionBase.tsx","../../src/components/Accordion/core/Accordion.tsx"],"sourcesContent":["import React, { useMemo, useState, KeyboardEvent, useEffect } from \"react\";\r\nimport { AccordionProps } from \"./Accordion.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\nexport interface AccordionBaseProps extends AccordionProps {\r\n  getUniqueId: () => string;\r\n  classMap: Record<string, string>;\r\n}\r\n\r\nexport const AccordionBase: React.FC<AccordionBaseProps> = ({\r\n  title,\r\n  id,\r\n  children,\r\n  lazyLoad = false,\r\n  iconPosition = \"right\",\r\n  isToggleable = true,\r\n  asyncContent = false,\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  description,\r\n  size = getDefaultSize(),\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  outline = false,\r\n  expanded,\r\n  disabled,\r\n  customCollapsedIcon,\r\n  customExpandedIcon,\r\n  onToggle,\r\n  initiallyExpanded = false,\r\n  className = \"\",\r\n  getUniqueId,\r\n  classMap,\r\n  regionAriaLabel,\r\n  regionAriaLabelledBy,\r\n  regionAriaDescribedBy,\r\n  loadingAriaLabel,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"accordion\",\r\n  ...rest\r\n}) => {\r\n  const isControlled = expanded !== undefined;\r\n  const internalId = useMemo(getUniqueId, []);\r\n  const [internalExpanded, setInternalExpanded] = useState(initiallyExpanded);\r\n  const [hasBeenExpanded, setHasBeenExpanded] = useState(initiallyExpanded);\r\n  const [isLoading, setIsLoading] = useState(asyncContent && initiallyExpanded);\r\n\r\n  const isExpanded = isControlled ? expanded : internalExpanded;\r\n\r\n  const baseId = id || internalId;\r\n  const contentId = `${baseId}-content`;\r\n  const buttonId = `${baseId}-button`;\r\n  const descId = description ? `${baseId}-desc` : undefined;\r\n  const loadingId = `${baseId}-loading`;\r\n\r\n  const buttonDescribedBy =\r\n    [descId, ariaDescribedBy].filter(Boolean).join(\" \") || undefined;\r\n\r\n  const regionLabelledBy =\r\n    regionAriaLabelledBy || (!regionAriaLabel ? buttonId : undefined);\r\n\r\n  const regionDescribedBy =\r\n    [\r\n      regionAriaDescribedBy,\r\n      asyncContent && isExpanded && isLoading ? loadingId : undefined,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(\" \") || undefined;\r\n\r\n  const toggleAccordion = () => {\r\n    if (disabled) return;\r\n    if (!isToggleable && isExpanded) return;\r\n\r\n    if (isControlled) {\r\n      onToggle?.(!expanded);\r\n    } else {\r\n      setInternalExpanded((prev) => !prev);\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n    if (disabled) return;\r\n\r\n    if (e.key === \"Enter\" || e.key === \" \") {\r\n      e.preventDefault();\r\n      toggleAccordion();\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isExpanded && !hasBeenExpanded) {\r\n      setHasBeenExpanded(true);\r\n    }\r\n  }, [isExpanded, hasBeenExpanded]);\r\n\r\n  useEffect(() => {\r\n    if (asyncContent && isExpanded) {\r\n      setIsLoading(true);\r\n\r\n      const timer = setTimeout(() => {\r\n        setIsLoading(false);\r\n      }, 1000);\r\n\r\n      return () => clearTimeout(timer);\r\n    }\r\n\r\n    return undefined;\r\n  }, [asyncContent, isExpanded]);\r\n\r\n  const renderedIcon = isExpanded\r\n    ? (customExpandedIcon ?? \"−\")\r\n    : (customCollapsedIcon ?? \"+\");\r\n\r\n  const wrapperClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.accordion,\r\n        classMap[size],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        disabled && classMap.disabled,\r\n        isExpanded && classMap.expanded,\r\n        className,\r\n      ),\r\n    [classMap, size, state, shadow, rounding, disabled, isExpanded, className],\r\n  );\r\n\r\n  const headerClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.header,\r\n        classMap[theme],\r\n        classMap[state],\r\n        outline && classMap.outline,\r\n        disabled && classMap.disabled,\r\n        isExpanded && classMap.expanded,\r\n      ),\r\n    [classMap, theme, state, outline, disabled, isExpanded],\r\n  );\r\n\r\n  const contentClassName = useMemo(\r\n    () => combineClassNames(classMap.content, isExpanded && classMap.expanded),\r\n    [classMap, isExpanded],\r\n  );\r\n\r\n  const iconClassName = useMemo(\r\n    () => combineClassNames(classMap.icon, isExpanded && classMap.expanded),\r\n    [classMap, isExpanded],\r\n  );\r\n\r\n  return (\r\n    <div {...rest} className={wrapperClassName}>\r\n      <button\r\n        id={buttonId}\r\n        className={headerClassName}\r\n        onClick={toggleAccordion}\r\n        onKeyDown={handleKeyDown}\r\n        type=\"button\"\r\n        aria-expanded={isExpanded}\r\n        aria-controls={contentId}\r\n        aria-disabled={disabled || undefined}\r\n        aria-label={ariaLabel}\r\n        aria-labelledby={ariaLabelledBy}\r\n        aria-describedby={buttonDescribedBy}\r\n        tabIndex={disabled ? -1 : 0}\r\n        disabled={disabled}\r\n        data-testid={testId ? `${testId}-accordion-toggle` : undefined}\r\n      >\r\n        {iconPosition === \"left\" && (\r\n          <span\r\n            className={iconClassName}\r\n            aria-hidden=\"true\"\r\n            data-testid={testId ? `${testId}-icon` : undefined}\r\n          >\r\n            {renderedIcon}\r\n          </span>\r\n        )}\r\n\r\n        <span\r\n          className={classMap.accordionTitle}\r\n          data-testid={testId ? `${testId}-title` : undefined}\r\n        >\r\n          {title}\r\n        </span>\r\n\r\n        {iconPosition === \"right\" && (\r\n          <span\r\n            className={iconClassName}\r\n            aria-hidden=\"true\"\r\n            data-testid={testId ? `${testId}-icon` : undefined}\r\n          >\r\n            {renderedIcon}\r\n          </span>\r\n        )}\r\n      </button>\r\n\r\n      {description && (\r\n        <span\r\n          id={descId}\r\n          className=\"sr_only\"\r\n          data-testid={testId ? `${testId}-description` : undefined}\r\n        >\r\n          {description}\r\n        </span>\r\n      )}\r\n\r\n      <div\r\n        id={contentId}\r\n        role=\"region\"\r\n        aria-label={regionAriaLabel}\r\n        aria-labelledby={regionLabelledBy}\r\n        aria-describedby={regionDescribedBy}\r\n        aria-busy={asyncContent && isExpanded && isLoading ? true : undefined}\r\n        className={contentClassName}\r\n        data-state={isExpanded ? \"open\" : \"collapsed\"}\r\n        data-testid={testId ? `${testId}-content` : undefined}\r\n      >\r\n        {isExpanded && asyncContent && isLoading && (\r\n          <div\r\n            id={loadingId}\r\n            className={classMap.loading}\r\n            aria-live=\"polite\"\r\n            aria-atomic=\"true\"\r\n            data-testid={testId ? `${testId}-loading` : undefined}\r\n          >\r\n            {loadingAriaLabel || \"Loading content\"}\r\n          </div>\r\n        )}\r\n\r\n        {(!lazyLoad || hasBeenExpanded) &&\r\n          (!asyncContent || !isLoading) &&\r\n          children}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nAccordionBase.displayName = \"AccordionBase\";\r\n","import React from \"react\";\r\nimport \"./Accordion.scss\";\r\nimport { AccordionBase } from \"../AccordionBase\";\r\nimport type { AccordionProps } from \"../Accordion.types\";\r\n\r\nconst classes = {\r\n  accordion: \"accordion\",\r\n  header: \"accordion_header\",\r\n  content: \"accordion_content\",\r\n  icon: \"accordion_icon\",\r\n  accordionTitle: \"accordion_title\",\r\n\r\n  shadowNone: \"accordion_shadow-None\",\r\n  shadowLight: \"accordion_shadow-Light\",\r\n  shadowMedium: \"accordion_shadow-Medium\",\r\n  shadowStrong: \"accordion_shadow-Strong\",\r\n  shadowIntense: \"accordion_shadow-Intense\",\r\n\r\n  roundNone: \"accordion_round-None\",\r\n  roundSmall: \"accordion_round-Small\",\r\n  roundMedium: \"accordion_round-Medium\",\r\n  roundLarge: \"accordion_round-Large\",\r\n\r\n  disabled: \"accordion_disabled\",\r\n  expanded: \"accordion_expanded\",\r\n\r\n  primary: \"accordion_primary\",\r\n  secondary: \"accordion_secondary\",\r\n\r\n  tertiary: \"accordion_tertiary\",\r\n  quaternary: \"accordion_quaternary\",\r\n\r\n  success: \"accordion_success\",\r\n  error: \"accordion_error\",\r\n  warning: \"accordion_warning\",\r\n  clear: \"accordion_clear\",\r\n  outline: \"accordion_outline\",\r\n\r\n  xs: \"accordion_xs\",\r\n  small: \"accordion_small\",\r\n  medium: \"accordion_medium\",\r\n  large: \"accordion_large\",\r\n  xl: \"accordion_xl\",\r\n};\r\n\r\nconst generateUniqueId = (() => {\r\n  let counter = 0;\r\n  return () => `accordion-core-${counter++}`;\r\n})();\r\n\r\nconst Accordion: React.FC<AccordionProps> = (props) => (\r\n  <AccordionBase {...props} getUniqueId={generateUniqueId} classMap={classes} />\r\n);\r\nAccordion.displayName = \"Accordion\";\r\nexport default Accordion;\r\n"],"names":[],"mappings":"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"}

package/dist/core/Accordion.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Accordion = require("./Accordion-CyxuUy_t.cjs");
+const Accordion = require("./Accordion-7FjsUwVp.cjs");
 module.exports = Accordion.Accordion;
 //# sourceMappingURL=Accordion.cjs.js.map

package/dist/core/Accordion.js

@@ -1,4 +1,4 @@
-import { A } from "./Accordion-BwtII31u.js";
+import { A } from "./Accordion-Bp-rbJiD.js";
 export {
   A as default
 };

package/dist/core/{Avatar-CUSWjsVo.js → Avatar-Ct2kXkNR.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useMemo } from "react";
+import { forwardRef, useState, useId, useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
 import { b as getDefaultShadow, c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-DsaRlxmw.js";
@@ -54,6 +54,7 @@ const AvatarBase = forwardRef(function AvatarBase2({
   disabled = false,
   href,
   status,
+  statusLabel,
   statusIcon,
   statusPosition = "bottomRight",
   fallback,
@@ -69,16 +70,42 @@ const AvatarBase = forwardRef(function AvatarBase2({
   ImageComponent = "img",
   LinkComponent = "a",
   classMap,
+  role,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-current": ariaCurrent,
   "data-testid": testId = "avatar",
   ...rest
 }, ref) {
   const [imgError, setImgError] = useState(false);
+  const generatedStatusId = useId();
   const computedLabel = label || alt || name || "User avatar";
+  const describedBy = useMemo(() => {
+    const ids = [];
+    if (ariaDescribedBy) {
+      ids.push(ariaDescribedBy);
+    }
+    if (statusLabel && (status || statusIcon)) {
+      ids.push(generatedStatusId);
+    }
+    return ids.length > 0 ? ids.join(" ") : void 0;
+  }, [ariaDescribedBy, statusLabel, status, statusIcon, generatedStatusId]);
   const linkAria = {
-    "aria-label": computedLabel,
+    role,
+    "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? computedLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": describedBy,
+    "aria-current": ariaCurrent,
     "aria-disabled": disabled || void 0
   };
-  const buttonAria = { "aria-label": computedLabel };
+  const buttonAria = {
+    role,
+    "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? computedLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": describedBy,
+    "aria-current": ariaCurrent
+  };
   const fallbackContent = fallback ?? (name ? getInitials(name) : /* @__PURE__ */ jsx(FallbackUserIcon, { className: classMap.fallback_icon }));
   const combinedClassName = useMemo(
     () => combineClassNames(
@@ -111,7 +138,7 @@ const AvatarBase = forwardRef(function AvatarBase2({
     ImageComponent,
     {
       src,
-      alt: computedLabel,
+      alt: alt || computedLabel,
       className: classMap.image,
       onError: () => setImgError(true),
       ...priority ? { loading: "eager" } : { loading: "lazy" },
@@ -122,27 +149,37 @@ const AvatarBase = forwardRef(function AvatarBase2({
     "span",
     {
       className: classMap.initials,
-      role: "img",
-      "aria-label": computedLabel,
       title: computedLabel,
+      "aria-hidden": children ? true : void 0,
       "data-testid": testId ? `${testId}-initials` : void 0,
       children: fallbackContent
     }
   );
-  const statusIndicator = (status || statusIcon) && /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: combineClassNames(
-        classMap.status,
-        status && classMap[status],
-        statusIcon ? classMap.icon_only : void 0,
-        classMap[statusPosition]
-      ),
-      "aria-hidden": "true",
-      "data-testid": testId ? `${testId}-status` : void 0,
-      children: statusIcon || /* @__PURE__ */ jsx("span", { className: classMap.dot })
-    }
-  );
+  const statusIndicator = (status || statusIcon) && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: combineClassNames(
+          classMap.status,
+          status && classMap[status],
+          statusIcon ? classMap.icon_only : void 0,
+          classMap[statusPosition]
+        ),
+        "aria-hidden": "true",
+        "data-testid": testId ? `${testId}-status` : void 0,
+        children: statusIcon || /* @__PURE__ */ jsx("span", { className: classMap.dot })
+      }
+    ),
+    statusLabel ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: generatedStatusId,
+        className: classMap.srOnly,
+        "data-testid": testId ? `${testId}-status-label` : void 0,
+        children: statusLabel
+      }
+    ) : null
+  ] });
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     children ?? avatarContent,
     statusIndicator
@@ -251,4 +288,4 @@ Avatar.displayName = "Avatar";
 export {
   Avatar as A
 };
-//# sourceMappingURL=Avatar-CUSWjsVo.js.map
+//# sourceMappingURL=Avatar-Ct2kXkNR.js.map

package/dist/core/Avatar-Ct2kXkNR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-Ct2kXkNR.js","sources":["../../src/utils/getInitials.ts","../../src/Icons/UserIcon.tsx","../../src/components/Avatar/AvatarBase.tsx","../../src/components/Avatar/core/Avatar.tsx"],"sourcesContent":["/**\r\n * Returns the initials from a given full name string.\r\n *\r\n * Extracts the first character from the first word and the first character of the second word (if available).\r\n * If only one word is provided, it uses the first two characters of that word as a fallback.\r\n * If no valid characters are found, it returns \"?\".\r\n *\r\n * @param {string} name - The full name to extract initials from.\r\n * @returns {string} A string of up to two uppercase initials, or \"?\" if the input is empty or invalid.\r\n *\r\n * @example\r\n * getInitials(\"John Doe\"); // \"JD\"\r\n * getInitials(\"Alice\");    // \"AL\"\r\n * getInitials(\"   \");      // \"?\"\r\n */\r\nexport const getInitials = (name: string): string => {\r\n  const words = name.trim().split(/\\s+/);\r\n  const first = words[0]?.[0] || \"\";\r\n  const second = words[1]?.[0] || words[0]?.[1] || \"\";\r\n  return (first + second).toUpperCase() || \"?\";\r\n};\r\n","const FallbackUserIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n  <svg\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    strokeWidth=\"1.5\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    color=\"currentColor\"\r\n    {...props}\r\n  >\r\n    <path\r\n      d=\"M5 20V19C5 15.134 8.13401 12 12 12V12C15.866 12 19 15.134 19 19V20\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n  </svg>\r\n);\r\n\r\nexport default FallbackUserIcon;\r\n","import React, {\r\n  useMemo,\r\n  useState,\r\n  MouseEvent,\r\n  AnchorHTMLAttributes,\r\n  ButtonHTMLAttributes,\r\n  forwardRef,\r\n  useId,\r\n} from \"react\";\r\nimport { AvatarBaseProps } from \"./Avatar.types\";\r\nimport { getInitials } from \"../../utils/getInitials\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { FallbackUserIcon } from \"../../Icons/index\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport const AvatarBase = forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  AvatarBaseProps\r\n>(function AvatarBase(\r\n  {\r\n    src,\r\n    alt,\r\n    name = \"\",\r\n    label,\r\n    onClick,\r\n    disabled = false,\r\n    href,\r\n    status,\r\n    statusLabel,\r\n    statusIcon,\r\n    statusPosition = \"bottomRight\",\r\n    fallback,\r\n    children,\r\n    size = getDefaultSize(),\r\n    shadow = getDefaultShadow(),\r\n    shape = \"circle\",\r\n    outline = false,\r\n    theme = getDefaultTheme(),\r\n    state = \"\",\r\n    className = \"\",\r\n    priority = false,\r\n    ImageComponent = \"img\",\r\n    LinkComponent = \"a\",\r\n    classMap,\r\n    role,\r\n    \"aria-label\": ariaLabel,\r\n    \"aria-labelledby\": ariaLabelledBy,\r\n    \"aria-describedby\": ariaDescribedBy,\r\n    \"aria-current\": ariaCurrent,\r\n    \"data-testid\": testId = \"avatar\",\r\n    ...rest\r\n  },\r\n  ref,\r\n) {\r\n  const [imgError, setImgError] = useState(false);\r\n  const generatedStatusId = useId();\r\n\r\n  const computedLabel = label || alt || name || \"User avatar\";\r\n\r\n  const describedBy = useMemo(() => {\r\n    const ids: string[] = [];\r\n\r\n    if (ariaDescribedBy) {\r\n      ids.push(ariaDescribedBy);\r\n    }\r\n\r\n    if (statusLabel && (status || statusIcon)) {\r\n      ids.push(generatedStatusId);\r\n    }\r\n\r\n    return ids.length > 0 ? ids.join(\" \") : undefined;\r\n  }, [ariaDescribedBy, statusLabel, status, statusIcon, generatedStatusId]);\r\n\r\n  const linkAria = {\r\n    role,\r\n    \"aria-label\": ariaLabelledBy ? undefined : (ariaLabel ?? computedLabel),\r\n    \"aria-labelledby\": ariaLabelledBy,\r\n    \"aria-describedby\": describedBy,\r\n    \"aria-current\": ariaCurrent,\r\n    \"aria-disabled\": disabled || undefined,\r\n  } as const;\r\n\r\n  const buttonAria = {\r\n    role,\r\n    \"aria-label\": ariaLabelledBy ? undefined : (ariaLabel ?? computedLabel),\r\n    \"aria-labelledby\": ariaLabelledBy,\r\n    \"aria-describedby\": describedBy,\r\n    \"aria-current\": ariaCurrent,\r\n  } as const;\r\n\r\n  const fallbackContent =\r\n    fallback ??\r\n    (name ? (\r\n      getInitials(name)\r\n    ) : (\r\n      <FallbackUserIcon className={classMap.fallback_icon} />\r\n    ));\r\n\r\n  const combinedClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.avatar,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[shape],\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        disabled && classMap.disabled,\r\n        outline && classMap.outline,\r\n        onClick && classMap.clickable,\r\n        className,\r\n      ),\r\n    [\r\n      theme,\r\n      state,\r\n      shape,\r\n      size,\r\n      shadow,\r\n      disabled,\r\n      outline,\r\n      onClick,\r\n      className,\r\n      classMap,\r\n    ],\r\n  );\r\n\r\n  const isNextImage = typeof ImageComponent !== \"string\";\r\n\r\n  const avatarContent =\r\n    !imgError && src ? (\r\n      <ImageComponent\r\n        src={src}\r\n        alt={alt || computedLabel}\r\n        className={classMap.image}\r\n        onError={() => setImgError(true)}\r\n        {...(priority\r\n          ? { loading: \"eager\" as const }\r\n          : { loading: \"lazy\" as const })}\r\n        {...(isNextImage ? { fill: true } : {})}\r\n        data-testid={testId ? `${testId}-image` : undefined}\r\n      />\r\n    ) : (\r\n      <span\r\n        className={classMap.initials}\r\n        title={computedLabel}\r\n        aria-hidden={children ? true : undefined}\r\n        data-testid={testId ? `${testId}-initials` : undefined}\r\n      >\r\n        {fallbackContent}\r\n      </span>\r\n    );\r\n\r\n  const statusIndicator = (status || statusIcon) && (\r\n    <>\r\n      <span\r\n        className={combineClassNames(\r\n          classMap.status,\r\n          status && classMap[status],\r\n          statusIcon ? classMap.icon_only : undefined,\r\n          classMap[statusPosition],\r\n        )}\r\n        aria-hidden=\"true\"\r\n        data-testid={testId ? `${testId}-status` : undefined}\r\n      >\r\n        {statusIcon || <span className={classMap.dot} />}\r\n      </span>\r\n\r\n      {statusLabel ? (\r\n        <span\r\n          id={generatedStatusId}\r\n          className={classMap.srOnly}\r\n          data-testid={testId ? `${testId}-status-label` : undefined}\r\n        >\r\n          {statusLabel}\r\n        </span>\r\n      ) : null}\r\n    </>\r\n  );\r\n\r\n  const content = (\r\n    <>\r\n      {children ?? avatarContent}\r\n      {statusIndicator}\r\n    </>\r\n  );\r\n\r\n  const handleClick = (e: MouseEvent<HTMLElement>) => {\r\n    if (disabled) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    onClick?.(e as MouseEvent<HTMLButtonElement | HTMLAnchorElement>);\r\n  };\r\n\r\n  if (href) {\r\n    const isHttp = /^https?:\\/\\//i.test(href);\r\n\r\n    return LinkComponent === \"a\" ? (\r\n      <a\r\n        ref={ref as React.Ref<HTMLAnchorElement>}\r\n        href={disabled ? undefined : href}\r\n        className={combinedClassName}\r\n        onClick={handleClick}\r\n        data-testid={testId ? `${testId}-main` : undefined}\r\n        target={isHttp && !disabled ? \"_blank\" : undefined}\r\n        rel={isHttp && !disabled ? \"noopener noreferrer\" : undefined}\r\n        tabIndex={disabled ? -1 : 0}\r\n        {...linkAria}\r\n        {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}\r\n      >\r\n        {content}\r\n      </a>\r\n    ) : (\r\n      <LinkComponent\r\n        ref={ref}\r\n        href={href}\r\n        className={combinedClassName}\r\n        onClick={handleClick}\r\n        data-testid={testId ? `${testId}-main` : undefined}\r\n        tabIndex={disabled ? -1 : 0}\r\n        {...linkAria}\r\n        {...(rest as Record<string, unknown>)}\r\n      >\r\n        {content}\r\n      </LinkComponent>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button\r\n      ref={ref as React.Ref<HTMLButtonElement>}\r\n      type=\"button\"\r\n      className={combinedClassName}\r\n      onClick={handleClick}\r\n      disabled={disabled}\r\n      data-testid={testId ? `${testId}-main` : undefined}\r\n      {...buttonAria}\r\n      {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}\r\n    >\r\n      {content}\r\n    </button>\r\n  );\r\n});\r\n\r\nAvatarBase.displayName = \"AvatarBase\";\r\n","import { forwardRef } from \"react\";\r\nimport \"./Avatar.scss\";\r\nimport { AvatarProps } from \"../Avatar.types\";\r\nimport { AvatarBase } from \"../AvatarBase\";\r\n\r\nconst classes = {\r\n  avatar: \"avatar\",\r\n  primary: \"avatar_primary\",\r\n  secondary: \"avatar_secondary\",\r\n  tertiary: \"avatar_tertiary\",\r\n  quaternary: \"avatar_quaternary\",\r\n  success: \"avatar_success\",\r\n  warning: \"avatar_warning\",\r\n  error: \"avatar_error\",\r\n  clear: \"avatar_clear\",\r\n  outline: \"avatar_outline\",\r\n\r\n  clickable: \"avatar_clickable\",\r\n  disabled: \"avatar_disabled\",\r\n\r\n  circle: \"avatar_circle\",\r\n  square: \"avatar_square\",\r\n  rounded: \"avatar_rounded\",\r\n\r\n  xs: \"avatar_xs\",\r\n  small: \"avatar_small\",\r\n  medium: \"avatar_medium\",\r\n  large: \"avatar_large\",\r\n  xl: \"avatar_xl\",\r\n\r\n  shadowNone: \"avatar_shadow-None\",\r\n  shadowLight: \"avatar_shadow-Light\",\r\n  shadowMedium: \"avatar_shadow-Medium\",\r\n  shadowStrong: \"avatar_shadow-Strong\",\r\n  shadowIntense: \"avatar_shadow-Intense\",\r\n\r\n  image: \"avatar_image\",\r\n  initials: \"avatar_initials\",\r\n  fallback_icon: \"avatar_fallback_icon\",\r\n  icon_only: \"avatar_icon_only\",\r\n  status: \"avatar_status\",\r\n  online: \"avatar_status_online\",\r\n  offline: \"avatar_status_offline\",\r\n  away: \"avatar_status_away\",\r\n  busy: \"avatar_status_busy\",\r\n  topRight: \"avatar_status_topRight\",\r\n  bottomRight: \"avatar_status_bottomRight\",\r\n  bottomLeft: \"avatar_status_bottomLeft\",\r\n  topLeft: \"avatar_status_topLeft\",\r\n\r\n  dot: \"avatar_dot\",\r\n};\r\n\r\nconst Avatar = forwardRef<HTMLButtonElement | HTMLAnchorElement, AvatarProps>(\r\n  (props, ref) => <AvatarBase {...props} classMap={classes} ref={ref} />\r\n);\r\nAvatar.displayName = \"Avatar\";\r\nexport default Avatar;\r\n"],"names":["AvatarBase"],"mappings":"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"}

package/dist/core/{Avatar-CxrSOiu7.cjs → Avatar-jxGFijtF.cjs}

@@ -55,6 +55,7 @@ const AvatarBase = React.forwardRef(function AvatarBase2({
   disabled = false,
   href,
   status,
+  statusLabel,
   statusIcon,
   statusPosition = "bottomRight",
   fallback,
@@ -70,16 +71,42 @@ const AvatarBase = React.forwardRef(function AvatarBase2({
   ImageComponent = "img",
   LinkComponent = "a",
   classMap,
+  role,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-current": ariaCurrent,
   "data-testid": testId = "avatar",
   ...rest
 }, ref) {
   const [imgError, setImgError] = React.useState(false);
+  const generatedStatusId = React.useId();
   const computedLabel = label || alt || name || "User avatar";
+  const describedBy = React.useMemo(() => {
+    const ids = [];
+    if (ariaDescribedBy) {
+      ids.push(ariaDescribedBy);
+    }
+    if (statusLabel && (status || statusIcon)) {
+      ids.push(generatedStatusId);
+    }
+    return ids.length > 0 ? ids.join(" ") : void 0;
+  }, [ariaDescribedBy, statusLabel, status, statusIcon, generatedStatusId]);
   const linkAria = {
-    "aria-label": computedLabel,
+    role,
+    "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? computedLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": describedBy,
+    "aria-current": ariaCurrent,
     "aria-disabled": disabled || void 0
   };
-  const buttonAria = { "aria-label": computedLabel };
+  const buttonAria = {
+    role,
+    "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? computedLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": describedBy,
+    "aria-current": ariaCurrent
+  };
   const fallbackContent = fallback ?? (name ? getInitials(name) : /* @__PURE__ */ jsxRuntime.jsx(FallbackUserIcon, { className: classMap.fallback_icon }));
   const combinedClassName = React.useMemo(
     () => classNames.combineClassNames(
@@ -112,7 +139,7 @@ const AvatarBase = React.forwardRef(function AvatarBase2({
     ImageComponent,
     {
       src,
-      alt: computedLabel,
+      alt: alt || computedLabel,
       className: classMap.image,
       onError: () => setImgError(true),
       ...priority ? { loading: "eager" } : { loading: "lazy" },
@@ -123,27 +150,37 @@ const AvatarBase = React.forwardRef(function AvatarBase2({
     "span",
     {
       className: classMap.initials,
-      role: "img",
-      "aria-label": computedLabel,
       title: computedLabel,
+      "aria-hidden": children ? true : void 0,
       "data-testid": testId ? `${testId}-initials` : void 0,
       children: fallbackContent
     }
   );
-  const statusIndicator = (status || statusIcon) && /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: classNames.combineClassNames(
-        classMap.status,
-        status && classMap[status],
-        statusIcon ? classMap.icon_only : void 0,
-        classMap[statusPosition]
-      ),
-      "aria-hidden": "true",
-      "data-testid": testId ? `${testId}-status` : void 0,
-      children: statusIcon || /* @__PURE__ */ jsxRuntime.jsx("span", { className: classMap.dot })
-    }
-  );
+  const statusIndicator = (status || statusIcon) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: classNames.combineClassNames(
+          classMap.status,
+          status && classMap[status],
+          statusIcon ? classMap.icon_only : void 0,
+          classMap[statusPosition]
+        ),
+        "aria-hidden": "true",
+        "data-testid": testId ? `${testId}-status` : void 0,
+        children: statusIcon || /* @__PURE__ */ jsxRuntime.jsx("span", { className: classMap.dot })
+      }
+    ),
+    statusLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: generatedStatusId,
+        className: classMap.srOnly,
+        "data-testid": testId ? `${testId}-status-label` : void 0,
+        children: statusLabel
+      }
+    ) : null
+  ] });
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     children ?? avatarContent,
     statusIndicator
@@ -250,4 +287,4 @@ const Avatar = React.forwardRef(
 );
 Avatar.displayName = "Avatar";
 exports.Avatar = Avatar;
-//# sourceMappingURL=Avatar-CxrSOiu7.cjs.map
+//# sourceMappingURL=Avatar-jxGFijtF.cjs.map