boreal-ui 0.0.72 → 0.0.73

package/dist/next/{Chip-dGaHUdOu.js → Chip-CuaKFQku.js}

@@ -1,18 +1,20 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
+import { useState, useMemo, useCallback, useEffect } from "react";
 import { createPortal } from "react-dom";
 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";
 import { C as CloseIcon } from "./CloseIcon-C3eQm4EK.js";
 /* empty css                 */
-import { I as IconButton } from "./IconButton-BCPASTa0.js";
+import { I as IconButton } from "./IconButton-CNiln4Qf.js";
 const ChipBase = ({
   id,
   message: message2,
   visible,
   onClose,
   icon: Icon,
+  iconDecorative = true,
+  iconAriaLabel,
   size = getDefaultSize(),
   theme = getDefaultTheme(),
   rounding = getDefaultRounding(),
@@ -27,9 +29,24 @@ const ChipBase = ({
   IconButtonComponent,
   classMap,
   stackIndex,
-  "data-testid": testId = "chip"
+  role = "alert",
+  closeButtonAriaLabel = "Close notification",
+  messageId,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic,
+  "aria-relevant": ariaRelevant,
+  "aria-hidden": ariaHidden,
+  "data-testid": testId = "chip",
+  ...rest
 }) => {
   const [closing, setClosing] = useState(false);
+  const resolvedMessageId = useMemo(
+    () => messageId ?? `${id || testId}-message`,
+    [messageId, id, testId]
+  );
   const handleClose = useCallback(() => {
     setClosing(true);
     setTimeout(() => onClose == null ? void 0 : onClose(), 300);
@@ -68,31 +85,47 @@ const ChipBase = ({
   const chipElement = /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
       className: chipClassName,
-      role: "alert",
-      "aria-live": "assertive",
-      "aria-atomic": "true",
+      role,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-live": ariaLive ?? (role === "alert" ? "assertive" : "polite"),
+      "aria-atomic": ariaAtomic ?? true,
+      "aria-relevant": ariaRelevant,
+      "aria-hidden": ariaHidden,
       "data-testid": testId,
       style: stackIndex != null ? { zIndex: stackIndex } : void 0,
+      ...rest,
       children: [
         Icon && /* @__PURE__ */ jsx(
           "span",
           {
             className: classMap.icon,
-            "aria-hidden": "true",
+            "aria-hidden": iconDecorative ? "true" : void 0,
+            "aria-label": !iconDecorative ? iconAriaLabel : void 0,
             "data-testid": `${testId}-icon`,
             children: /* @__PURE__ */ jsx(Icon, { className: classMap.inner_icon })
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: classMap.message, id: `${testId}-message`, children: message2 }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classMap.message,
+            id: resolvedMessageId,
+            "data-testid": `${testId}-message`,
+            children: message2
+          }
+        ),
         /* @__PURE__ */ jsx(
           IconButtonComponent,
           {
             icon: CloseIcon2,
             size,
             theme: "clear",
-            ariaLabel: "Close notification",
-            "aria-controls": `${testId}-message`,
+            "aria-label": closeButtonAriaLabel,
+            "aria-controls": resolvedMessageId,
             className: classMap.close,
             onClick: handleClose,
             shadow: "none",
@@ -215,4 +248,4 @@ Chip.displayName = "Chip";
 export {
   Chip as C
 };
-//# sourceMappingURL=Chip-dGaHUdOu.js.map
+//# sourceMappingURL=Chip-CuaKFQku.js.map

package/dist/next/Chip-CuaKFQku.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-CuaKFQku.js","sources":["../../src/components/Chip/ChipBase.tsx","../../src/components/Chip/next/Chip.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\nimport { ChipBaseProps } from \"./Chip.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 ChipBase: React.FC<ChipBaseProps> = ({\r\n  id,\r\n  message,\r\n  visible,\r\n  onClose,\r\n  icon: Icon,\r\n  iconDecorative = true,\r\n  iconAriaLabel,\r\n  size = getDefaultSize(),\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  state = \"\",\r\n  position = \"topCenter\",\r\n  usePortal = true,\r\n  className = \"\",\r\n  autoClose = true,\r\n  duration = 3000,\r\n  closeIcon: CloseIcon,\r\n  IconButtonComponent,\r\n  classMap,\r\n  stackIndex,\r\n  role = \"alert\",\r\n  closeButtonAriaLabel = \"Close notification\",\r\n  messageId,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-live\": ariaLive,\r\n  \"aria-atomic\": ariaAtomic,\r\n  \"aria-relevant\": ariaRelevant,\r\n  \"aria-hidden\": ariaHidden,\r\n  \"data-testid\": testId = \"chip\",\r\n  ...rest\r\n}) => {\r\n  const [closing, setClosing] = useState(false);\r\n\r\n  const resolvedMessageId = useMemo(\r\n    () => messageId ?? `${id || testId}-message`,\r\n    [messageId, id, testId],\r\n  );\r\n\r\n  const handleClose = useCallback(() => {\r\n    setClosing(true);\r\n    setTimeout(() => onClose?.(), 300);\r\n  }, [onClose]);\r\n\r\n  useEffect(() => {\r\n    if (autoClose && visible) {\r\n      const timer = setTimeout(() => handleClose(), duration);\r\n      return () => clearTimeout(timer);\r\n    }\r\n  }, [autoClose, duration, visible, handleClose]);\r\n\r\n  useEffect(() => {\r\n    if (visible) setClosing(false);\r\n  }, [visible]);\r\n\r\n  useEffect(() => {\r\n    if (!visible) return;\r\n\r\n    const onKey = (e: globalThis.KeyboardEvent) => {\r\n      if (e.key === \"Escape\") handleClose();\r\n    };\r\n\r\n    window.addEventListener(\"keydown\", onKey);\r\n    return () => window.removeEventListener(\"keydown\", onKey);\r\n  }, [visible, handleClose]);\r\n\r\n  if (!visible && !closing) return null;\r\n\r\n  const chipClassName = combineClassNames(\r\n    classMap.chip,\r\n    classMap[theme],\r\n    classMap[state],\r\n    classMap[size],\r\n    classMap[position],\r\n    shadow && classMap[`shadow${capitalize(shadow)}`],\r\n    rounding && classMap[`round${capitalize(rounding)}`],\r\n    closing && classMap.fadeout,\r\n    usePortal && classMap.fixed,\r\n    className,\r\n  );\r\n\r\n  const portalEl =\r\n    typeof window !== \"undefined\"\r\n      ? document.getElementById(\"widget-portal\")\r\n      : null;\r\n\r\n  const chipElement = (\r\n    <div\r\n      key={id}\r\n      id={id}\r\n      className={chipClassName}\r\n      role={role}\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-describedby={ariaDescribedBy}\r\n      aria-live={ariaLive ?? (role === \"alert\" ? \"assertive\" : \"polite\")}\r\n      aria-atomic={ariaAtomic ?? true}\r\n      aria-relevant={ariaRelevant}\r\n      aria-hidden={ariaHidden}\r\n      data-testid={testId}\r\n      style={stackIndex != null ? { zIndex: stackIndex } : undefined}\r\n      {...rest}\r\n    >\r\n      {Icon && (\r\n        <span\r\n          className={classMap.icon}\r\n          aria-hidden={iconDecorative ? \"true\" : undefined}\r\n          aria-label={!iconDecorative ? iconAriaLabel : undefined}\r\n          data-testid={`${testId}-icon`}\r\n        >\r\n          <Icon className={classMap.inner_icon} />\r\n        </span>\r\n      )}\r\n\r\n      <span\r\n        className={classMap.message}\r\n        id={resolvedMessageId}\r\n        data-testid={`${testId}-message`}\r\n      >\r\n        {message}\r\n      </span>\r\n\r\n      <IconButtonComponent\r\n        icon={CloseIcon}\r\n        size={size}\r\n        theme=\"clear\"\r\n        aria-label={closeButtonAriaLabel}\r\n        aria-controls={resolvedMessageId}\r\n        className={classMap.close}\r\n        onClick={handleClose}\r\n        shadow=\"none\"\r\n        data-testid={`${testId}-chip-close`}\r\n      />\r\n    </div>\r\n  );\r\n\r\n  if (usePortal && portalEl) {\r\n    return createPortal(chipElement, portalEl);\r\n  }\r\n\r\n  return chipElement;\r\n};\r\n\r\nChipBase.displayName = \"ChipBase\";\r\nexport default ChipBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport ChipBase from \"../ChipBase\";\r\nimport { CloseIcon } from \"@/Icons\";\r\nimport { IconButton } from \"@/index.next\";\r\nimport styles from \"./Chip.module.scss\";\r\nimport { ChipProps } from \"../Chip.types\";\r\n\r\nconst Chip: React.FC<ChipProps> = (props) => (\r\n  <ChipBase\r\n    {...props}\r\n    classMap={styles}\r\n    IconButtonComponent={IconButton}\r\n    closeIcon={CloseIcon}\r\n  />\r\n);\r\nChip.displayName = \"Chip\";\r\nexport default Chip;\r\n"],"names":["message","CloseIcon"],"mappings":"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"}

package/dist/next/Chip.cjs.js

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

package/dist/next/Chip.js

@@ -1,4 +1,4 @@
-import { C } from "./Chip-dGaHUdOu.js";
+import { C } from "./Chip-CuaKFQku.js";
 export {
   C as default
 };

package/dist/next/{CircularProgress-DWcdPslR.cjs → CircularProgress-CzFUYDX1.cjs}

@@ -22,7 +22,14 @@ const CircularProgressBase = ({
   state = "",
   className = "",
   classMap,
-  "data-testid": testId = "circular-progress"
+  decorative = false,
+  announceInnerValue = false,
+  ariaValueText,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "data-testid": testId = "circular-progress",
+  ...rest
 }) => {
   const range = Math.max(0, max - min);
   const clamped = Math.min(max, Math.max(min, value));
@@ -45,17 +52,26 @@ const CircularProgressBase = ({
     [classMap, theme, size, state, shadow, className]
   );
   const valueText = showRaw ? `${clamped}/${max}` : `${displayPercent}%`;
+  const resolvedAriaValueText = ariaValueText ?? (showRaw ? `${clamped} out of ${max}` : `${displayPercent}%`);
+  const accessibleNameProps = decorative ? {} : ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : ariaLabel ? { "aria-label": ariaLabel } : { "aria-label": label };
   return /* @__PURE__ */ require$$2.jsx(
     "div",
     {
       className: combinedClassName,
-      role: "progressbar",
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": clamped,
-      "aria-valuetext": valueText,
-      "aria-label": label,
       "data-testid": testId,
+      ...!decorative && {
+        role: "progressbar",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": clamped,
+        "aria-valuetext": resolvedAriaValueText,
+        "aria-describedby": ariaDescribedBy,
+        ...accessibleNameProps
+      },
+      ...decorative && {
+        "aria-hidden": true
+      },
+      ...rest,
       children: /* @__PURE__ */ require$$2.jsx(
         "div",
         {
@@ -74,8 +90,9 @@ const CircularProgressBase = ({
             "span",
             {
               className: classMap.value_text,
-              "aria-live": "polite",
-              "aria-atomic": "true",
+              "aria-hidden": announceInnerValue ? void 0 : true,
+              "aria-live": announceInnerValue ? "polite" : void 0,
+              "aria-atomic": announceInnerValue ? "true" : void 0,
               children: valueText
             }
           ) })
@@ -155,4 +172,4 @@ const styles = {
 const CircularProgress = (props) => /* @__PURE__ */ require$$2.jsx(CircularProgressBase, { ...props, classMap: styles });
 CircularProgress.displayName = "CircularProgress";
 exports.CircularProgress = CircularProgress;
-//# sourceMappingURL=CircularProgress-DWcdPslR.cjs.map
+//# sourceMappingURL=CircularProgress-CzFUYDX1.cjs.map

package/dist/next/CircularProgress-CzFUYDX1.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress-CzFUYDX1.cjs","sources":["../../src/components/CircularProgress/CircularProgressBase.tsx","../../src/components/CircularProgress/next/CircularProgress.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\r\nimport type { CircularProgressBaseProps } from \"./CircularProgress.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\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\nconst getColor = (percent: number): string => {\r\n  if (percent <= 0) return \"var(--background-color)\";\r\n  if (percent <= 40) return \"var(--error-color)\";\r\n  if (percent <= 70) return \"var(--warning-color)\";\r\n  return \"var(--success-color)\";\r\n};\r\n\r\nconst CircularProgressBase: React.FC<CircularProgressBaseProps> = ({\r\n  value,\r\n  min = 0,\r\n  max = 100,\r\n  label = \"Progress\",\r\n  shadow = getDefaultShadow(),\r\n  showRaw = false,\r\n  size = getDefaultSize(),\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  className = \"\",\r\n  classMap,\r\n  decorative = false,\r\n  announceInnerValue = false,\r\n  ariaValueText,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"circular-progress\",\r\n  ...rest\r\n}) => {\r\n  const range = Math.max(0, max - min);\r\n  const clamped = Math.min(max, Math.max(min, value));\r\n  const percent = range === 0 ? 0 : ((clamped - min) / range) * 100;\r\n\r\n  const [displayPercent, setDisplayPercent] = useState(0);\r\n\r\n  useEffect(() => {\r\n    setDisplayPercent(Math.round(percent));\r\n  }, [percent]);\r\n\r\n  const progressColor =\r\n    state && classMap[state] ? undefined : getColor(percent);\r\n\r\n  const angle = Math.min(360, (percent / 100) * 360);\r\n\r\n  const combinedClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.circular_progress,\r\n        classMap[theme],\r\n        classMap[size],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        className,\r\n      ),\r\n    [classMap, theme, size, state, shadow, className],\r\n  );\r\n\r\n  const valueText = showRaw ? `${clamped}/${max}` : `${displayPercent}%`;\r\n\r\n  const resolvedAriaValueText =\r\n    ariaValueText ??\r\n    (showRaw ? `${clamped} out of ${max}` : `${displayPercent}%`);\r\n\r\n  const accessibleNameProps = decorative\r\n    ? {}\r\n    : ariaLabelledBy\r\n      ? { \"aria-labelledby\": ariaLabelledBy }\r\n      : ariaLabel\r\n        ? { \"aria-label\": ariaLabel }\r\n        : { \"aria-label\": label };\r\n\r\n  return (\r\n    <div\r\n      className={combinedClassName}\r\n      data-testid={testId}\r\n      {...(!decorative && {\r\n        role: \"progressbar\",\r\n        \"aria-valuemin\": min,\r\n        \"aria-valuemax\": max,\r\n        \"aria-valuenow\": clamped,\r\n        \"aria-valuetext\": resolvedAriaValueText,\r\n        \"aria-describedby\": ariaDescribedBy,\r\n        ...accessibleNameProps,\r\n      })}\r\n      {...(decorative && {\r\n        \"aria-hidden\": true,\r\n      })}\r\n      {...rest}\r\n    >\r\n      <div\r\n        className={combineClassNames(\r\n          classMap.circle_border,\r\n          state && classMap[`state_${state}`],\r\n        )}\r\n        style={\r\n          progressColor\r\n            ? {\r\n                background: `conic-gradient(\r\n                  ${progressColor} 0deg,\r\n                  ${progressColor} ${angle}deg,\r\n                  transparent ${angle}deg 360deg\r\n                )`,\r\n              }\r\n            : undefined\r\n        }\r\n      >\r\n        <div className={classMap.inner_circle}>\r\n          <span\r\n            className={classMap.value_text}\r\n            aria-hidden={announceInnerValue ? undefined : true}\r\n            aria-live={announceInnerValue ? \"polite\" : undefined}\r\n            aria-atomic={announceInnerValue ? \"true\" : undefined}\r\n          >\r\n            {valueText}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nCircularProgressBase.displayName = \"CircularProgressBase\";\r\nexport default CircularProgressBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport CircularProgressBase from \"../CircularProgressBase\";\r\nimport styles from \"./CircularProgress.module.scss\";\r\nimport { CircularProgressProps } from \"../CircularProgress.types\";\r\n\r\nconst CircularProgress: React.FC<CircularProgressProps> = (props) => (\r\n  <CircularProgressBase {...props} classMap={styles} />\r\n);\r\nCircularProgress.displayName = \"CircularProgress\";\r\nexport default CircularProgress;\r\n"],"names":["getDefaultShadow","getDefaultSize","getDefaultTheme","useState","useEffect","useMemo","combineClassNames","capitalize","jsx"],"mappings":"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"}

package/dist/next/{CircularProgress-C2jVHm3Q.js → CircularProgress-Dn1VXFsq.js}

@@ -21,7 +21,14 @@ const CircularProgressBase = ({
   state = "",
   className = "",
   classMap,
-  "data-testid": testId = "circular-progress"
+  decorative = false,
+  announceInnerValue = false,
+  ariaValueText,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "data-testid": testId = "circular-progress",
+  ...rest
 }) => {
   const range = Math.max(0, max - min);
   const clamped = Math.min(max, Math.max(min, value));
@@ -44,17 +51,26 @@ const CircularProgressBase = ({
     [classMap, theme, size, state, shadow, className]
   );
   const valueText = showRaw ? `${clamped}/${max}` : `${displayPercent}%`;
+  const resolvedAriaValueText = ariaValueText ?? (showRaw ? `${clamped} out of ${max}` : `${displayPercent}%`);
+  const accessibleNameProps = decorative ? {} : ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : ariaLabel ? { "aria-label": ariaLabel } : { "aria-label": label };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: combinedClassName,
-      role: "progressbar",
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": clamped,
-      "aria-valuetext": valueText,
-      "aria-label": label,
       "data-testid": testId,
+      ...!decorative && {
+        role: "progressbar",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": clamped,
+        "aria-valuetext": resolvedAriaValueText,
+        "aria-describedby": ariaDescribedBy,
+        ...accessibleNameProps
+      },
+      ...decorative && {
+        "aria-hidden": true
+      },
+      ...rest,
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -73,8 +89,9 @@ const CircularProgressBase = ({
             "span",
             {
               className: classMap.value_text,
-              "aria-live": "polite",
-              "aria-atomic": "true",
+              "aria-hidden": announceInnerValue ? void 0 : true,
+              "aria-live": announceInnerValue ? "polite" : void 0,
+              "aria-atomic": announceInnerValue ? "true" : void 0,
               children: valueText
             }
           ) })
@@ -156,4 +173,4 @@ CircularProgress.displayName = "CircularProgress";
 export {
   CircularProgress as C
 };
-//# sourceMappingURL=CircularProgress-C2jVHm3Q.js.map
+//# sourceMappingURL=CircularProgress-Dn1VXFsq.js.map

package/dist/next/CircularProgress-Dn1VXFsq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress-Dn1VXFsq.js","sources":["../../src/components/CircularProgress/CircularProgressBase.tsx","../../src/components/CircularProgress/next/CircularProgress.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\r\nimport type { CircularProgressBaseProps } from \"./CircularProgress.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\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\nconst getColor = (percent: number): string => {\r\n  if (percent <= 0) return \"var(--background-color)\";\r\n  if (percent <= 40) return \"var(--error-color)\";\r\n  if (percent <= 70) return \"var(--warning-color)\";\r\n  return \"var(--success-color)\";\r\n};\r\n\r\nconst CircularProgressBase: React.FC<CircularProgressBaseProps> = ({\r\n  value,\r\n  min = 0,\r\n  max = 100,\r\n  label = \"Progress\",\r\n  shadow = getDefaultShadow(),\r\n  showRaw = false,\r\n  size = getDefaultSize(),\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  className = \"\",\r\n  classMap,\r\n  decorative = false,\r\n  announceInnerValue = false,\r\n  ariaValueText,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"circular-progress\",\r\n  ...rest\r\n}) => {\r\n  const range = Math.max(0, max - min);\r\n  const clamped = Math.min(max, Math.max(min, value));\r\n  const percent = range === 0 ? 0 : ((clamped - min) / range) * 100;\r\n\r\n  const [displayPercent, setDisplayPercent] = useState(0);\r\n\r\n  useEffect(() => {\r\n    setDisplayPercent(Math.round(percent));\r\n  }, [percent]);\r\n\r\n  const progressColor =\r\n    state && classMap[state] ? undefined : getColor(percent);\r\n\r\n  const angle = Math.min(360, (percent / 100) * 360);\r\n\r\n  const combinedClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.circular_progress,\r\n        classMap[theme],\r\n        classMap[size],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        className,\r\n      ),\r\n    [classMap, theme, size, state, shadow, className],\r\n  );\r\n\r\n  const valueText = showRaw ? `${clamped}/${max}` : `${displayPercent}%`;\r\n\r\n  const resolvedAriaValueText =\r\n    ariaValueText ??\r\n    (showRaw ? `${clamped} out of ${max}` : `${displayPercent}%`);\r\n\r\n  const accessibleNameProps = decorative\r\n    ? {}\r\n    : ariaLabelledBy\r\n      ? { \"aria-labelledby\": ariaLabelledBy }\r\n      : ariaLabel\r\n        ? { \"aria-label\": ariaLabel }\r\n        : { \"aria-label\": label };\r\n\r\n  return (\r\n    <div\r\n      className={combinedClassName}\r\n      data-testid={testId}\r\n      {...(!decorative && {\r\n        role: \"progressbar\",\r\n        \"aria-valuemin\": min,\r\n        \"aria-valuemax\": max,\r\n        \"aria-valuenow\": clamped,\r\n        \"aria-valuetext\": resolvedAriaValueText,\r\n        \"aria-describedby\": ariaDescribedBy,\r\n        ...accessibleNameProps,\r\n      })}\r\n      {...(decorative && {\r\n        \"aria-hidden\": true,\r\n      })}\r\n      {...rest}\r\n    >\r\n      <div\r\n        className={combineClassNames(\r\n          classMap.circle_border,\r\n          state && classMap[`state_${state}`],\r\n        )}\r\n        style={\r\n          progressColor\r\n            ? {\r\n                background: `conic-gradient(\r\n                  ${progressColor} 0deg,\r\n                  ${progressColor} ${angle}deg,\r\n                  transparent ${angle}deg 360deg\r\n                )`,\r\n              }\r\n            : undefined\r\n        }\r\n      >\r\n        <div className={classMap.inner_circle}>\r\n          <span\r\n            className={classMap.value_text}\r\n            aria-hidden={announceInnerValue ? undefined : true}\r\n            aria-live={announceInnerValue ? \"polite\" : undefined}\r\n            aria-atomic={announceInnerValue ? \"true\" : undefined}\r\n          >\r\n            {valueText}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nCircularProgressBase.displayName = \"CircularProgressBase\";\r\nexport default CircularProgressBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport CircularProgressBase from \"../CircularProgressBase\";\r\nimport styles from \"./CircularProgress.module.scss\";\r\nimport { CircularProgressProps } from \"../CircularProgress.types\";\r\n\r\nconst CircularProgress: React.FC<CircularProgressProps> = (props) => (\r\n  <CircularProgressBase {...props} classMap={styles} />\r\n);\r\nCircularProgress.displayName = \"CircularProgress\";\r\nexport default CircularProgress;\r\n"],"names":[],"mappings":"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"}

package/dist/next/CircularProgress.cjs.js

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

package/dist/next/CircularProgress.js

@@ -1,4 +1,4 @@
-import { C } from "./CircularProgress-C2jVHm3Q.js";
+import { C } from "./CircularProgress-Dn1VXFsq.js";
 export {
   C as default
 };

package/dist/next/{ColorPicker-Oy9unTHe.cjs → ColorPicker-ByPKPsMz.cjs}

@@ -15,30 +15,69 @@ const ColorPickerBase = ({
   shadow = borealStyleConfig.getDefaultShadow(),
   shape = "round",
   allowCustom = false,
+  required = false,
+  invalid = false,
+  helperText,
+  errorText,
+  customInputAriaLabel = "Custom color picker",
+  hideLabel = false,
   className = "",
   classMap,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   "data-testid": testId = "color-picker"
 }) => {
   const legendId = `${testId}-legend`;
+  const helperTextId = helperText ? `${testId}-helper-text` : void 0;
+  const errorTextId = errorText ? `${testId}-error-text` : void 0;
+  const describedBy = [ariaDescribedBy, helperTextId, invalid ? errorTextId : void 0].filter(Boolean).join(" ") || void 0;
+  const computedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? legendId : void 0);
   const labelClass = React.useMemo(
-    () => classNames.combineClassNames(classMap.swatch, classMap[size], classMap[shape]),
-    [classMap, size, shape]
+    () => classNames.combineClassNames(
+      classMap.swatch,
+      classMap[size],
+      classMap[shape],
+      disabled && classMap.disabled
+    ),
+    [classMap, size, shape, disabled]
   );
   return /* @__PURE__ */ require$$2.jsxs(
     "fieldset",
     {
-      className: classNames.combineClassNames(classMap.color_picker, className),
+      className: classNames.combineClassNames(
+        classMap.color_picker,
+        invalid && classMap.invalid,
+        disabled && classMap.disabled,
+        className
+      ),
       disabled,
       "data-testid": testId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": computedAriaLabelledBy,
+      "aria-describedby": describedBy,
+      "aria-invalid": invalid || void 0,
       children: [
-        /* @__PURE__ */ require$$2.jsx("legend", { id: legendId, className: classMap.legend, children: label }),
-        /* @__PURE__ */ require$$2.jsx("div", { className: classMap.color_picker_grid, children: colors.map((color, i) => {
+        /* @__PURE__ */ require$$2.jsx(
+          "legend",
+          {
+            id: legendId,
+            className: classNames.combineClassNames(classMap.legend, hideLabel && "sr_only"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ require$$2.jsx("div", { className: classMap.color_picker_grid, role: "radiogroup", children: colors.map((color, i) => {
           const id = `${testId}-color-${i}`;
+          const optionLabelId = `${id}-label`;
           const isSelected = selected2 === color.value;
+          const optionDisabled = disabled || color.disabled;
           return /* @__PURE__ */ require$$2.jsxs(
             "label",
             {
-              className: labelClass,
+              className: classNames.combineClassNames(
+                labelClass,
+                optionDisabled && classMap.disabled
+              ),
               htmlFor: id,
               title: color.label,
               "data-testid": `${testId}-option-${color.value}`,
@@ -52,10 +91,15 @@ const ColorPickerBase = ({
                     value: color.value,
                     checked: isSelected,
                     onChange: () => onChange(color.value),
-                    className: classMap.radio_input
+                    className: classMap.radio_input,
+                    disabled: optionDisabled,
+                    "aria-describedby": describedBy,
+                    "aria-invalid": invalid || void 0,
+                    "aria-required": required || void 0,
+                    "aria-labelledby": optionLabelId
                   }
                 ),
-                /* @__PURE__ */ require$$2.jsx("span", { className: "sr_only", children: color.label }),
+                /* @__PURE__ */ require$$2.jsx("span", { id: optionLabelId, className: "sr_only", children: color.label }),
                 /* @__PURE__ */ require$$2.jsx(
                   "span",
                   {
@@ -63,6 +107,7 @@ const ColorPickerBase = ({
                       classMap.preview,
                       classMap[shape],
                       isSelected && classMap.selected,
+                      optionDisabled && classMap.disabled,
                       shadow && classMap[`shadow${capitalize.capitalize(shadow)}`]
                     ),
                     style: { backgroundColor: color.value },
@@ -74,6 +119,25 @@ const ColorPickerBase = ({
             `${color.value}-${i}`
           );
         }) }),
+        helperText && /* @__PURE__ */ require$$2.jsx(
+          "div",
+          {
+            id: helperTextId,
+            className: classMap.helper_text,
+            "data-testid": `${testId}-helper-text`,
+            children: helperText
+          }
+        ),
+        invalid && errorText && /* @__PURE__ */ require$$2.jsx(
+          "div",
+          {
+            id: errorTextId,
+            className: classMap.error_text,
+            "data-testid": `${testId}-error-text`,
+            "aria-live": "polite",
+            children: errorText
+          }
+        ),
         allowCustom && /* @__PURE__ */ require$$2.jsx(
           "input",
           {
@@ -81,8 +145,11 @@ const ColorPickerBase = ({
             className: classMap.custom_input,
             value: selected2,
             onChange: (e) => onChange(e.target.value),
-            "aria-label": "Custom color picker",
-            "data-testid": `${testId}-custom-input`
+            "aria-label": customInputAriaLabel,
+            "aria-describedby": describedBy,
+            "aria-invalid": invalid || void 0,
+            "data-testid": `${testId}-custom-input`,
+            disabled
           }
         )
       ]
@@ -162,4 +229,4 @@ const styles = {
 const ColorPicker = (props) => /* @__PURE__ */ require$$2.jsx(ColorPickerBase, { ...props, classMap: styles });
 ColorPicker.displayName = "ColorPicker";
 exports.ColorPicker = ColorPicker;
-//# sourceMappingURL=ColorPicker-Oy9unTHe.cjs.map
+//# sourceMappingURL=ColorPicker-ByPKPsMz.cjs.map

package/dist/next/ColorPicker-ByPKPsMz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-ByPKPsMz.cjs","sources":["../../src/components/ColorPicker/ColorPickerBase.tsx","../../src/components/ColorPicker/next/ColorPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport type { ColorPickerBaseProps } from \"./ColorPicker.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ColorPickerBase: React.FC<ColorPickerBaseProps> = ({\r\n  label = \"Choose a color\",\r\n  colors,\r\n  selected,\r\n  onChange,\r\n  name = \"color-picker\",\r\n  disabled = false,\r\n  size = getDefaultSize(),\r\n  shadow = getDefaultShadow(),\r\n  shape = \"round\",\r\n  allowCustom = false,\r\n  required = false,\r\n  invalid = false,\r\n  helperText,\r\n  errorText,\r\n  customInputAriaLabel = \"Custom color picker\",\r\n  hideLabel = false,\r\n  className = \"\",\r\n  classMap,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"color-picker\",\r\n}) => {\r\n  const legendId = `${testId}-legend`;\r\n  const helperTextId = helperText ? `${testId}-helper-text` : undefined;\r\n  const errorTextId = errorText ? `${testId}-error-text` : undefined;\r\n\r\n  const describedBy =\r\n    [ariaDescribedBy, helperTextId, invalid ? errorTextId : undefined]\r\n      .filter(Boolean)\r\n      .join(\" \") || undefined;\r\n\r\n  const computedAriaLabelledBy =\r\n    ariaLabelledBy ?? (!ariaLabel ? legendId : undefined);\r\n\r\n  const labelClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.swatch,\r\n        classMap[size],\r\n        classMap[shape],\r\n        disabled && classMap.disabled,\r\n      ),\r\n    [classMap, size, shape, disabled],\r\n  );\r\n\r\n  return (\r\n    <fieldset\r\n      className={combineClassNames(\r\n        classMap.color_picker,\r\n        invalid && classMap.invalid,\r\n        disabled && classMap.disabled,\r\n        className,\r\n      )}\r\n      disabled={disabled}\r\n      data-testid={testId}\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={computedAriaLabelledBy}\r\n      aria-describedby={describedBy}\r\n      aria-invalid={invalid || undefined}\r\n    >\r\n      <legend\r\n        id={legendId}\r\n        className={combineClassNames(classMap.legend, hideLabel && \"sr_only\")}\r\n      >\r\n        {label}\r\n      </legend>\r\n\r\n      <div className={classMap.color_picker_grid} role=\"radiogroup\">\r\n        {colors.map((color, i) => {\r\n          const id = `${testId}-color-${i}`;\r\n          const optionLabelId = `${id}-label`;\r\n          const isSelected = selected === color.value;\r\n          const optionDisabled = disabled || color.disabled;\r\n\r\n          return (\r\n            <label\r\n              key={`${color.value}-${i}`}\r\n              className={combineClassNames(\r\n                labelClass,\r\n                optionDisabled && classMap.disabled,\r\n              )}\r\n              htmlFor={id}\r\n              title={color.label}\r\n              data-testid={`${testId}-option-${color.value}`}\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name={name}\r\n                id={id}\r\n                value={color.value}\r\n                checked={isSelected}\r\n                onChange={() => onChange(color.value)}\r\n                className={classMap.radio_input}\r\n                disabled={optionDisabled}\r\n                aria-describedby={describedBy}\r\n                aria-invalid={invalid || undefined}\r\n                aria-required={required || undefined}\r\n                aria-labelledby={optionLabelId}\r\n              />\r\n\r\n              <span id={optionLabelId} className={\"sr_only\"}>\r\n                {color.label}\r\n              </span>\r\n\r\n              <span\r\n                className={combineClassNames(\r\n                  classMap.preview,\r\n                  classMap[shape],\r\n                  isSelected && classMap.selected,\r\n                  optionDisabled && classMap.disabled,\r\n                  shadow && classMap[`shadow${capitalize(shadow)}`],\r\n                )}\r\n                style={{ backgroundColor: color.value }}\r\n                aria-hidden=\"true\"\r\n              />\r\n            </label>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      {helperText && (\r\n        <div\r\n          id={helperTextId}\r\n          className={classMap.helper_text}\r\n          data-testid={`${testId}-helper-text`}\r\n        >\r\n          {helperText}\r\n        </div>\r\n      )}\r\n\r\n      {invalid && errorText && (\r\n        <div\r\n          id={errorTextId}\r\n          className={classMap.error_text}\r\n          data-testid={`${testId}-error-text`}\r\n          aria-live=\"polite\"\r\n        >\r\n          {errorText}\r\n        </div>\r\n      )}\r\n\r\n      {allowCustom && (\r\n        <input\r\n          type=\"color\"\r\n          className={classMap.custom_input}\r\n          value={selected}\r\n          onChange={(e) => onChange(e.target.value)}\r\n          aria-label={customInputAriaLabel}\r\n          aria-describedby={describedBy}\r\n          aria-invalid={invalid || undefined}\r\n          data-testid={`${testId}-custom-input`}\r\n          disabled={disabled}\r\n        />\r\n      )}\r\n    </fieldset>\r\n  );\r\n};\r\n\r\nColorPickerBase.displayName = \"ColorPickerBase\";\r\nexport default ColorPickerBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport ColorPickerBase from \"../ColorPickerBase\";\r\nimport styles from \"./ColorPicker.module.scss\";\r\nimport { ColorPickerProps } from \"../ColorPicker.types\";\r\n\r\nconst ColorPicker: React.FC<ColorPickerProps> = (props) => (\r\n  <ColorPickerBase {...props} classMap={styles} />\r\n);\r\nColorPicker.displayName = \"ColorPicker\";\r\nexport default ColorPicker;\r\n"],"names":["selected","getDefaultSize","getDefaultShadow","useMemo","combineClassNames","jsxs","jsx","capitalize"],"mappings":";;;;;;AASA,MAAM,kBAAkD,CAAC;AAAA,EACvD,QAAQ;AAAA,EACR;AAAA,EACA,UAAAA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAOC,kBAAAA,eAAA;AAAA,EACP,SAASC,kBAAAA,iBAAA;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,eAAe,SAAS;AAC1B,MAAM;AACJ,QAAM,WAAW,GAAG,MAAM;AAC1B,QAAM,eAAe,aAAa,GAAG,MAAM,iBAAiB;AAC5D,QAAM,cAAc,YAAY,GAAG,MAAM,gBAAgB;AAEzD,QAAM,cACJ,CAAC,iBAAiB,cAAc,UAAU,cAAc,MAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAElB,QAAM,yBACJ,mBAAmB,CAAC,YAAY,WAAW;AAE7C,QAAM,aAAaC,MAAAA;AAAAA,IACjB,MACEC,WAAAA;AAAAA,MACE,SAAS;AAAA,MACT,SAAS,IAAI;AAAA,MACb,SAAS,KAAK;AAAA,MACd,YAAY,SAAS;AAAA,IAAA;AAAA,IAEzB,CAAC,UAAU,MAAM,OAAO,QAAQ;AAAA,EAAA;AAGlC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,WAAAA;AAAAA,QACT,SAAS;AAAA,QACT,WAAW,SAAS;AAAA,QACpB,YAAY,SAAS;AAAA,QACrB;AAAA,MAAA;AAAA,MAEF;AAAA,MACA,eAAa;AAAA,MACb,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,gBAAc,WAAW;AAAA,MAEzB,UAAA;AAAA,QAAAE,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAWF,WAAAA,kBAAkB,SAAS,QAAQ,aAAa,SAAS;AAAA,YAEnE,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHE,2BAAAA,IAAC,OAAA,EAAI,WAAW,SAAS,mBAAmB,MAAK,cAC9C,UAAA,OAAO,IAAI,CAAC,OAAO,MAAM;AACxB,gBAAM,KAAK,GAAG,MAAM,UAAU,CAAC;AAC/B,gBAAM,gBAAgB,GAAG,EAAE;AAC3B,gBAAM,aAAaN,cAAa,MAAM;AACtC,gBAAM,iBAAiB,YAAY,MAAM;AAEzC,iBACEK,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWD,WAAAA;AAAAA,gBACT;AAAA,gBACA,kBAAkB,SAAS;AAAA,cAAA;AAAA,cAE7B,SAAS;AAAA,cACT,OAAO,MAAM;AAAA,cACb,eAAa,GAAG,MAAM,WAAW,MAAM,KAAK;AAAA,cAE5C,UAAA;AAAA,gBAAAE,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA,OAAO,MAAM;AAAA,oBACb,SAAS;AAAA,oBACT,UAAU,MAAM,SAAS,MAAM,KAAK;AAAA,oBACpC,WAAW,SAAS;AAAA,oBACpB,UAAU;AAAA,oBACV,oBAAkB;AAAA,oBAClB,gBAAc,WAAW;AAAA,oBACzB,iBAAe,YAAY;AAAA,oBAC3B,mBAAiB;AAAA,kBAAA;AAAA,gBAAA;AAAA,+CAGlB,QAAA,EAAK,IAAI,eAAe,WAAW,WACjC,gBAAM,OACT;AAAA,gBAEAA,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWF,WAAAA;AAAAA,sBACT,SAAS;AAAA,sBACT,SAAS,KAAK;AAAA,sBACd,cAAc,SAAS;AAAA,sBACvB,kBAAkB,SAAS;AAAA,sBAC3B,UAAU,SAAS,SAASG,WAAAA,WAAW,MAAM,CAAC,EAAE;AAAA,oBAAA;AAAA,oBAElD,OAAO,EAAE,iBAAiB,MAAM,MAAA;AAAA,oBAChC,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACd;AAAA,YAAA;AAAA,YAtCK,GAAG,MAAM,KAAK,IAAI,CAAC;AAAA,UAAA;AAAA,QAyC9B,CAAC,EAAA,CACH;AAAA,QAEC,cACCD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAW,SAAS;AAAA,YACpB,eAAa,GAAG,MAAM;AAAA,YAErB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,WAAW,aACVA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAW,SAAS;AAAA,YACpB,eAAa,GAAG,MAAM;AAAA,YACtB,aAAU;AAAA,YAET,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,eACCA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW,SAAS;AAAA,YACpB,OAAON;AAAA,YACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,YACxC,cAAY;AAAA,YACZ,oBAAkB;AAAA,YAClB,gBAAc,WAAW;AAAA,YACzB,eAAa,GAAG,MAAM;AAAA,YACtB;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,gBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClK9B,MAAM,cAA0C,CAAC,UAC/CM,+BAAC,mBAAiB,GAAG,OAAO,UAAU,OAAA,CAAQ;AAEhD,YAAY,cAAc;;"}

package/dist/next/{ColorPicker-1i0Lgdgq.js → ColorPicker-CCzSZDjx.js}

@@ -14,30 +14,69 @@ const ColorPickerBase = ({
   shadow = getDefaultShadow(),
   shape = "round",
   allowCustom = false,
+  required = false,
+  invalid = false,
+  helperText,
+  errorText,
+  customInputAriaLabel = "Custom color picker",
+  hideLabel = false,
   className = "",
   classMap,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   "data-testid": testId = "color-picker"
 }) => {
   const legendId = `${testId}-legend`;
+  const helperTextId = helperText ? `${testId}-helper-text` : void 0;
+  const errorTextId = errorText ? `${testId}-error-text` : void 0;
+  const describedBy = [ariaDescribedBy, helperTextId, invalid ? errorTextId : void 0].filter(Boolean).join(" ") || void 0;
+  const computedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? legendId : void 0);
   const labelClass = useMemo(
-    () => combineClassNames(classMap.swatch, classMap[size], classMap[shape]),
-    [classMap, size, shape]
+    () => combineClassNames(
+      classMap.swatch,
+      classMap[size],
+      classMap[shape],
+      disabled && classMap.disabled
+    ),
+    [classMap, size, shape, disabled]
   );
   return /* @__PURE__ */ jsxs(
     "fieldset",
     {
-      className: combineClassNames(classMap.color_picker, className),
+      className: combineClassNames(
+        classMap.color_picker,
+        invalid && classMap.invalid,
+        disabled && classMap.disabled,
+        className
+      ),
       disabled,
       "data-testid": testId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": computedAriaLabelledBy,
+      "aria-describedby": describedBy,
+      "aria-invalid": invalid || void 0,
       children: [
-        /* @__PURE__ */ jsx("legend", { id: legendId, className: classMap.legend, children: label }),
-        /* @__PURE__ */ jsx("div", { className: classMap.color_picker_grid, children: colors.map((color, i) => {
+        /* @__PURE__ */ jsx(
+          "legend",
+          {
+            id: legendId,
+            className: combineClassNames(classMap.legend, hideLabel && "sr_only"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: classMap.color_picker_grid, role: "radiogroup", children: colors.map((color, i) => {
           const id = `${testId}-color-${i}`;
+          const optionLabelId = `${id}-label`;
           const isSelected = selected2 === color.value;
+          const optionDisabled = disabled || color.disabled;
           return /* @__PURE__ */ jsxs(
             "label",
             {
-              className: labelClass,
+              className: combineClassNames(
+                labelClass,
+                optionDisabled && classMap.disabled
+              ),
               htmlFor: id,
               title: color.label,
               "data-testid": `${testId}-option-${color.value}`,
@@ -51,10 +90,15 @@ const ColorPickerBase = ({
                     value: color.value,
                     checked: isSelected,
                     onChange: () => onChange(color.value),
-                    className: classMap.radio_input
+                    className: classMap.radio_input,
+                    disabled: optionDisabled,
+                    "aria-describedby": describedBy,
+                    "aria-invalid": invalid || void 0,
+                    "aria-required": required || void 0,
+                    "aria-labelledby": optionLabelId
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "sr_only", children: color.label }),
+                /* @__PURE__ */ jsx("span", { id: optionLabelId, className: "sr_only", children: color.label }),
                 /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -62,6 +106,7 @@ const ColorPickerBase = ({
                       classMap.preview,
                       classMap[shape],
                       isSelected && classMap.selected,
+                      optionDisabled && classMap.disabled,
                       shadow && classMap[`shadow${capitalize(shadow)}`]
                     ),
                     style: { backgroundColor: color.value },
@@ -73,6 +118,25 @@ const ColorPickerBase = ({
             `${color.value}-${i}`
           );
         }) }),
+        helperText && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: helperTextId,
+            className: classMap.helper_text,
+            "data-testid": `${testId}-helper-text`,
+            children: helperText
+          }
+        ),
+        invalid && errorText && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: errorTextId,
+            className: classMap.error_text,
+            "data-testid": `${testId}-error-text`,
+            "aria-live": "polite",
+            children: errorText
+          }
+        ),
         allowCustom && /* @__PURE__ */ jsx(
           "input",
           {
@@ -80,8 +144,11 @@ const ColorPickerBase = ({
             className: classMap.custom_input,
             value: selected2,
             onChange: (e) => onChange(e.target.value),
-            "aria-label": "Custom color picker",
-            "data-testid": `${testId}-custom-input`
+            "aria-label": customInputAriaLabel,
+            "aria-describedby": describedBy,
+            "aria-invalid": invalid || void 0,
+            "data-testid": `${testId}-custom-input`,
+            disabled
           }
         )
       ]
@@ -163,4 +230,4 @@ ColorPicker.displayName = "ColorPicker";
 export {
   ColorPicker as C
 };
-//# sourceMappingURL=ColorPicker-1i0Lgdgq.js.map
+//# sourceMappingURL=ColorPicker-CCzSZDjx.js.map