boreal-ui 0.0.71 → 0.0.73

package/dist/core/{ProgressBar-BLcSyVgQ.js → ProgressBar-pVPs5lsA.js}

@@ -2,9 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
-import { a as getDefaultRounding, b as getDefaultShadow, c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
+import { a as getDefaultRounding, b as getDefaultShadow, c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-DsaRlxmw.js";
 const BaseProgressBar = ({
-  progress = 0,
+  value = 0,
   theme = getDefaultTheme(),
   state = "",
   size = getDefaultSize(),
@@ -13,19 +13,31 @@ const BaseProgressBar = ({
   animated = true,
   indeterminate = false,
   className = "",
-  ariaLabel = "Progress",
-  title,
-  titlePosition = "top",
+  "aria-label": ariaLabel = "Progress",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-valuetext": ariaValueText,
+  label,
+  labelPosition = "top",
+  labelId,
+  description,
+  descriptionId,
   "data-testid": testId = "progressbar",
   classMap
 }) => {
-  const numeric = Number(progress);
+  const numeric = Number(value);
   const clamped = Number.isFinite(numeric) ? Math.min(100, Math.max(0, numeric)) : 0;
-  const value = Math.round(clamped);
+  const progressValue = Math.round(clamped);
+  const resolvedLabelId = label ? labelId || `${testId}-label` : void 0;
+  const resolvedDescriptionId = description ? descriptionId || `${testId}-description` : void 0;
+  const computedAriaLabel = !ariaLabelledBy && !resolvedLabelId ? ariaLabel : void 0;
+  const computedAriaLabelledBy = ariaLabelledBy || resolvedLabelId;
+  const computedAriaDescribedBy = ariaDescribedBy || resolvedDescriptionId;
+  const computedAriaValueText = ariaValueText || (indeterminate ? "Loading" : `${progressValue}% complete`);
   const layoutClass = useMemo(() => {
-    const posClass = titlePosition === "overlay" ? void 0 : classMap[`title${capitalize(titlePosition)}`];
-    return combineClassNames(classMap.layout, Boolean(title) && posClass);
-  }, [classMap, title, titlePosition]);
+    const posClass = classMap[`label${capitalize(labelPosition)}`];
+    return combineClassNames(classMap.layout, Boolean(label) && posClass);
+  }, [classMap, label, labelPosition]);
   const wrapperClass = useMemo(
     () => combineClassNames(
       classMap.container,
@@ -47,54 +59,55 @@ const BaseProgressBar = ({
     ),
     [classMap, theme, state, rounding, indeterminate, animated]
   );
-  const titleNode = title ? /* @__PURE__ */ jsx(
+  const labelNode = label ? /* @__PURE__ */ jsx(
     "div",
     {
-      className: combineClassNames(
-        classMap.title,
-        titlePosition === "overlay" && classMap.titleOverlay
-      ),
-      "data-testid": `${testId}-title`,
-      children: title
+      id: resolvedLabelId,
+      className: classMap.label,
+      "data-testid": `${testId}-label`,
+      children: label
     }
   ) : null;
+  const descriptionNode = description ? /* @__PURE__ */ jsx("div", { id: resolvedDescriptionId, "data-testid": `${testId}-description`, children: description }) : null;
   return /* @__PURE__ */ jsxs("div", { className: layoutClass, children: [
-    (titlePosition === "top" || titlePosition === "left") && titleNode,
+    (labelPosition === "top" || labelPosition === "left") && labelNode,
     /* @__PURE__ */ jsx(
       "div",
       {
         className: wrapperClass,
         role: "progressbar",
-        "aria-label": ariaLabel,
+        "aria-label": computedAriaLabel,
+        "aria-labelledby": computedAriaLabelledBy,
+        "aria-describedby": computedAriaDescribedBy,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-valuenow": indeterminate ? void 0 : value,
-        "aria-valuetext": indeterminate ? "Loading" : `${value}% complete`,
+        "aria-valuenow": indeterminate ? void 0 : progressValue,
+        "aria-valuetext": computedAriaValueText,
         "aria-busy": indeterminate || void 0,
         "data-testid": testId,
         children: /* @__PURE__ */ jsx(
           "div",
           {
             className: barClass,
-            style: { width: indeterminate ? void 0 : `${value}%` },
-            "data-testid": `${testId}-bar`,
-            children: titlePosition === "overlay" && titleNode
+            style: { width: indeterminate ? void 0 : `${progressValue}%` },
+            "data-testid": `${testId}-bar`
           }
         )
       }
     ),
-    (titlePosition === "bottom" || titlePosition === "right") && titleNode
+    (labelPosition === "bottom" || labelPosition === "right") && labelNode,
+    descriptionNode
   ] });
 };
 BaseProgressBar.displayName = "BaseProgressBar";
 const classes = {
   layout: "progress_layout",
-  title: "progress_title",
-  titleTop: "progress_title_top",
-  titleBottom: "progress_title_bottom",
-  titleLeft: "progress_title_left",
-  titleRight: "progress_title_right",
-  titleOverlay: "progress_title_overlay",
+  label: "progress_label",
+  labelTop: "progress_label_top",
+  labelBottom: "progress_label_bottom",
+  labelLeft: "progress_label_left",
+  labelRight: "progress_label_right",
+  labelOverlay: "progress_label_overlay",
   container: "progress_container",
   bar: "progress_bar",
   primary: "progress_primary",
@@ -130,4 +143,4 @@ ProgressBar.displayName = "ProgressBar";
 export {
   ProgressBar as P
 };
-//# sourceMappingURL=ProgressBar-BLcSyVgQ.js.map
+//# sourceMappingURL=ProgressBar-pVPs5lsA.js.map

package/dist/core/ProgressBar-pVPs5lsA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar-pVPs5lsA.js","sources":["../../src/components/ProgressBar/ProgressBarBase.tsx","../../src/components/ProgressBar/core/ProgressBar.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\nimport { BaseProgressBarProps } from \"./ProgressBar.types\";\r\n\r\nconst BaseProgressBar: React.FC<BaseProgressBarProps> = ({\r\n  value = 0,\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  animated = true,\r\n  indeterminate = false,\r\n  className = \"\",\r\n  \"aria-label\": ariaLabel = \"Progress\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-valuetext\": ariaValueText,\r\n  label,\r\n  labelPosition = \"top\",\r\n  labelId,\r\n  description,\r\n  descriptionId,\r\n  \"data-testid\": testId = \"progressbar\",\r\n  classMap,\r\n}) => {\r\n  const numeric = Number(value);\r\n  const clamped = Number.isFinite(numeric)\r\n    ? Math.min(100, Math.max(0, numeric))\r\n    : 0;\r\n  const progressValue = Math.round(clamped);\r\n\r\n  const resolvedLabelId = label ? labelId || `${testId}-label` : undefined;\r\n  const resolvedDescriptionId = description\r\n    ? descriptionId || `${testId}-description`\r\n    : undefined;\r\n\r\n  const computedAriaLabel =\r\n    !ariaLabelledBy && !resolvedLabelId ? ariaLabel : undefined;\r\n\r\n  const computedAriaLabelledBy = ariaLabelledBy || resolvedLabelId;\r\n  const computedAriaDescribedBy = ariaDescribedBy || resolvedDescriptionId;\r\n\r\n  const computedAriaValueText =\r\n    ariaValueText || (indeterminate ? \"Loading\" : `${progressValue}% complete`);\r\n\r\n  const layoutClass = useMemo(() => {\r\n    const posClass = classMap[`label${capitalize(labelPosition)}`];\r\n    return combineClassNames(classMap.layout, Boolean(label) && posClass);\r\n  }, [classMap, label, labelPosition]);\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.container,\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className,\r\n      ),\r\n    [classMap, size, shadow, rounding, className],\r\n  );\r\n\r\n  const barClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.bar,\r\n        classMap[theme],\r\n        classMap[state],\r\n        animated && classMap.animated,\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        indeterminate && classMap.indeterminate,\r\n      ),\r\n    [classMap, theme, state, rounding, indeterminate, animated],\r\n  );\r\n\r\n  const labelNode = label ? (\r\n    <div\r\n      id={resolvedLabelId}\r\n      className={classMap.label}\r\n      data-testid={`${testId}-label`}\r\n    >\r\n      {label}\r\n    </div>\r\n  ) : null;\r\n\r\n  const descriptionNode = description ? (\r\n    <div id={resolvedDescriptionId} data-testid={`${testId}-description`}>\r\n      {description}\r\n    </div>\r\n  ) : null;\r\n\r\n  return (\r\n    <div className={layoutClass}>\r\n      {(labelPosition === \"top\" || labelPosition === \"left\") && labelNode}\r\n\r\n      <div\r\n        className={wrapperClass}\r\n        role=\"progressbar\"\r\n        aria-label={computedAriaLabel}\r\n        aria-labelledby={computedAriaLabelledBy}\r\n        aria-describedby={computedAriaDescribedBy}\r\n        aria-valuemin={0}\r\n        aria-valuemax={100}\r\n        aria-valuenow={indeterminate ? undefined : progressValue}\r\n        aria-valuetext={computedAriaValueText}\r\n        aria-busy={indeterminate || undefined}\r\n        data-testid={testId}\r\n      >\r\n        <div\r\n          className={barClass}\r\n          style={{ width: indeterminate ? undefined : `${progressValue}%` }}\r\n          data-testid={`${testId}-bar`}\r\n        />\r\n      </div>\r\n\r\n      {(labelPosition === \"bottom\" || labelPosition === \"right\") && labelNode}\r\n      {descriptionNode}\r\n    </div>\r\n  );\r\n};\r\n\r\nBaseProgressBar.displayName = \"BaseProgressBar\";\r\nexport default BaseProgressBar;\r\n","import React from \"react\";\r\nimport BaseProgressBar from \"../ProgressBarBase\";\r\nimport \"./ProgressBar.scss\";\r\nimport { ProgressBarProps } from \"../ProgressBar.types\";\r\n\r\nconst classes = {\r\n  layout: \"progress_layout\",\r\n  label: \"progress_label\",\r\n\r\n  labelTop: \"progress_label_top\",\r\n  labelBottom: \"progress_label_bottom\",\r\n  labelLeft: \"progress_label_left\",\r\n  labelRight: \"progress_label_right\",\r\n  labelOverlay: \"progress_label_overlay\",\r\n  container: \"progress_container\",\r\n  bar: \"progress_bar\",\r\n\r\n  primary: \"progress_primary\",\r\n  secondary: \"progress_secondary\",\r\n  tertiary: \"progress_tertiary\",\r\n  quaternary: \"progress_quaternary\",\r\n\r\n  success: \"progress_success\",\r\n  error: \"progress_error\",\r\n  warning: \"progress_warning\",\r\n\r\n  clear: \"progress_clear\",\r\n\r\n  xs: \"progress_xs\",\r\n  xl: \"progress_xl\",\r\n  small: \"progress_small\",\r\n  medium: \"progress_medium\",\r\n  large: \"progress_large\",\r\n\r\n  shadowNone: \"progress_shadow-None\",\r\n  shadowLight: \"progress_shadow-Light\",\r\n  shadowMedium: \"progress_shadow-Medium\",\r\n  shadowStrong: \"progress_shadow-Strong\",\r\n  shadowIntense: \"progress_shadow-Intense\",\r\n\r\n  roundNone: \"progress_round-None\",\r\n  roundSmall: \"progress_round-Small\",\r\n  roundMedium: \"progress_round-Medium\",\r\n  roundLarge: \"progress_round-Large\",\r\n  roundFull: \"progress_round-Full\",\r\n\r\n  animated: \"progress_animated\",\r\n  indeterminate: \"progress_indeterminate\",\r\n};\r\n\r\nconst ProgressBar: React.FC<ProgressBarProps> = (props) => {\r\n  return <BaseProgressBar {...props} classMap={classes} />;\r\n};\r\nProgressBar.displayName = \"ProgressBar\";\r\nexport default ProgressBar;\r\n"],"names":[],"mappings":"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"}

package/dist/core/ProgressBar.cjs.js

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

package/dist/core/ProgressBar.js

@@ -1,4 +1,4 @@
-import { P } from "./ProgressBar-BLcSyVgQ.js";
+import { P } from "./ProgressBar-pVPs5lsA.js";
 export {
   P as default
 };

package/dist/core/{RadioButton-DygrrlH_.js → RadioButton-BM0-FaUG.js}

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useId, useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
-import { d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
+import { d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
 const BaseRadioButton = forwardRef(
   ({
     label,
@@ -19,6 +19,12 @@ const BaseRadioButton = forwardRef(
     id,
     "data-testid": testId = "radio-button",
     classMap,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    required,
     ...props
   }, ref) => {
     const uid = useId();
@@ -46,6 +52,7 @@ const BaseRadioButton = forwardRef(
       ),
       [classMap, rounding, shadow]
     );
+    const resolvedAriaLabelledBy = ariaLabelledBy ?? (label ? labelId : void 0);
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -65,7 +72,12 @@ const BaseRadioButton = forwardRef(
               checked,
               onChange: handleChange,
               disabled,
-              "aria-labelledby": label ? labelId : void 0,
+              required,
+              "aria-label": ariaLabel,
+              "aria-labelledby": resolvedAriaLabelledBy,
+              "aria-describedby": ariaDescribedBy,
+              "aria-invalid": ariaInvalid,
+              "aria-required": ariaRequired ?? required,
               "data-testid": testId,
               ...props
             }
@@ -124,4 +136,4 @@ RadioButton.displayName = "RadioButton";
 export {
   RadioButton as R
 };
-//# sourceMappingURL=RadioButton-DygrrlH_.js.map
+//# sourceMappingURL=RadioButton-BM0-FaUG.js.map

package/dist/core/RadioButton-BM0-FaUG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton-BM0-FaUG.js","sources":["../../src/components/RadioButton/RadioButtonBase.tsx","../../src/components/RadioButton/core/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useId } from \"react\";\r\nimport { BaseRadioButtonProps } from \"./RadioButton.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseRadioButton = forwardRef<HTMLInputElement, BaseRadioButtonProps>(\r\n  (\r\n    {\r\n      label,\r\n      value,\r\n      checked,\r\n      onChange,\r\n      name,\r\n      theme = getDefaultTheme(),\r\n      rounding = getDefaultRounding(),\r\n      shadow = getDefaultShadow(),\r\n      state = \"\",\r\n      disabled = false,\r\n      className = \"\",\r\n      id,\r\n      \"data-testid\": testId = \"radio-button\",\r\n      classMap,\r\n      \"aria-label\": ariaLabel,\r\n      \"aria-labelledby\": ariaLabelledBy,\r\n      \"aria-describedby\": ariaDescribedBy,\r\n      \"aria-invalid\": ariaInvalid,\r\n      \"aria-required\": ariaRequired,\r\n      required,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const uid = useId();\r\n    const inputId = id ?? `${testId}-input-${uid}`;\r\n    const labelId = `${testId}-label-${uid}`;\r\n\r\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n      if (disabled) return;\r\n      if (e.target.checked) onChange(e.target.value);\r\n    };\r\n\r\n    const wrapperClasses = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.wrapper,\r\n          classMap[theme],\r\n          classMap[state],\r\n          disabled && classMap.disabled,\r\n          className,\r\n        ),\r\n      [classMap, theme, state, disabled, className],\r\n    );\r\n\r\n    const radioClasses = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.circle,\r\n          shadow && classMap[`shadow${capitalize(shadow)}`],\r\n          rounding && classMap[`round${capitalize(rounding)}`],\r\n        ),\r\n      [classMap, rounding, shadow],\r\n    );\r\n\r\n    const resolvedAriaLabelledBy =\r\n      ariaLabelledBy ?? (label ? labelId : undefined);\r\n\r\n    return (\r\n      <label\r\n        className={wrapperClasses}\r\n        data-testid={`${testId}-wrapper`}\r\n        htmlFor={inputId}\r\n      >\r\n        <input\r\n          ref={ref}\r\n          type=\"radio\"\r\n          id={inputId}\r\n          name={name}\r\n          className={classMap.input}\r\n          value={value}\r\n          checked={checked}\r\n          onChange={handleChange}\r\n          disabled={disabled}\r\n          required={required}\r\n          aria-label={ariaLabel}\r\n          aria-labelledby={resolvedAriaLabelledBy}\r\n          aria-describedby={ariaDescribedBy}\r\n          aria-invalid={ariaInvalid}\r\n          aria-required={ariaRequired ?? required}\r\n          data-testid={testId}\r\n          {...props}\r\n        />\r\n        <span\r\n          className={radioClasses}\r\n          aria-hidden=\"true\"\r\n          data-testid={`${testId}-circle`}\r\n        />\r\n        {label && (\r\n          <span\r\n            id={labelId}\r\n            className={classMap.label}\r\n            data-testid={`${testId}-label`}\r\n          >\r\n            {label}\r\n          </span>\r\n        )}\r\n      </label>\r\n    );\r\n  },\r\n);\r\n\r\nBaseRadioButton.displayName = \"BaseRadioButton\";\r\nexport default BaseRadioButton;\r\n","import { forwardRef } from \"react\";\r\nimport BaseRadioButton from \"../RadioButtonBase\";\r\nimport \"./RadioButton.scss\";\r\nimport { RadioButtonProps } from \"../RadioButton.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"radio_wrapper\",\r\n  input: \"radio_input\",\r\n  circle: \"radio_circle\",\r\n  label: \"radio_label\",\r\n  disabled: \"radio_disabled\",\r\n\r\n  primary: \"radio_primary\",\r\n  secondary: \"radio_secondary\",\r\n  tertiary: \"radio_tertiary\",\r\n  quaternary: \"radio_quaternary\",\r\n\r\n  success: \"radio_success\",\r\n  error: \"radio_error\",\r\n  warning: \"radio_warning\",\r\n\r\n  clear: \"radio_clear\",\r\n\r\n  shadowNone: \"radio_shadow-None\",\r\n  shadowLight: \"radio_shadow-Light\",\r\n  shadowMedium: \"radio_shadow-Medium\",\r\n  shadowStrong: \"radio_shadow-Strong\",\r\n  shadowIntense: \"radio_shadow-Intense\",\r\n\r\n  roundNone: \"radio_round-None\",\r\n  roundSmall: \"radio_round-Small\",\r\n  roundMedium: \"radio_round-Medium\",\r\n  roundLarge: \"radio_round-Large\",\r\n};\r\n\r\nconst RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\r\n  (props, ref) => <BaseRadioButton {...props} ref={ref} classMap={classes} />\r\n);\r\n\r\nRadioButton.displayName = \"RadioButton\";\r\nexport default RadioButton;\r\n"],"names":[],"mappings":";;;;;AAUA,MAAM,kBAAkB;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,gBAAA;AAAA,IACR,WAAW,mBAAA;AAAA,IACX,SAAS,iBAAA;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA,eAAe,SAAS;AAAA,IACxB;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,MAAM,MAAA;AACZ,UAAM,UAAU,MAAM,GAAG,MAAM,UAAU,GAAG;AAC5C,UAAM,UAAU,GAAG,MAAM,UAAU,GAAG;AAEtC,UAAM,eAAe,CAAC,MAA2C;AAC/D,UAAI,SAAU;AACd,UAAI,EAAE,OAAO,QAAS,UAAS,EAAE,OAAO,KAAK;AAAA,IAC/C;AAEA,UAAM,iBAAiB;AAAA,MACrB,MACE;AAAA,QACE,SAAS;AAAA,QACT,SAAS,KAAK;AAAA,QACd,SAAS,KAAK;AAAA,QACd,YAAY,SAAS;AAAA,QACrB;AAAA,MAAA;AAAA,MAEJ,CAAC,UAAU,OAAO,OAAO,UAAU,SAAS;AAAA,IAAA;AAG9C,UAAM,eAAe;AAAA,MACnB,MACE;AAAA,QACE,SAAS;AAAA,QACT,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,QAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,MAAA;AAAA,MAEvD,CAAC,UAAU,UAAU,MAAM;AAAA,IAAA;AAG7B,UAAM,yBACJ,mBAAmB,QAAQ,UAAU;AAEvC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,eAAa,GAAG,MAAM;AAAA,QACtB,SAAS;AAAA,QAET,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,MAAK;AAAA,cACL,IAAI;AAAA,cACJ;AAAA,cACA,WAAW,SAAS;AAAA,cACpB;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA,cAAY;AAAA,cACZ,mBAAiB;AAAA,cACjB,oBAAkB;AAAA,cAClB,gBAAc;AAAA,cACd,iBAAe,gBAAgB;AAAA,cAC/B,eAAa;AAAA,cACZ,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEN;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,cACX,eAAY;AAAA,cACZ,eAAa,GAAG,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAEvB,SACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cAErB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,gBAAgB,cAAc;AC9G9B,MAAM,UAAU;AAAA,EACd,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,EAEV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AACd;AAEA,MAAM,cAAc;AAAA,EAClB,CAAC,OAAO,QAAQ,oBAAC,mBAAiB,GAAG,OAAO,KAAU,UAAU,QAAA,CAAS;AAC3E;AAEA,YAAY,cAAc;"}

package/dist/core/{RadioButton-BxdmcaZg.cjs → RadioButton-QK6SCEbU.cjs}

@@ -3,7 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
-const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
 const BaseRadioButton = React.forwardRef(
   ({
     label,
@@ -20,6 +20,12 @@ const BaseRadioButton = React.forwardRef(
     id,
     "data-testid": testId = "radio-button",
     classMap,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    required,
     ...props
   }, ref) => {
     const uid = React.useId();
@@ -47,6 +53,7 @@ const BaseRadioButton = React.forwardRef(
       ),
       [classMap, rounding, shadow]
     );
+    const resolvedAriaLabelledBy = ariaLabelledBy ?? (label ? labelId : void 0);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -66,7 +73,12 @@ const BaseRadioButton = React.forwardRef(
               checked,
               onChange: handleChange,
               disabled,
-              "aria-labelledby": label ? labelId : void 0,
+              required,
+              "aria-label": ariaLabel,
+              "aria-labelledby": resolvedAriaLabelledBy,
+              "aria-describedby": ariaDescribedBy,
+              "aria-invalid": ariaInvalid,
+              "aria-required": ariaRequired ?? required,
               "data-testid": testId,
               ...props
             }
@@ -123,4 +135,4 @@ const RadioButton = React.forwardRef(
 );
 RadioButton.displayName = "RadioButton";
 exports.RadioButton = RadioButton;
-//# sourceMappingURL=RadioButton-BxdmcaZg.cjs.map
+//# sourceMappingURL=RadioButton-QK6SCEbU.cjs.map

package/dist/core/RadioButton-QK6SCEbU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton-QK6SCEbU.cjs","sources":["../../src/components/RadioButton/RadioButtonBase.tsx","../../src/components/RadioButton/core/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useId } from \"react\";\r\nimport { BaseRadioButtonProps } from \"./RadioButton.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseRadioButton = forwardRef<HTMLInputElement, BaseRadioButtonProps>(\r\n  (\r\n    {\r\n      label,\r\n      value,\r\n      checked,\r\n      onChange,\r\n      name,\r\n      theme = getDefaultTheme(),\r\n      rounding = getDefaultRounding(),\r\n      shadow = getDefaultShadow(),\r\n      state = \"\",\r\n      disabled = false,\r\n      className = \"\",\r\n      id,\r\n      \"data-testid\": testId = \"radio-button\",\r\n      classMap,\r\n      \"aria-label\": ariaLabel,\r\n      \"aria-labelledby\": ariaLabelledBy,\r\n      \"aria-describedby\": ariaDescribedBy,\r\n      \"aria-invalid\": ariaInvalid,\r\n      \"aria-required\": ariaRequired,\r\n      required,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const uid = useId();\r\n    const inputId = id ?? `${testId}-input-${uid}`;\r\n    const labelId = `${testId}-label-${uid}`;\r\n\r\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n      if (disabled) return;\r\n      if (e.target.checked) onChange(e.target.value);\r\n    };\r\n\r\n    const wrapperClasses = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.wrapper,\r\n          classMap[theme],\r\n          classMap[state],\r\n          disabled && classMap.disabled,\r\n          className,\r\n        ),\r\n      [classMap, theme, state, disabled, className],\r\n    );\r\n\r\n    const radioClasses = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.circle,\r\n          shadow && classMap[`shadow${capitalize(shadow)}`],\r\n          rounding && classMap[`round${capitalize(rounding)}`],\r\n        ),\r\n      [classMap, rounding, shadow],\r\n    );\r\n\r\n    const resolvedAriaLabelledBy =\r\n      ariaLabelledBy ?? (label ? labelId : undefined);\r\n\r\n    return (\r\n      <label\r\n        className={wrapperClasses}\r\n        data-testid={`${testId}-wrapper`}\r\n        htmlFor={inputId}\r\n      >\r\n        <input\r\n          ref={ref}\r\n          type=\"radio\"\r\n          id={inputId}\r\n          name={name}\r\n          className={classMap.input}\r\n          value={value}\r\n          checked={checked}\r\n          onChange={handleChange}\r\n          disabled={disabled}\r\n          required={required}\r\n          aria-label={ariaLabel}\r\n          aria-labelledby={resolvedAriaLabelledBy}\r\n          aria-describedby={ariaDescribedBy}\r\n          aria-invalid={ariaInvalid}\r\n          aria-required={ariaRequired ?? required}\r\n          data-testid={testId}\r\n          {...props}\r\n        />\r\n        <span\r\n          className={radioClasses}\r\n          aria-hidden=\"true\"\r\n          data-testid={`${testId}-circle`}\r\n        />\r\n        {label && (\r\n          <span\r\n            id={labelId}\r\n            className={classMap.label}\r\n            data-testid={`${testId}-label`}\r\n          >\r\n            {label}\r\n          </span>\r\n        )}\r\n      </label>\r\n    );\r\n  },\r\n);\r\n\r\nBaseRadioButton.displayName = \"BaseRadioButton\";\r\nexport default BaseRadioButton;\r\n","import { forwardRef } from \"react\";\r\nimport BaseRadioButton from \"../RadioButtonBase\";\r\nimport \"./RadioButton.scss\";\r\nimport { RadioButtonProps } from \"../RadioButton.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"radio_wrapper\",\r\n  input: \"radio_input\",\r\n  circle: \"radio_circle\",\r\n  label: \"radio_label\",\r\n  disabled: \"radio_disabled\",\r\n\r\n  primary: \"radio_primary\",\r\n  secondary: \"radio_secondary\",\r\n  tertiary: \"radio_tertiary\",\r\n  quaternary: \"radio_quaternary\",\r\n\r\n  success: \"radio_success\",\r\n  error: \"radio_error\",\r\n  warning: \"radio_warning\",\r\n\r\n  clear: \"radio_clear\",\r\n\r\n  shadowNone: \"radio_shadow-None\",\r\n  shadowLight: \"radio_shadow-Light\",\r\n  shadowMedium: \"radio_shadow-Medium\",\r\n  shadowStrong: \"radio_shadow-Strong\",\r\n  shadowIntense: \"radio_shadow-Intense\",\r\n\r\n  roundNone: \"radio_round-None\",\r\n  roundSmall: \"radio_round-Small\",\r\n  roundMedium: \"radio_round-Medium\",\r\n  roundLarge: \"radio_round-Large\",\r\n};\r\n\r\nconst RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\r\n  (props, ref) => <BaseRadioButton {...props} ref={ref} classMap={classes} />\r\n);\r\n\r\nRadioButton.displayName = \"RadioButton\";\r\nexport default RadioButton;\r\n"],"names":["forwardRef","getDefaultTheme","getDefaultRounding","getDefaultShadow","useId","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":"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"}

package/dist/core/RadioButton.cjs.js

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

package/dist/core/RadioButton.js

@@ -1,4 +1,4 @@
-import { R } from "./RadioButton-DygrrlH_.js";
+import { R } from "./RadioButton-BM0-FaUG.js";
 export {
   R as default
 };

package/dist/core/{Rating-B4qbA_y6.js → Rating-C7xfIXYT.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState, useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
-import { c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
+import { c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-DsaRlxmw.js";
 const StarIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -26,6 +26,7 @@ const StarIcon = (props) => /* @__PURE__ */ jsx(
   }
 );
 const BaseRating = ({
+  id,
   value,
   onChange,
   max = 5,
@@ -35,6 +36,12 @@ const BaseRating = ({
   state = "",
   className = "",
   label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  starAriaLabelPrefix = "Rate",
+  required = false,
+  readOnly = false,
   "data-testid": testId = "rating",
   classMap
 }) => {
@@ -42,13 +49,18 @@ const BaseRating = ({
   const safeMax = Math.max(1, Math.floor(max || 1));
   const clampedValue = Math.min(safeMax, Math.max(0, Math.floor(value || 0)));
   const [hover, setHover] = useState(null);
-  const labelId = label ? `${uid}-label` : void 0;
-  const groupProps = label ? { "aria-labelledby": labelId } : { "aria-label": "Rating" };
+  const ratingId = id || `${uid}-rating`;
+  const labelId = label ? `${ratingId}-label` : void 0;
+  const isDisabled = !interactive || state === "disabled";
+  const isReadOnly = readOnly;
+  const canInteract = interactive && !isReadOnly && !isDisabled;
+  const resolvedAriaLabelledBy = ariaLabelledBy || labelId;
+  const resolvedAriaLabel = !resolvedAriaLabelledBy ? ariaLabel || "Rating" : void 0;
   const handleClick = (index) => {
-    if (interactive && onChange) onChange(index + 1);
+    if (canInteract && onChange) onChange(index + 1);
   };
   const handleKeyDown = (event, index) => {
-    if (!interactive) return;
+    if (!canInteract) return;
     const commit = (v) => onChange == null ? void 0 : onChange(v);
     switch (event.key) {
       case "Enter":
@@ -86,52 +98,64 @@ const BaseRating = ({
       classMap[theme],
       classMap[state],
       classMap[size],
-      interactive && classMap.interactive,
+      canInteract && classMap.interactive,
       className
     ),
-    [classMap, theme, state, size, interactive, className]
+    [classMap, theme, state, size, canInteract, className]
   );
   return /* @__PURE__ */ jsxs("div", { className: classMap.container || "", children: [
-    label && /* @__PURE__ */ jsx(
+    label && /* @__PURE__ */ jsxs(
       "span",
       {
         id: labelId,
         className: classMap.label,
         "data-testid": `${testId}-label`,
-        children: label
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+        ]
       }
     ),
     /* @__PURE__ */ jsx(
       "div",
       {
+        id: ratingId,
         className: wrapperClass,
         role: "radiogroup",
-        ...groupProps,
-        "aria-disabled": !interactive || void 0,
+        "aria-label": resolvedAriaLabel,
+        "aria-labelledby": resolvedAriaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-disabled": isDisabled || void 0,
+        "aria-readonly": isReadOnly || void 0,
+        "aria-required": required || void 0,
         "data-testid": testId,
         children: Array.from({ length: safeMax }).map((_, index) => {
+          const starValue = index + 1;
           const active = index < (hover ?? clampedValue);
-          const isChecked = clampedValue === index + 1;
-          const isTabbable = interactive && (isChecked || clampedValue === 0 && index === 0);
+          const isChecked = clampedValue === starValue;
+          const isTabbable = canInteract && (isChecked || clampedValue === 0 && index === 0);
           return /* @__PURE__ */ jsx(
             "span",
             {
+              id: `${ratingId}-star-${starValue}`,
               className: combineClassNames(
                 classMap.star,
                 active && classMap.active
               ),
               onClick: () => handleClick(index),
-              onMouseEnter: () => interactive && setHover(index),
-              onMouseLeave: () => interactive && setHover(null),
+              onMouseEnter: () => canInteract && setHover(starValue),
+              onMouseLeave: () => canInteract && setHover(null),
               onKeyDown: (e) => handleKeyDown(e, index),
               role: "radio",
-              "aria-checked": !!isChecked,
+              "aria-checked": isChecked,
+              "aria-setsize": safeMax,
+              "aria-posinset": starValue,
+              "aria-label": `${starAriaLabelPrefix} ${starValue} of ${safeMax}${isChecked ? ", selected" : ""}`,
               tabIndex: isTabbable ? 0 : -1,
-              "aria-label": `${index + 1} out of ${safeMax} stars`,
-              "data-testid": `${testId}-star-${index + 1}`,
-              children: /* @__PURE__ */ jsx(StarIcon, { "aria-hidden": "true" })
+              "data-testid": `${testId}-star-${starValue}`,
+              children: /* @__PURE__ */ jsx(StarIcon, { "aria-hidden": "true", focusable: "false" })
             },
-            index
+            starValue
           );
         })
       }
@@ -176,4 +200,4 @@ Rating.displayName = "Rating";
 export {
   Rating as R
 };
-//# sourceMappingURL=Rating-B4qbA_y6.js.map
+//# sourceMappingURL=Rating-C7xfIXYT.js.map

package/dist/core/Rating-C7xfIXYT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating-C7xfIXYT.js","sources":["../../src/Icons/StarIcon.tsx","../../src/components/Rating/RatingBase.tsx","../../src/components/Rating/core/Rating.tsx"],"sourcesContent":["const StarIcon: 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=\"currentColor\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    color=\"currentColor\"\r\n    {...props}\r\n  >\r\n    <path\r\n      d=\"M8.58737 8.23597L11.1849 3.00376C11.5183 2.33208 12.4817 2.33208 12.8151 3.00376L15.4126 8.23597L21.2215 9.08017C21.9668 9.18848 22.2638 10.0994 21.7243 10.6219L17.5217 14.6918L18.5135 20.4414C18.6409 21.1798 17.8614 21.7428 17.1945 21.3941L12 18.678L6.80547 21.3941C6.1386 21.7428 5.35909 21.1798 5.48645 20.4414L6.47825 14.6918L2.27575 10.6219C1.73617 10.0994 2.03322 9.18848 2.77852 9.08017L8.58737 8.23597Z\"\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 StarIcon;\r\n","import React, { useState, KeyboardEvent, useMemo, useId } from \"react\";\r\nimport { StarIcon } from \"../../Icons\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport {\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\nimport { BaseRatingProps } from \"./Rating.types\";\r\n\r\nconst BaseRating: React.FC<BaseRatingProps> = ({\r\n  id,\r\n  value,\r\n  onChange,\r\n  max = 5,\r\n  size = getDefaultSize(),\r\n  interactive = true,\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  className = \"\",\r\n  label,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  starAriaLabelPrefix = \"Rate\",\r\n  required = false,\r\n  readOnly = false,\r\n  \"data-testid\": testId = \"rating\",\r\n  classMap,\r\n}) => {\r\n  const uid = useId();\r\n  const safeMax = Math.max(1, Math.floor(max || 1));\r\n  const clampedValue = Math.min(safeMax, Math.max(0, Math.floor(value || 0)));\r\n  const [hover, setHover] = useState<number | null>(null);\r\n\r\n  const ratingId = id || `${uid}-rating`;\r\n  const labelId = label ? `${ratingId}-label` : undefined;\r\n  const isDisabled = !interactive || state === \"disabled\";\r\n  const isReadOnly = readOnly;\r\n  const canInteract = interactive && !isReadOnly && !isDisabled;\r\n\r\n  const resolvedAriaLabelledBy = ariaLabelledBy || labelId;\r\n  const resolvedAriaLabel = !resolvedAriaLabelledBy\r\n    ? ariaLabel || \"Rating\"\r\n    : undefined;\r\n\r\n  const handleClick = (index: number) => {\r\n    if (canInteract && onChange) onChange(index + 1);\r\n  };\r\n\r\n  const handleKeyDown = (\r\n    event: KeyboardEvent<HTMLSpanElement>,\r\n    index: number,\r\n  ) => {\r\n    if (!canInteract) return;\r\n\r\n    const commit = (v: number) => onChange?.(v);\r\n\r\n    switch (event.key) {\r\n      case \"Enter\":\r\n      case \" \":\r\n        event.preventDefault();\r\n        commit(index + 1);\r\n        break;\r\n      case \"ArrowRight\":\r\n      case \"ArrowUp\": {\r\n        event.preventDefault();\r\n        const next = Math.min(safeMax, clampedValue + 1) || 1;\r\n        commit(next);\r\n        break;\r\n      }\r\n      case \"ArrowLeft\":\r\n      case \"ArrowDown\": {\r\n        event.preventDefault();\r\n        const prev = Math.max(1, clampedValue - 1);\r\n        commit(prev);\r\n        break;\r\n      }\r\n      case \"Home\":\r\n        event.preventDefault();\r\n        commit(1);\r\n        break;\r\n      case \"End\":\r\n        event.preventDefault();\r\n        commit(safeMax);\r\n        break;\r\n    }\r\n  };\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.wrapper,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        canInteract && classMap.interactive,\r\n        className,\r\n      ),\r\n    [classMap, theme, state, size, canInteract, className],\r\n  );\r\n\r\n  return (\r\n    <div className={classMap.container || \"\"}>\r\n      {label && (\r\n        <span\r\n          id={labelId}\r\n          className={classMap.label}\r\n          data-testid={`${testId}-label`}\r\n        >\r\n          {label}\r\n          {required && <span aria-hidden=\"true\"> *</span>}\r\n        </span>\r\n      )}\r\n\r\n      <div\r\n        id={ratingId}\r\n        className={wrapperClass}\r\n        role=\"radiogroup\"\r\n        aria-label={resolvedAriaLabel}\r\n        aria-labelledby={resolvedAriaLabelledBy}\r\n        aria-describedby={ariaDescribedBy}\r\n        aria-disabled={isDisabled || undefined}\r\n        aria-readonly={isReadOnly || undefined}\r\n        aria-required={required || undefined}\r\n        data-testid={testId}\r\n      >\r\n        {Array.from({ length: safeMax }).map((_, index) => {\r\n          const starValue = index + 1;\r\n          const active = index < (hover ?? clampedValue);\r\n          const isChecked = clampedValue === starValue;\r\n          const isTabbable =\r\n            canInteract && (isChecked || (clampedValue === 0 && index === 0));\r\n\r\n          return (\r\n            <span\r\n              key={starValue}\r\n              id={`${ratingId}-star-${starValue}`}\r\n              className={combineClassNames(\r\n                classMap.star,\r\n                active && classMap.active,\r\n              )}\r\n              onClick={() => handleClick(index)}\r\n              onMouseEnter={() => canInteract && setHover(starValue)}\r\n              onMouseLeave={() => canInteract && setHover(null)}\r\n              onKeyDown={(e) => handleKeyDown(e, index)}\r\n              role=\"radio\"\r\n              aria-checked={isChecked}\r\n              aria-setsize={safeMax}\r\n              aria-posinset={starValue}\r\n              aria-label={`${starAriaLabelPrefix} ${starValue} of ${safeMax}${\r\n                isChecked ? \", selected\" : \"\"\r\n              }`}\r\n              tabIndex={isTabbable ? 0 : -1}\r\n              data-testid={`${testId}-star-${starValue}`}\r\n            >\r\n              <StarIcon aria-hidden=\"true\" focusable=\"false\" />\r\n            </span>\r\n          );\r\n        })}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nBaseRating.displayName = \"BaseRating\";\r\nexport default BaseRating;\r\n","import React from \"react\";\r\nimport BaseRating from \"../RatingBase\";\r\nimport \"./Rating.scss\";\r\nimport { RatingProps } from \"../Rating.types\";\r\n\r\nconst classes = {\r\n  container: \"rating_container\",\r\n  wrapper: \"rating\",\r\n  label: \"rating_label\",\r\n  star: \"rating_star\",\r\n  active: \"rating_active\",\r\n\r\n  primary: \"rating_primary\",\r\n  secondary: \"rating_secondary\",\r\n  tertiary: \"rating_tertiary\",\r\n  quaternary: \"rating_quaternary\",\r\n\r\n  success: \"rating_success\",\r\n  error: \"rating_error\",\r\n  warning: \"rating_warning\",\r\n\r\n  clear: \"rating_clear\",\r\n\r\n  xs: \"rating_xs\",\r\n  small: \"rating_small\",\r\n  medium: \"rating_medium\",\r\n  large: \"rating_large\",\r\n  xl: \"rating_xl\",\r\n\r\n  shadowNone: \"rating_shadow-None\",\r\n  shadowLight: \"rating_shadow-Light\",\r\n  shadowMedium: \"rating_shadow-Medium\",\r\n  shadowStrong: \"rating_shadow-Strong\",\r\n  shadowIntense: \"rating_shadow-Intense\",\r\n\r\n  roundNone: \"rating_round-None\",\r\n  roundSmall: \"rating_round-Small\",\r\n  roundMedium: \"rating_round-Medium\",\r\n  roundLarge: \"rating_round-Large\",\r\n\r\n  interactive: \"rating_interactive\",\r\n};\r\n\r\nconst Rating: React.FC<RatingProps> = (props) => {\r\n  return <BaseRating {...props} classMap={classes} />;\r\n};\r\nRating.displayName = \"Rating\";\r\nexport default Rating;\r\n"],"names":[],"mappings":"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"}

package/dist/core/{Rating-U1MIoh5b.cjs → Rating-CIo6DFh5.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const classNames = require("./classNames-BcWMx052.cjs");
-const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
 const StarIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -27,6 +27,7 @@ const StarIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 const BaseRating = ({
+  id,
   value,
   onChange,
   max = 5,
@@ -36,6 +37,12 @@ const BaseRating = ({
   state = "",
   className = "",
   label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  starAriaLabelPrefix = "Rate",
+  required = false,
+  readOnly = false,
   "data-testid": testId = "rating",
   classMap
 }) => {
@@ -43,13 +50,18 @@ const BaseRating = ({
   const safeMax = Math.max(1, Math.floor(max || 1));
   const clampedValue = Math.min(safeMax, Math.max(0, Math.floor(value || 0)));
   const [hover, setHover] = React.useState(null);
-  const labelId = label ? `${uid}-label` : void 0;
-  const groupProps = label ? { "aria-labelledby": labelId } : { "aria-label": "Rating" };
+  const ratingId = id || `${uid}-rating`;
+  const labelId = label ? `${ratingId}-label` : void 0;
+  const isDisabled = !interactive || state === "disabled";
+  const isReadOnly = readOnly;
+  const canInteract = interactive && !isReadOnly && !isDisabled;
+  const resolvedAriaLabelledBy = ariaLabelledBy || labelId;
+  const resolvedAriaLabel = !resolvedAriaLabelledBy ? ariaLabel || "Rating" : void 0;
   const handleClick = (index) => {
-    if (interactive && onChange) onChange(index + 1);
+    if (canInteract && onChange) onChange(index + 1);
   };
   const handleKeyDown = (event, index) => {
-    if (!interactive) return;
+    if (!canInteract) return;
     const commit = (v) => onChange == null ? void 0 : onChange(v);
     switch (event.key) {
       case "Enter":
@@ -87,52 +99,64 @@ const BaseRating = ({
       classMap[theme],
       classMap[state],
       classMap[size],
-      interactive && classMap.interactive,
+      canInteract && classMap.interactive,
       className
     ),
-    [classMap, theme, state, size, interactive, className]
+    [classMap, theme, state, size, canInteract, className]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classMap.container || "", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(
+    label && /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
         id: labelId,
         className: classMap.label,
         "data-testid": `${testId}-label`,
-        children: label
+        children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " *" })
+        ]
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        id: ratingId,
         className: wrapperClass,
         role: "radiogroup",
-        ...groupProps,
-        "aria-disabled": !interactive || void 0,
+        "aria-label": resolvedAriaLabel,
+        "aria-labelledby": resolvedAriaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-disabled": isDisabled || void 0,
+        "aria-readonly": isReadOnly || void 0,
+        "aria-required": required || void 0,
         "data-testid": testId,
         children: Array.from({ length: safeMax }).map((_, index) => {
+          const starValue = index + 1;
           const active = index < (hover ?? clampedValue);
-          const isChecked = clampedValue === index + 1;
-          const isTabbable = interactive && (isChecked || clampedValue === 0 && index === 0);
+          const isChecked = clampedValue === starValue;
+          const isTabbable = canInteract && (isChecked || clampedValue === 0 && index === 0);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
+              id: `${ratingId}-star-${starValue}`,
               className: classNames.combineClassNames(
                 classMap.star,
                 active && classMap.active
               ),
               onClick: () => handleClick(index),
-              onMouseEnter: () => interactive && setHover(index),
-              onMouseLeave: () => interactive && setHover(null),
+              onMouseEnter: () => canInteract && setHover(starValue),
+              onMouseLeave: () => canInteract && setHover(null),
               onKeyDown: (e) => handleKeyDown(e, index),
               role: "radio",
-              "aria-checked": !!isChecked,
+              "aria-checked": isChecked,
+              "aria-setsize": safeMax,
+              "aria-posinset": starValue,
+              "aria-label": `${starAriaLabelPrefix} ${starValue} of ${safeMax}${isChecked ? ", selected" : ""}`,
               tabIndex: isTabbable ? 0 : -1,
-              "aria-label": `${index + 1} out of ${safeMax} stars`,
-              "data-testid": `${testId}-star-${index + 1}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { "aria-hidden": "true" })
+              "data-testid": `${testId}-star-${starValue}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { "aria-hidden": "true", focusable: "false" })
             },
-            index
+            starValue
           );
         })
       }
@@ -175,4 +199,4 @@ const Rating = (props) => {
 };
 Rating.displayName = "Rating";
 exports.Rating = Rating;
-//# sourceMappingURL=Rating-U1MIoh5b.cjs.map
+//# sourceMappingURL=Rating-CIo6DFh5.cjs.map