boreal-ui 0.0.72 → 0.0.73

package/dist/core/{Card-CRIPRZ_b.js → Card-dazG4EK1.js}

@@ -4,9 +4,9 @@ import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
 import { e as getDefaultBorder, a as getDefaultRounding, b as getDefaultShadow, c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-DsaRlxmw.js";
 /* empty css                 */
-import { B as Button } from "./Button-Sn-XGEsn.js";
-import { I as IconButton } from "./IconButton-6hjW9_Za.js";
-import { S as SkeletonLoader } from "./Skeleton-B9LVkce_.js";
+import { B as Button } from "./Button-IALg9VKr.js";
+import { I as IconButton } from "./IconButton-ChJJCB4O.js";
+import { S as SkeletonLoader } from "./Skeleton-C-L3OgVt.js";
 const CardBase = ({
   theme = getDefaultTheme(),
   state = "",
@@ -21,6 +21,7 @@ const CardBase = ({
   imageHeight,
   imageWidth,
   imageFill,
+  imageDecorative = false,
   className = "",
   imageClassName = "",
   headerClassName = "",
@@ -37,17 +38,34 @@ const CardBase = ({
   layout = "vertical",
   loading = false,
   children,
+  id,
+  role,
+  tabIndex,
+  selectable = false,
+  selected = false,
+  disabled = false,
   "data-testid": testId = "card",
   "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
+  "aria-expanded": ariaExpanded,
+  "aria-controls": ariaControls,
+  "aria-current": ariaCurrent,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic,
+  headerId,
+  descriptionId,
   classMap,
   SkeletonComponent,
   ImageComponent
 }) => {
   const autoId = useId();
-  const headerId = ariaLabelledBy || `${autoId}-header`;
-  const descriptionId = `${autoId}-description`;
+  const resolvedHeaderId = headerId || ariaLabelledBy || `${autoId}-header`;
+  const resolvedDescriptionId = descriptionId || `${autoId}-description`;
+  const hasTitle = Boolean(title);
+  const hasDescription = Boolean(description);
   const derivedAriaLabel = ariaLabel || title || description || "Content card";
+  const resolvedRole = role || (selectable ? "button" : hasTitle || ariaLabel ? "region" : void 0);
   const FallbackImage = (props) => /* @__PURE__ */ jsx("img", { ...props });
   function isStaticCardImage(value) {
     return typeof value === "object" && value !== null && "src" in value && typeof value.src === "string";
@@ -82,7 +100,7 @@ const CardBase = ({
     height: resolvedHeight
   } = normalizeImageSource(imageUrl, imageWidth, imageHeight);
   const hasImage = Boolean(imgSrc);
-  const imgAlt = imageAlt || `${title || "Card"} image`;
+  const imgAlt = imageDecorative ? "" : imageAlt || `${title || "Card"} image`;
   const ImageRenderer = ImageComponent || FallbackImage;
   const cardClassName = useMemo(
     () => combineClassNames(
@@ -97,6 +115,9 @@ const CardBase = ({
       border && classMap[`border${capitalize(border)}`],
       outline && classMap.outline,
       loading && classMap.loading,
+      disabled && classMap.disabled,
+      selected && classMap.selected,
+      selectable && classMap.selectable,
       className
     ),
     [
@@ -111,18 +132,31 @@ const CardBase = ({
       border,
       outline,
       loading,
+      disabled,
+      selected,
+      selectable,
       className
     ]
   );
   return /* @__PURE__ */ jsx(
     "div",
     {
+      id,
       "data-testid": testId,
       className: cardClassName,
-      role: "region",
-      "aria-labelledby": title ? headerId : void 0,
-      "aria-label": !title ? derivedAriaLabel : void 0,
+      role: resolvedRole,
+      tabIndex: disabled ? -1 : tabIndex,
+      "aria-labelledby": hasTitle && !ariaLabel ? resolvedHeaderId : ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy || (hasDescription ? resolvedDescriptionId : void 0),
+      "aria-label": !hasTitle || ariaLabel ? derivedAriaLabel : void 0,
       "aria-busy": loading || void 0,
+      "aria-disabled": disabled || void 0,
+      "aria-pressed": selectable ? selected : void 0,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
+      "aria-current": ariaCurrent,
+      "aria-live": ariaLive,
+      "aria-atomic": ariaAtomic,
       children: loading ? /* @__PURE__ */ jsx(
         SkeletonComponent,
         {
@@ -154,8 +188,8 @@ const CardBase = ({
             "div",
             {
               className: combineClassNames(classMap.header, headerClassName),
-              id: headerId,
-              children: renderHeader ? renderHeader() : title ? /* @__PURE__ */ jsxs("h2", { className: classMap.title, children: [
+              id: resolvedHeaderId,
+              children: renderHeader ? renderHeader() : hasTitle ? /* @__PURE__ */ jsxs("h2", { className: classMap.title, children: [
                 cardIcon && /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -169,18 +203,17 @@ const CardBase = ({
               ] }) : null
             }
           ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: combineClassNames(classMap.body, bodyClassName),
-              role: "group",
-              "aria-describedby": description ? descriptionId : void 0,
-              children: renderContent ? renderContent() : /* @__PURE__ */ jsxs(Fragment, { children: [
-                description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: classMap.description, children: description }),
-                children && /* @__PURE__ */ jsx("div", { className: classMap.children, children })
-              ] })
-            }
-          ),
+          /* @__PURE__ */ jsx("div", { className: combineClassNames(classMap.body, bodyClassName), children: renderContent ? renderContent() : /* @__PURE__ */ jsxs(Fragment, { children: [
+            hasDescription && /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: resolvedDescriptionId,
+                className: classMap.description,
+                children: description
+              }
+            ),
+            children && /* @__PURE__ */ jsx("div", { className: classMap.children, children })
+          ] }) }),
           (actionButtons.length > 0 || renderFooter) && /* @__PURE__ */ jsxs(
             "div",
             {
@@ -195,11 +228,19 @@ const CardBase = ({
                       className: classMap.action_button,
                       theme: button.theme || "clear",
                       state: button.state || "",
-                      "aria-label": button.label,
+                      "aria-label": button["aria-label"] || button.label,
+                      "aria-describedby": button["aria-describedby"],
+                      "aria-labelledby": button["aria-labelledby"],
+                      "aria-pressed": button["aria-pressed"],
+                      "aria-expanded": button["aria-expanded"],
+                      "aria-controls": button["aria-controls"],
+                      "aria-current": button["aria-current"],
+                      role: button.role,
+                      title: button.title,
                       size: button.size || size,
                       href: button.href,
                       loading: button.loading,
-                      ariaLabel: button.ariaLabel
+                      disabled: button.disabled
                     },
                     index
                   ) : /* @__PURE__ */ jsx(
@@ -212,7 +253,16 @@ const CardBase = ({
                       href: button.href,
                       loading: button.loading,
                       size: button.size || size,
-                      ariaLabel: button.ariaLabel,
+                      ariaLabel: button["aria-label"] || button.label,
+                      "aria-describedby": button["aria-describedby"],
+                      "aria-labelledby": button["aria-labelledby"],
+                      "aria-pressed": button["aria-pressed"],
+                      "aria-expanded": button["aria-expanded"],
+                      "aria-controls": button["aria-controls"],
+                      "aria-current": button["aria-current"],
+                      role: button.role,
+                      title: button.title,
+                      disabled: button.disabled,
                       children: button.label
                     },
                     index
@@ -297,4 +347,4 @@ Card.displayName = "Card";
 export {
   Card as C
 };
-//# sourceMappingURL=Card-CRIPRZ_b.js.map
+//# sourceMappingURL=Card-dazG4EK1.js.map

package/dist/core/Card-dazG4EK1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-dazG4EK1.js","sources":["../../src/components/Card/CardBase.tsx","../../src/components/Card/core/Card.tsx"],"sourcesContent":["import React, { useId, useMemo } from \"react\";\r\nimport { CardBaseProps, CardImageSource, StaticCardImage } from \"./Card.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  getDefaultBorder,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst CardBase: React.FC<CardBaseProps> = ({\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  cardIcon,\r\n  title = \"\",\r\n  border = getDefaultBorder(),\r\n  description = \"\",\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  imageUrl,\r\n  imageAlt,\r\n  imageHeight,\r\n  imageWidth,\r\n  imageFill,\r\n  imageDecorative = false,\r\n  className = \"\",\r\n  imageClassName = \"\",\r\n  headerClassName = \"\",\r\n  bodyClassName = \"\",\r\n  footerClassName = \"\",\r\n  outline = false,\r\n  size = getDefaultSize(),\r\n  align = \"center\",\r\n  renderHeader,\r\n  renderContent,\r\n  renderFooter,\r\n  actionButtons = [],\r\n  useIconButtons = false,\r\n  layout = \"vertical\",\r\n  loading = false,\r\n  children,\r\n  id,\r\n  role,\r\n  tabIndex,\r\n  selectable = false,\r\n  selected = false,\r\n  disabled = false,\r\n  \"data-testid\": testId = \"card\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-expanded\": ariaExpanded,\r\n  \"aria-controls\": ariaControls,\r\n  \"aria-current\": ariaCurrent,\r\n  \"aria-live\": ariaLive,\r\n  \"aria-atomic\": ariaAtomic,\r\n  headerId,\r\n  descriptionId,\r\n  classMap,\r\n  SkeletonComponent,\r\n  ImageComponent,\r\n}) => {\r\n  const autoId = useId();\r\n  const resolvedHeaderId = headerId || ariaLabelledBy || `${autoId}-header`;\r\n  const resolvedDescriptionId = descriptionId || `${autoId}-description`;\r\n\r\n  const hasTitle = Boolean(title);\r\n  const hasDescription = Boolean(description);\r\n\r\n  const derivedAriaLabel = ariaLabel || title || description || \"Content card\";\r\n\r\n  const resolvedRole =\r\n    role ||\r\n    (selectable ? \"button\" : hasTitle || ariaLabel ? \"region\" : undefined);\r\n\r\n  const FallbackImage = (props: React.ImgHTMLAttributes<HTMLImageElement>) => (\r\n    <img {...props} />\r\n  );\r\n\r\n  function isStaticCardImage(value: unknown): value is StaticCardImage {\r\n    return (\r\n      typeof value === \"object\" &&\r\n      value !== null &&\r\n      \"src\" in value &&\r\n      typeof (value as { src: unknown }).src === \"string\"\r\n    );\r\n  }\r\n\r\n  function normalizeImageSource(\r\n    srcInput: CardImageSource | undefined,\r\n    fallbackWidth?: number,\r\n    fallbackHeight?: number,\r\n  ): { src?: string; width?: number; height?: number } {\r\n    if (!srcInput) {\r\n      return { src: undefined, width: fallbackWidth, height: fallbackHeight };\r\n    }\r\n\r\n    if (typeof srcInput === \"string\") {\r\n      const trimmed = srcInput.trim();\r\n      if (!trimmed) {\r\n        return { src: undefined, width: fallbackWidth, height: fallbackHeight };\r\n      }\r\n      return { src: trimmed, width: fallbackWidth, height: fallbackHeight };\r\n    }\r\n\r\n    if (isStaticCardImage(srcInput)) {\r\n      const trimmed = srcInput.src.trim();\r\n      if (!trimmed) {\r\n        return { src: undefined, width: fallbackWidth, height: fallbackHeight };\r\n      }\r\n\r\n      return {\r\n        src: trimmed,\r\n        width: srcInput.width ?? fallbackWidth,\r\n        height: srcInput.height ?? fallbackHeight,\r\n      };\r\n    }\r\n\r\n    return { src: undefined, width: fallbackWidth, height: fallbackHeight };\r\n  }\r\n\r\n  const {\r\n    src: imgSrc,\r\n    width: resolvedWidth,\r\n    height: resolvedHeight,\r\n  } = normalizeImageSource(imageUrl, imageWidth, imageHeight);\r\n\r\n  const hasImage = Boolean(imgSrc);\r\n  const imgAlt = imageDecorative ? \"\" : imageAlt || `${title || \"Card\"} image`;\r\n\r\n  const ImageRenderer = ImageComponent || FallbackImage;\r\n\r\n  const cardClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.card,\r\n        classMap[layout],\r\n        align && classMap[align],\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        border && classMap[`border${capitalize(border)}`],\r\n        outline && classMap.outline,\r\n        loading && classMap.loading,\r\n        disabled && classMap.disabled,\r\n        selected && classMap.selected,\r\n        selectable && classMap.selectable,\r\n        className,\r\n      ),\r\n    [\r\n      classMap,\r\n      layout,\r\n      align,\r\n      theme,\r\n      state,\r\n      size,\r\n      shadow,\r\n      rounding,\r\n      border,\r\n      outline,\r\n      loading,\r\n      disabled,\r\n      selected,\r\n      selectable,\r\n      className,\r\n    ],\r\n  );\r\n\r\n  return (\r\n    <div\r\n      id={id}\r\n      data-testid={testId}\r\n      className={cardClassName}\r\n      role={resolvedRole}\r\n      tabIndex={disabled ? -1 : tabIndex}\r\n      aria-labelledby={\r\n        hasTitle && !ariaLabel ? resolvedHeaderId : ariaLabelledBy\r\n      }\r\n      aria-describedby={\r\n        ariaDescribedBy || (hasDescription ? resolvedDescriptionId : undefined)\r\n      }\r\n      aria-label={!hasTitle || ariaLabel ? derivedAriaLabel : undefined}\r\n      aria-busy={loading || undefined}\r\n      aria-disabled={disabled || undefined}\r\n      aria-pressed={selectable ? selected : undefined}\r\n      aria-expanded={ariaExpanded}\r\n      aria-controls={ariaControls}\r\n      aria-current={ariaCurrent}\r\n      aria-live={ariaLive}\r\n      aria-atomic={ariaAtomic}\r\n    >\r\n      {loading ? (\r\n        <SkeletonComponent\r\n          width=\"250px\"\r\n          height=\"250px\"\r\n          data-testid={`${testId}-skeleton`}\r\n        />\r\n      ) : (\r\n        <div className={classMap.content}>\r\n          {hasImage &&\r\n            imgSrc &&\r\n            (imageFill ? (\r\n              <div className={classMap.media}>\r\n                <ImageRenderer\r\n                  src={imgSrc}\r\n                  alt={imgAlt}\r\n                  className={combineClassNames(classMap.image, imageClassName)}\r\n                  fill\r\n                />\r\n              </div>\r\n            ) : (\r\n              <ImageRenderer\r\n                src={imgSrc}\r\n                alt={imgAlt}\r\n                className={combineClassNames(classMap.image, imageClassName)}\r\n                width={resolvedWidth ?? 640}\r\n                height={resolvedHeight ?? 360}\r\n              />\r\n            ))}\r\n\r\n          <div>\r\n            <div\r\n              className={combineClassNames(classMap.header, headerClassName)}\r\n              id={resolvedHeaderId}\r\n            >\r\n              {renderHeader ? (\r\n                renderHeader()\r\n              ) : hasTitle ? (\r\n                <h2 className={classMap.title}>\r\n                  {cardIcon && (\r\n                    <span\r\n                      className={classMap.icon}\r\n                      aria-hidden=\"true\"\r\n                      data-testid={`${testId}-icon`}\r\n                    >\r\n                      {React.createElement(cardIcon)}\r\n                    </span>\r\n                  )}\r\n                  {title}\r\n                </h2>\r\n              ) : null}\r\n            </div>\r\n\r\n            <div className={combineClassNames(classMap.body, bodyClassName)}>\r\n              {renderContent ? (\r\n                renderContent()\r\n              ) : (\r\n                <>\r\n                  {hasDescription && (\r\n                    <p\r\n                      id={resolvedDescriptionId}\r\n                      className={classMap.description}\r\n                    >\r\n                      {description}\r\n                    </p>\r\n                  )}\r\n                  {children && (\r\n                    <div className={classMap.children}>{children}</div>\r\n                  )}\r\n                </>\r\n              )}\r\n            </div>\r\n\r\n            {(actionButtons.length > 0 || renderFooter) && (\r\n              <div\r\n                className={combineClassNames(classMap.footer, footerClassName)}\r\n              >\r\n                {actionButtons.length > 0 && (\r\n                  <div className={classMap.actions}>\r\n                    {actionButtons.map((button, index) =>\r\n                      useIconButtons && button.icon ? (\r\n                        <button.iconButtonComponent\r\n                          key={index}\r\n                          icon={button.icon}\r\n                          onClick={button.onClick}\r\n                          className={classMap.action_button}\r\n                          theme={button.theme || \"clear\"}\r\n                          state={button.state || \"\"}\r\n                          aria-label={button[\"aria-label\"] || button.label}\r\n                          aria-describedby={button[\"aria-describedby\"]}\r\n                          aria-labelledby={button[\"aria-labelledby\"]}\r\n                          aria-pressed={button[\"aria-pressed\"]}\r\n                          aria-expanded={button[\"aria-expanded\"]}\r\n                          aria-controls={button[\"aria-controls\"]}\r\n                          aria-current={button[\"aria-current\"]}\r\n                          role={button.role}\r\n                          title={button.title}\r\n                          size={button.size || size}\r\n                          href={button.href}\r\n                          loading={button.loading}\r\n                          disabled={button.disabled}\r\n                        />\r\n                      ) : (\r\n                        <button.buttonComponent\r\n                          key={index}\r\n                          onClick={button.onClick}\r\n                          className={classMap.action_button}\r\n                          theme={button.theme || \"secondary\"}\r\n                          state={button.state || \"\"}\r\n                          href={button.href}\r\n                          loading={button.loading}\r\n                          size={button.size || size}\r\n                          ariaLabel={button[\"aria-label\"] || button.label}\r\n                          aria-describedby={button[\"aria-describedby\"]}\r\n                          aria-labelledby={button[\"aria-labelledby\"]}\r\n                          aria-pressed={button[\"aria-pressed\"]}\r\n                          aria-expanded={button[\"aria-expanded\"]}\r\n                          aria-controls={button[\"aria-controls\"]}\r\n                          aria-current={button[\"aria-current\"]}\r\n                          role={button.role}\r\n                          title={button.title}\r\n                          disabled={button.disabled}\r\n                        >\r\n                          {button.label}\r\n                        </button.buttonComponent>\r\n                      ),\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {renderFooter && renderFooter()}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nCardBase.displayName = \"CardBase\";\r\n\r\nexport default CardBase;\r\n","import React from \"react\";\r\nimport CardBase from \"../CardBase\";\r\nimport \"./Card.scss\";\r\nimport { Button, IconButton, Skeleton } from \"../../../index.core\";\r\nimport { CardProps } from \"../Card.types\";\r\n\r\nconst classes = {\r\n  card: \"card\",\r\n\r\n  left: \"card_left\",\r\n  right: \"card_right\",\r\n  center: \"card_center\",\r\n\r\n  primary: \"card_primary\",\r\n  secondary: \"card_secondary\",\r\n  tertiary: \"card_tertiary\",\r\n  quaternary: \"card_quaternary\",\r\n\r\n  success: \"card_success\",\r\n  warning: \"card_warning\",\r\n  error: \"card_error\",\r\n\r\n  clear: \"card_clear\",\r\n\r\n  outline: \"card_outline\",\r\n  loading: \"card_loading\",\r\n\r\n  content: \"card_content\",\r\n\r\n  xs: \"card_xs\",\r\n  small: \"card_small\",\r\n  medium: \"card_medium\",\r\n  large: \"card_large\",\r\n  xl: \"card_xl\",\r\n\r\n  shadowNone: \"card_shadow-None\",\r\n  shadowLight: \"card_shadow-Light\",\r\n  shadowMedium: \"card_shadow-Medium\",\r\n  shadowStrong: \"card_shadow-Strong\",\r\n  shadowIntense: \"card_shadow-Intense\",\r\n\r\n  roundNone: \"card_round-None\",\r\n  roundSmall: \"card_round-Small\",\r\n  roundMedium: \"card_round-Medium\",\r\n  roundLarge: \"card_round-Large\",\r\n\r\n  borderNone: \"card_border-None\",\r\n  borderXs: \"card_border-Xs\",\r\n  borderSmall: \"card_border-Small\",\r\n  borderMedium: \"card_border-Medium\",\r\n  borderLarge: \"card_border-Large\",\r\n  borderXl: \"card_border-Xl\",\r\n\r\n  vertical: \"card_vertical\",\r\n  horizontal: \"card_horizontal\",\r\n\r\n  image: \"card_image\",\r\n  header: \"card_header\",\r\n  title: \"card_title\",\r\n  icon: \"card_icon\",\r\n  body: \"card_body\",\r\n  description: \"card_description\",\r\n  children: \"card_children\",\r\n  footer: \"card_footer\",\r\n  actions: \"card_actions\",\r\n  action_button: \"card_action_button\",\r\n};\r\n\r\nconst Card: React.FC<CardProps> = (props) => {\r\n  const wrappedButtons = (props.actionButtons ?? []).map((b) => ({\r\n    ...b,\r\n    buttonComponent: Button,\r\n    iconButtonComponent: IconButton,\r\n  }));\r\n\r\n  return (\r\n    <CardBase\r\n      {...props}\r\n      actionButtons={wrappedButtons}\r\n      classMap={classes}\r\n      SkeletonComponent={Skeleton}\r\n    />\r\n  );\r\n};\r\nCard.displayName = \"Card\";\r\nexport default Card;\r\n"],"names":["Skeleton"],"mappings":"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"}

package/dist/core/Card.cjs.js

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

package/dist/core/Card.js

@@ -1,4 +1,4 @@
-import { C } from "./Card-CRIPRZ_b.js";
+import { C } from "./Card-dazG4EK1.js";
 export {
   C as default
 };

package/dist/core/CheckBox.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Checkbox = require("./Checkbox-BN4KCkz0.cjs");
+const Checkbox = require("./Checkbox-JWFInEW_.cjs");
 module.exports = Checkbox.Checkbox;
 //# sourceMappingURL=CheckBox.cjs.js.map

package/dist/core/CheckBox.js

@@ -1,4 +1,4 @@
-import { C } from "./Checkbox-8EgwIJTX.js";
+import { C } from "./Checkbox-DmMDTc5Z.js";
 export {
   C as default
 };

package/dist/core/{Checkbox-8EgwIJTX.js → Checkbox-DmMDTc5Z.js}

@@ -14,10 +14,18 @@ const CheckboxBase = forwardRef(
     shadow = getDefaultShadow(),
     state = "",
     disabled = false,
+    required = false,
+    invalid = false,
     label = "",
+    description,
+    errorMessage,
     labelPosition = "right",
     className = "",
     id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-errormessage": ariaErrorMessage,
     "data-testid": testId = "checkbox",
     classMap,
     ...props
@@ -25,6 +33,8 @@ const CheckboxBase = forwardRef(
     const internalId = useId();
     const checkboxId = id || internalId;
     const labelId = label ? `${checkboxId}-label` : void 0;
+    const descriptionId = description ? `${checkboxId}-description` : void 0;
+    const errorId = errorMessage ? `${checkboxId}-error` : void 0;
     const inputRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
     useEffect(() => {
@@ -42,6 +52,7 @@ const CheckboxBase = forwardRef(
         shadow && classMap[`shadow${capitalize(shadow)}`],
         rounding && classMap[`round${capitalize(rounding)}`],
         disabled && classMap.disabled,
+        invalid && classMap.invalid,
         className
       ),
       [
@@ -53,58 +64,86 @@ const CheckboxBase = forwardRef(
         shadow,
         rounding,
         disabled,
+        invalid,
         className
       ]
     );
+    const resolvedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? labelId : void 0);
+    const resolvedAriaDescribedBy = [ariaDescribedBy, descriptionId, errorId].filter(Boolean).join(" ") || void 0;
+    const resolvedAriaErrorMessage = ariaErrorMessage ?? errorId;
     return /* @__PURE__ */ jsxs(
-      "label",
+      "div",
       {
-        htmlFor: checkboxId,
         className: combinedClassName,
         "data-testid": testId ? `${testId}-wrapper` : void 0,
         children: [
-          label && labelPosition === "left" && /* @__PURE__ */ jsx(
-            "span",
+          /* @__PURE__ */ jsxs("label", { htmlFor: checkboxId, className: classMap.labelWrapper, children: [
+            label && labelPosition === "left" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classMap.label,
+                id: labelId,
+                "data-testid": testId ? `${testId}-label` : void 0,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: checkboxId,
+                ref: inputRef,
+                type: "checkbox",
+                className: classMap.input,
+                checked,
+                onChange: (e) => onChange(e.target.checked),
+                disabled,
+                required,
+                "aria-label": ariaLabel,
+                "aria-labelledby": resolvedAriaLabelledBy,
+                "aria-describedby": resolvedAriaDescribedBy,
+                "aria-invalid": invalid || state === "error" ? true : void 0,
+                "aria-errormessage": invalid || state === "error" ? resolvedAriaErrorMessage : void 0,
+                "aria-checked": indeterminate ? "mixed" : checked,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: combineClassNames(
+                  classMap.box,
+                  indeterminate && classMap.indeterminate
+                ),
+                "aria-hidden": "true",
+                "data-testid": testId ? `${testId}-box` : void 0
+              }
+            ),
+            label && labelPosition === "right" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classMap.label,
+                id: labelId,
+                "data-testid": testId ? `${testId}-label` : void 0,
+                children: label
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsx(
+            "div",
             {
-              className: classMap.label,
-              id: labelId,
-              "data-testid": testId ? `${testId}-label` : void 0,
-              children: label
+              id: descriptionId,
+              className: classMap.description,
+              "data-testid": testId ? `${testId}-description` : void 0,
+              children: description
             }
           ),
-          /* @__PURE__ */ jsx(
-            "input",
+          errorMessage && /* @__PURE__ */ jsx(
+            "div",
             {
-              id: checkboxId,
-              ref: inputRef,
-              type: "checkbox",
-              className: classMap.input,
-              checked,
-              onChange: (e) => onChange(e.target.checked),
-              disabled,
-              "aria-labelledby": labelId,
-              "aria-checked": indeterminate ? "mixed" : void 0,
-              ...props
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: combineClassNames(
-                classMap.box,
-                indeterminate && classMap.indeterminate
-              ),
-              "aria-hidden": "true",
-              "data-testid": testId ? `${testId}-box` : void 0
-            }
-          ),
-          label && labelPosition === "right" && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: classMap.label,
-              id: labelId,
-              "data-testid": testId ? `${testId}-label` : void 0,
-              children: label
+              id: errorId,
+              className: classMap.errorMessage,
+              "data-testid": testId ? `${testId}-error` : void 0,
+              children: errorMessage
             }
           )
         ]
@@ -141,6 +180,7 @@ const classes = {
   roundSmall: "checkbox_round-Small",
   roundMedium: "checkbox_round-Medium",
   roundLarge: "checkbox_round-Large",
+  labelWrapper: "checkbox_label-wrapper",
   label: "checkbox_label",
   input: "checkbox_input",
   box: "checkbox_box"
@@ -150,4 +190,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox as C
 };
-//# sourceMappingURL=Checkbox-8EgwIJTX.js.map
+//# sourceMappingURL=Checkbox-DmMDTc5Z.js.map

package/dist/core/Checkbox-DmMDTc5Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-DmMDTc5Z.js","sources":["../../src/components/Checkbox/CheckboxBase.tsx","../../src/components/Checkbox/core/Checkbox.tsx"],"sourcesContent":["import {\r\n  forwardRef,\r\n  useId,\r\n  useRef,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  useMemo,\r\n} from \"react\";\r\nimport type { CheckboxBaseProps } from \"./Checkbox.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 CheckboxBase = forwardRef<HTMLInputElement, CheckboxBaseProps>(\r\n  (\r\n    {\r\n      checked,\r\n      onChange,\r\n      indeterminate = false,\r\n      theme = getDefaultTheme(),\r\n      rounding = getDefaultRounding(),\r\n      size = getDefaultSize(),\r\n      shadow = getDefaultShadow(),\r\n      state = \"\",\r\n      disabled = false,\r\n      required = false,\r\n      invalid = false,\r\n      label = \"\",\r\n      description,\r\n      errorMessage,\r\n      labelPosition = \"right\",\r\n      className = \"\",\r\n      id,\r\n      \"aria-label\": ariaLabel,\r\n      \"aria-labelledby\": ariaLabelledBy,\r\n      \"aria-describedby\": ariaDescribedBy,\r\n      \"aria-errormessage\": ariaErrorMessage,\r\n      \"data-testid\": testId = \"checkbox\",\r\n      classMap,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const internalId = useId();\r\n    const checkboxId = id || internalId;\r\n\r\n    const labelId = label ? `${checkboxId}-label` : undefined;\r\n    const descriptionId = description ? `${checkboxId}-description` : undefined;\r\n    const errorId = errorMessage ? `${checkboxId}-error` : undefined;\r\n\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\r\n\r\n    useEffect(() => {\r\n      if (inputRef.current) {\r\n        inputRef.current.indeterminate = indeterminate;\r\n      }\r\n    }, [indeterminate]);\r\n\r\n    const combinedClassName = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.checkbox,\r\n          classMap[theme],\r\n          classMap[state],\r\n          classMap[labelPosition],\r\n          classMap[size],\r\n          shadow && classMap[`shadow${capitalize(shadow)}`],\r\n          rounding && classMap[`round${capitalize(rounding)}`],\r\n          disabled && classMap.disabled,\r\n          invalid && classMap.invalid,\r\n          className,\r\n        ),\r\n      [\r\n        classMap,\r\n        theme,\r\n        state,\r\n        labelPosition,\r\n        size,\r\n        shadow,\r\n        rounding,\r\n        disabled,\r\n        invalid,\r\n        className,\r\n      ],\r\n    );\r\n\r\n    const resolvedAriaLabelledBy =\r\n      ariaLabelledBy ?? (!ariaLabel ? labelId : undefined);\r\n\r\n    const resolvedAriaDescribedBy =\r\n      [ariaDescribedBy, descriptionId, errorId].filter(Boolean).join(\" \") ||\r\n      undefined;\r\n\r\n    const resolvedAriaErrorMessage = ariaErrorMessage ?? errorId;\r\n\r\n    return (\r\n      <div\r\n        className={combinedClassName}\r\n        data-testid={testId ? `${testId}-wrapper` : undefined}\r\n      >\r\n        <label htmlFor={checkboxId} className={classMap.labelWrapper}>\r\n          {label && labelPosition === \"left\" && (\r\n            <span\r\n              className={classMap.label}\r\n              id={labelId}\r\n              data-testid={testId ? `${testId}-label` : undefined}\r\n            >\r\n              {label}\r\n            </span>\r\n          )}\r\n\r\n          <input\r\n            id={checkboxId}\r\n            ref={inputRef}\r\n            type=\"checkbox\"\r\n            className={classMap.input}\r\n            checked={checked}\r\n            onChange={(e) => onChange(e.target.checked)}\r\n            disabled={disabled}\r\n            required={required}\r\n            aria-label={ariaLabel}\r\n            aria-labelledby={resolvedAriaLabelledBy}\r\n            aria-describedby={resolvedAriaDescribedBy}\r\n            aria-invalid={invalid || state === \"error\" ? true : undefined}\r\n            aria-errormessage={\r\n              invalid || state === \"error\"\r\n                ? resolvedAriaErrorMessage\r\n                : undefined\r\n            }\r\n            aria-checked={indeterminate ? \"mixed\" : checked}\r\n            {...props}\r\n          />\r\n\r\n          <span\r\n            className={combineClassNames(\r\n              classMap.box,\r\n              indeterminate && classMap.indeterminate,\r\n            )}\r\n            aria-hidden=\"true\"\r\n            data-testid={testId ? `${testId}-box` : undefined}\r\n          />\r\n\r\n          {label && labelPosition === \"right\" && (\r\n            <span\r\n              className={classMap.label}\r\n              id={labelId}\r\n              data-testid={testId ? `${testId}-label` : undefined}\r\n            >\r\n              {label}\r\n            </span>\r\n          )}\r\n        </label>\r\n\r\n        {description && (\r\n          <div\r\n            id={descriptionId}\r\n            className={classMap.description}\r\n            data-testid={testId ? `${testId}-description` : undefined}\r\n          >\r\n            {description}\r\n          </div>\r\n        )}\r\n\r\n        {errorMessage && (\r\n          <div\r\n            id={errorId}\r\n            className={classMap.errorMessage}\r\n            data-testid={testId ? `${testId}-error` : undefined}\r\n          >\r\n            {errorMessage}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nCheckboxBase.displayName = \"CheckboxBase\";\r\nexport default CheckboxBase;\r\n","import { forwardRef } from \"react\";\r\nimport CheckboxBase from \"../CheckboxBase\";\r\nimport \"./CheckBox.scss\";\r\nimport { CheckBoxProps } from \"../Checkbox.types\";\r\n\r\nconst classes = {\r\n  checkbox: \"checkbox\",\r\n\r\n  primary: \"checkbox_primary\",\r\n  secondary: \"checkbox_secondary\",\r\n  tertiary: \"checkbox_tertiary\",\r\n  quaternary: \"checkbox_quaternary\",\r\n\r\n  success: \"checkbox_success\",\r\n  error: \"checkbox_error\",\r\n  warning: \"checkbox_warning\",\r\n\r\n  clear: \"checkbox_clear\",\r\n\r\n  disabled: \"checkbox_disabled\",\r\n  indeterminate: \"checkbox_indeterminate\",\r\n\r\n  left: \"checkbox_left\",\r\n  right: \"checkbox_right\",\r\n\r\n  xs: \"checkbox_xs\",\r\n  small: \"checkbox_small\",\r\n  medium: \"checkbox_medium\",\r\n  large: \"checkbox_large\",\r\n  xl: \"checkbox_xl\",\r\n\r\n  shadowNone: \"checkbox_shadow-None\",\r\n  shadowLight: \"checkbox_shadow-Light\",\r\n  shadowMedium: \"checkbox_shadow-Medium\",\r\n  shadowStrong: \"checkbox_shadow-Strong\",\r\n  shadowIntense: \"checkbox_shadow-Intense\",\r\n\r\n  roundNone: \"checkbox_round-None\",\r\n  roundSmall: \"checkbox_round-Small\",\r\n  roundMedium: \"checkbox_round-Medium\",\r\n  roundLarge: \"checkbox_round-Large\",\r\n\r\n  labelWrapper: \"checkbox_label-wrapper\",\r\n  label: \"checkbox_label\",\r\n  input: \"checkbox_input\",\r\n  box: \"checkbox_box\",\r\n};\r\n\r\nconst Checkbox = forwardRef<HTMLInputElement, CheckBoxProps>((props, ref) => (\r\n  <CheckboxBase {...props} classMap={classes} ref={ref} />\r\n));\r\nCheckbox.displayName = \"Checkbox\";\r\nexport default Checkbox;\r\n"],"names":[],"mappings":"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"}