@salt-ds/core 1.46.1 → 1.47.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @salt-ds/core
 
+## 1.47.0
+
+### Minor Changes
+
+- b99afaa: - Updated Pagination styles to include a border on the selected state.
+  - Updated Pagination to use default text styles instead of action text.
+  - Fixed hover styles overriding selected styles on Pagination.
+
+### Patch Changes
+
+- edcd33d: Fixed clicking on `FormField` labels' not focusing/interacting with the associated form control.
+- a3a0608: Fixed the alignment of the status indicator inside FormField's helper text.
+- 0c140c0: Fixed `Checkbox`'s checked color styles applying when `Checkbox` is indeterminate.
+- Updated dependencies [dd3e21d]
+  - @salt-ds/icons@1.14.0
+
 ## 1.46.1
 
 ### Patch Changes

package/css/salt-core.css

@@ -930,15 +930,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
   clip-path: border-box;
   box-sizing: border-box;
 }
+.saltCheckboxIcon-checked,
+.saltCheckbox:hover .saltCheckboxIcon-checked {
+  border-color: var(--salt-selectable-borderColor-selected);
+  color: var(--salt-selectable-foreground-selected);
+}
 .saltCheckbox:hover .saltCheckboxIcon,
 .saltCheckbox:hover .saltCheckboxIcon-indeterminate {
   border-color: var(--salt-selectable-borderColor-hover);
   color: var(--salt-selectable-foreground-hover);
 }
-.saltCheckboxIcon-checked,
-.saltCheckbox:hover .saltCheckboxIcon-checked {
-  border-color: var(--salt-selectable-borderColor-selected);
-  color: var(--salt-selectable-foreground-selected);
+.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {
+  border-color: var(--salt-selectable-borderColor);
+  color: var(--salt-selectable-foreground);
 }
 .saltCheckboxIcon-disabled,
 .saltCheckbox:hover .saltCheckboxIcon-disabled,
@@ -1638,6 +1642,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltFormFieldHelperText-withValidation {
   column-gap: var(--salt-spacing-75);
 }
+.saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator {
+  margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);
+}
 
 /* src/form-field/FormFieldLabel.css */
 .saltFormFieldLabel.saltText {
@@ -2866,9 +2873,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   padding: 0 var(--salt-spacing-100);
   border: none;
   font-size: var(--salt-text-fontSize);
-  font-family: var(--salt-text-action-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-lineHeight);
-  letter-spacing: var(--salt-text-action-letterSpacing);
+  letter-spacing: var(--salt-text-letterSpacing);
   cursor: var(--salt-selectable-cursor-hover);
   border-radius: var(--salt-palette-corner-weak, 0);
 }
@@ -2876,8 +2883,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPageButton:focus-visible {
   background: var(--salt-selectable-background-hover);
 }
-.saltPageButton:active,
-.saltPageButton-active {
+.saltPageButton:active {
   background: var(--salt-selectable-background-selected);
 }
 .saltPageButton:focus-visible {
@@ -2888,10 +2894,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-selectable-background);
   cursor: var(--salt-editable-cursor-readonly);
 }
-.saltPageButton-selected {
-  background: var(--salt-selectable-background-selected);
-}
-.saltPageButton-selected:focus-visible {
+.saltPageButton[aria-current=page] {
+  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
   background: var(--salt-selectable-background-selected);
 }
 .saltPageButton-fixed {
@@ -5250,4 +5254,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/167fea67-c86d-4a33-b30f-8f43a23012e1.css */
+/* src/54777b0d-1abe-491d-990e-59e0c5f969c0.css */

package/dist-cjs/checkbox/CheckboxIcon.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-cjs/form-field/FormField.js

@@ -9,6 +9,7 @@ var FormFieldContext = require('../form-field-context/FormFieldContext.js');
 var capitalize = require('../utils/capitalize.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
+var useForkRef = require('../utils/useForkRef.js');
 var useId = require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
@@ -33,13 +34,15 @@ const FormField = React.forwardRef(
       css: FormField$1,
       window: targetWindow
     });
+    const formFieldRef = React.useRef(null);
+    const handleRef = useForkRef.useForkRef(ref, formFieldRef);
     const formId = useId.useId(idProp);
     const labelId = formId ? `label-${formId}` : void 0;
     const helperTextId = formId ? `helperText-${formId}` : void 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        ref,
+        ref: handleRef,
         className: clsx.clsx(
           withBaseName(),
           {
@@ -60,7 +63,8 @@ const FormField = React.forwardRef(
               disabled,
               necessity,
               readOnly,
-              validationStatus
+              validationStatus,
+              formFieldRef
             },
             children
           }

package/dist-cjs/form-field/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { type A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,YAAM,MAAM,CAAA;AAE3B,IAAA,MAAM,OAAU,GAAA,MAAA,GAAS,CAAS,MAAA,EAAA,MAAM,CAAK,CAAA,GAAA,MAAA;AAC7C,IAAA,MAAM,YAAe,GAAA,MAAA,GAAS,CAAc,WAAA,EAAA,MAAM,CAAK,CAAA,GAAA,MAAA;AAEvD,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,aAAa,CAAQ,KAAA,EAAAC,qBAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA;AAAA,UAACG,iCAAiB,CAAA,QAAA;AAAA,UAAjB;AAAA,YACC,KAAO,EAAA;AAAA,cACL,SAAW,EAAA;AAAA,gBACT,iBAAmB,EAAA,OAAA;AAAA,gBACnB,kBAAoB,EAAA;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useRef } from \"react\";\nimport { type A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formFieldRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, formFieldRef);\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n            formFieldRef,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useRef","useForkRef","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,YAAA,GAAeC,aAAuB,IAAI,CAAA;AAChD,IAAM,MAAA,SAAA,GAAYC,qBAAW,CAAA,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAM,MAAA,MAAA,GAASC,YAAM,MAAM,CAAA;AAE3B,IAAA,MAAM,OAAU,GAAA,MAAA,GAAS,CAAS,MAAA,EAAA,MAAM,CAAK,CAAA,GAAA,MAAA;AAC7C,IAAA,MAAM,YAAe,GAAA,MAAA,GAAS,CAAc,WAAA,EAAA,MAAM,CAAK,CAAA,GAAA,MAAA;AAEvD,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,SAAA;AAAA,QACL,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,aAAa,CAAQ,KAAA,EAAAC,qBAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA;AAAA,UAACG,iCAAiB,CAAA,QAAA;AAAA,UAAjB;AAAA,YACC,KAAO,EAAA;AAAA,cACL,SAAW,EAAA;AAAA,gBACT,iBAAmB,EAAA,OAAA;AAAA,gBACnB,kBAAoB,EAAA;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-cjs/form-field/FormFieldHelperText.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormFieldHelperText {\n  cursor: default;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n  column-gap: var(--salt-spacing-75);\n}\n";
+var css_248z = ".saltFormFieldHelperText {\n  cursor: default;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n  column-gap: var(--salt-spacing-75);\n}\n\n.saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator {\n  margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormFieldHelperText.css.js.map

package/dist-cjs/form-field/FormFieldHelperText.js

@@ -44,7 +44,13 @@ const FormFieldHelperText = ({
         className
       ),
       children: [
-        !disabled && !readOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, { status: validationStatus }),
+        !disabled && !readOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(
+          StatusIndicator.StatusIndicator,
+          {
+            className: withBaseName("statusIndicator"),
+            status: validationStatus
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Text.Text,
           {

package/dist-cjs/form-field/FormFieldHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {}\n\nexport const FormFieldHelperText = ({\n  className,\n  children,\n  ...restProps\n}: FormFieldHelperTextProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-helper-text\",\n    css: formFieldHelperTextCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps, disabled, readOnly, validationStatus } =\n    useFormFieldProps();\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withValidation\")]: validationStatus },\n        className,\n      )}\n    >\n      {!disabled && !readOnly && validationStatus && (\n        <StatusIndicator status={validationStatus} />\n      )}\n      <Text\n        disabled={disabled}\n        id={a11yProps?.[\"aria-describedby\"]}\n        styleAs=\"label\"\n        color={validationStatus ?? \"secondary\"}\n        {...restProps}\n      >\n        {children}\n      </Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","formFieldHelperTextCss","useFormFieldProps","jsxs","jsx","StatusIndicator","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA;AAKpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,qBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,QAAU,EAAA,gBAAA,KACrCC,mCAAkB,EAAA;AAEpB,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,gBAAiB,EAAA;AAAA,QACrD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,CAAC,YAAY,CAAC,QAAA,IAAY,oCACxBC,cAAA,CAAAC,+BAAA,EAAA,EAAgB,QAAQ,gBAAkB,EAAA,CAAA;AAAA,wBAE7CD,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,IAAI,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,OAAQ,EAAA,OAAA;AAAA,YACR,OAAO,gBAAoB,IAAA,WAAA;AAAA,YAC1B,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {}\n\nexport const FormFieldHelperText = ({\n  className,\n  children,\n  ...restProps\n}: FormFieldHelperTextProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-helper-text\",\n    css: formFieldHelperTextCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps, disabled, readOnly, validationStatus } =\n    useFormFieldProps();\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withValidation\")]: validationStatus },\n        className,\n      )}\n    >\n      {!disabled && !readOnly && validationStatus && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={validationStatus}\n        />\n      )}\n      <Text\n        disabled={disabled}\n        id={a11yProps?.[\"aria-describedby\"]}\n        styleAs=\"label\"\n        color={validationStatus ?? \"secondary\"}\n        {...restProps}\n      >\n        {children}\n      </Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","formFieldHelperTextCss","useFormFieldProps","jsxs","jsx","StatusIndicator","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA;AAKpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,qBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,QAAU,EAAA,gBAAA,KACrCC,mCAAkB,EAAA;AAEpB,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,gBAAiB,EAAA;AAAA,QACrD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAC,CAAA,QAAA,IAAY,CAAC,QAAA,IAAY,gBACzB,oBAAAC,cAAA;AAAA,UAACC,+BAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC,MAAQ,EAAA;AAAA;AAAA,SACV;AAAA,wBAEFD,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,IAAI,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,OAAQ,EAAA,OAAA;AAAA,YACR,OAAO,gBAAoB,IAAA,WAAA;AAAA,YAC1B,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist-cjs/form-field/FormFieldLabel.js

@@ -27,24 +27,36 @@ const FormFieldLabel = ({
   className,
   children,
   intent = "label",
+  onClick,
   ...restProps
 }) => {
-  const { a11yProps, disabled, necessity } = useFormFieldProps.useFormFieldProps();
+  const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps.useFormFieldProps();
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-form-field-label",
     css: FormFieldLabel$1,
     window: targetWindow
   });
+  const id = a11yProps == null ? void 0 : a11yProps["aria-labelledby"];
+  const handleClick = (event) => {
+    if (formFieldRef == null ? void 0 : formFieldRef.current) {
+      const element = formFieldRef.current.querySelector(
+        `[aria-labelledby*="${id}"]`
+      );
+      element == null ? void 0 : element.focus();
+      element == null ? void 0 : element.click();
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
   const necessityLabel = necessity ? necessity === "asterisk" ? " *" : ` (${capitalize.capitalize(necessity)})` : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Label.Label,
     {
-      as: "label",
       className: clsx.clsx(withBaseName(), withBaseName(intent), className),
-      id: a11yProps == null ? void 0 : a11yProps["aria-labelledby"],
+      id,
       disabled,
       variant: "secondary",
+      onClick: handleClick,
       ...restProps,
       children: [
         children,

package/dist-cjs/form-field/FormFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,GAAG;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAcC,mCAAkB,EAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAAC,qBAAA,CAAW,SAAS,CAAC,CAC5B,CAAA,CAAA,GAAA,MAAA;AAEJ,EACE,uBAAAC,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,OAAA;AAAA,MACH,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,MAChB,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,kCACEC,cAAA,CAAA,MAAA,EAAA,EAAK,WAAW,YAAa,CAAA,gBAAgB,GAAI,QAAe,EAAA,cAAA,EAAA;AAAA;AAAA;AAAA,GAErE;AAEJ;;;;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { MouseEvent } from \"react\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  onClick,\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const id = a11yProps?.[\"aria-labelledby\"];\n\n  const handleClick = (event: MouseEvent<HTMLLabelElement>) => {\n    if (formFieldRef?.current) {\n      const element = formFieldRef.current.querySelector<HTMLElement>(\n        `[aria-labelledby*=\"${id}\"]`,\n      );\n      element?.focus();\n      element?.click();\n    }\n    onClick?.(event);\n  };\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={id}\n      disabled={disabled}\n      variant=\"secondary\"\n      onClick={handleClick}\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,OAAA;AAAA,EACA,GAAG;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAW,EAAA,YAAA,KAAiBC,mCAAkB,EAAA;AAC3E,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,KAAK,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAEvB,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAC3D,IAAA,IAAI,6CAAc,OAAS,EAAA;AACzB,MAAM,MAAA,OAAA,GAAU,aAAa,OAAQ,CAAA,aAAA;AAAA,QACnC,sBAAsB,EAAE,CAAA,EAAA;AAAA,OAC1B;AACA,MAAS,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,EAAA;AACT,MAAS,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,EAAA;AAAA;AAEX,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAAC,qBAAA,CAAW,SAAS,CAAC,CAC5B,CAAA,CAAA,GAAA,MAAA;AAEJ,EACE,uBAAAC,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACR,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,kCACEC,cAAA,CAAA,MAAA,EAAA,EAAK,WAAW,YAAa,CAAA,gBAAgB,GAAI,QAAe,EAAA,cAAA,EAAA;AAAA;AAAA;AAAA,GAErE;AAEJ;;;;"}

package/dist-cjs/form-field-context/FormFieldContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n  /**\n   * id for FormFieldHelperText\n   */\n  helperTextId?: string;\n  /**\n   * id for FormFieldLabel\n   */\n  labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n  a11yProps: a11yValueAriaProps;\n  disabled: boolean;\n  necessity: NecessityType | undefined;\n  readOnly: boolean;\n  validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextValue,\n);\n"],"names":["createContext"],"mappings":";;;;;;;;;;;AA4BO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AACF;;;;"}
+{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n  /**\n   * id for FormFieldHelperText\n   */\n  helperTextId?: string;\n  /**\n   * id for FormFieldLabel\n   */\n  labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n  a11yProps: a11yValueAriaProps;\n  disabled: boolean;\n  necessity: NecessityType | undefined;\n  readOnly: boolean;\n  validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n  formFieldRef?: RefObject<HTMLDivElement>;\n}\n\nexport const FormFieldContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextValue,\n);\n"],"names":["createContext"],"mappings":";;;;;;;;;;;AA8BO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AACF;;;;"}

package/dist-cjs/pagination/PageButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltPageButton {\n  min-width: var(--salt-size-base);\n  font-weight: var(--salt-text-fontWeight);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  appearance: none;\n  box-sizing: border-box;\n  padding: 0 var(--salt-spacing-100);\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-action-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  cursor: var(--salt-selectable-cursor-hover);\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:active,\n.saltPageButton-active {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltPageButton:disabled {\n  color: var(--salt-content-secondary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n  background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  padding: 0;\n}\n";
+var css_248z = ".saltPageButton {\n  min-width: var(--salt-size-base);\n  font-weight: var(--salt-text-fontWeight);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  appearance: none;\n  box-sizing: border-box;\n  padding: 0 var(--salt-spacing-100);\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  cursor: var(--salt-selectable-cursor-hover);\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:active {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltPageButton:disabled {\n  color: var(--salt-content-secondary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton[aria-current=\"page\"] {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  padding: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=PageButton.css.js.map

package/dist-es/checkbox/CheckboxIcon.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-es/form-field/FormField.js

@@ -2,11 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { FormFieldContext } from '../form-field-context/FormFieldContext.js';
 import { capitalize } from '../utils/capitalize.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
 import { useId } from '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
@@ -31,13 +32,15 @@ const FormField = forwardRef(
       css: css_248z,
       window: targetWindow
     });
+    const formFieldRef = useRef(null);
+    const handleRef = useForkRef(ref, formFieldRef);
     const formId = useId(idProp);
     const labelId = formId ? `label-${formId}` : void 0;
     const helperTextId = formId ? `helperText-${formId}` : void 0;
     return /* @__PURE__ */ jsx(
       "div",
       {
-        ref,
+        ref: handleRef,
         className: clsx(
           withBaseName(),
           {
@@ -58,7 +61,8 @@ const FormField = forwardRef(
               disabled,
               necessity,
               readOnly,
-              validationStatus
+              validationStatus,
+              formFieldRef
             },
             children
           }

package/dist-es/form-field/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { type A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["formFieldCss"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,MAAM,MAAM,CAAA;AAE3B,IAAA,MAAM,OAAU,GAAA,MAAA,GAAS,CAAS,MAAA,EAAA,MAAM,CAAK,CAAA,GAAA,MAAA;AAC7C,IAAA,MAAM,YAAe,GAAA,MAAA,GAAS,CAAc,WAAA,EAAA,MAAM,CAAK,CAAA,GAAA,MAAA;AAEvD,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,aAAa,CAAQ,KAAA,EAAA,UAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAiB,CAAA,QAAA;AAAA,UAAjB;AAAA,YACC,KAAO,EAAA;AAAA,cACL,SAAW,EAAA;AAAA,gBACT,iBAAmB,EAAA,OAAA;AAAA,gBACnB,kBAAoB,EAAA;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useRef } from \"react\";\nimport { type A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formFieldRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, formFieldRef);\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n            formFieldRef,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["formFieldCss"],"mappings":";;;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAM,MAAA,MAAA,GAAS,MAAM,MAAM,CAAA;AAE3B,IAAA,MAAM,OAAU,GAAA,MAAA,GAAS,CAAS,MAAA,EAAA,MAAM,CAAK,CAAA,GAAA,MAAA;AAC7C,IAAA,MAAM,YAAe,GAAA,MAAA,GAAS,CAAc,WAAA,EAAA,MAAM,CAAK,CAAA,GAAA,MAAA;AAEvD,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,SAAA;AAAA,QACL,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,aAAa,CAAQ,KAAA,EAAA,UAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAiB,CAAA,QAAA;AAAA,UAAjB;AAAA,YACC,KAAO,EAAA;AAAA,cACL,SAAW,EAAA;AAAA,gBACT,iBAAmB,EAAA,OAAA;AAAA,gBACnB,kBAAoB,EAAA;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-es/form-field/FormFieldHelperText.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltFormFieldHelperText {\n  cursor: default;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n  column-gap: var(--salt-spacing-75);\n}\n";
+var css_248z = ".saltFormFieldHelperText {\n  cursor: default;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n  column-gap: var(--salt-spacing-75);\n}\n\n.saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator {\n  margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormFieldHelperText.css.js.map

package/dist-es/form-field/FormFieldHelperText.js

@@ -42,7 +42,13 @@ const FormFieldHelperText = ({
         className
       ),
       children: [
-        !disabled && !readOnly && validationStatus && /* @__PURE__ */ jsx(StatusIndicator, { status: validationStatus }),
+        !disabled && !readOnly && validationStatus && /* @__PURE__ */ jsx(
+          StatusIndicator,
+          {
+            className: withBaseName("statusIndicator"),
+            status: validationStatus
+          }
+        ),
         /* @__PURE__ */ jsx(
           Text,
           {

package/dist-es/form-field/FormFieldHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {}\n\nexport const FormFieldHelperText = ({\n  className,\n  children,\n  ...restProps\n}: FormFieldHelperTextProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-helper-text\",\n    css: formFieldHelperTextCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps, disabled, readOnly, validationStatus } =\n    useFormFieldProps();\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withValidation\")]: validationStatus },\n        className,\n      )}\n    >\n      {!disabled && !readOnly && validationStatus && (\n        <StatusIndicator status={validationStatus} />\n      )}\n      <Text\n        disabled={disabled}\n        id={a11yProps?.[\"aria-describedby\"]}\n        styleAs=\"label\"\n        color={validationStatus ?? \"secondary\"}\n        {...restProps}\n      >\n        {children}\n      </Text>\n    </div>\n  );\n};\n"],"names":["formFieldHelperTextCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAKpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,QAAU,EAAA,gBAAA,KACrC,iBAAkB,EAAA;AAEpB,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,gBAAiB,EAAA;AAAA,QACrD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,CAAC,YAAY,CAAC,QAAA,IAAY,oCACxB,GAAA,CAAA,eAAA,EAAA,EAAgB,QAAQ,gBAAkB,EAAA,CAAA;AAAA,wBAE7C,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,IAAI,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,OAAQ,EAAA,OAAA;AAAA,YACR,OAAO,gBAAoB,IAAA,WAAA;AAAA,YAC1B,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {}\n\nexport const FormFieldHelperText = ({\n  className,\n  children,\n  ...restProps\n}: FormFieldHelperTextProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-helper-text\",\n    css: formFieldHelperTextCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps, disabled, readOnly, validationStatus } =\n    useFormFieldProps();\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withValidation\")]: validationStatus },\n        className,\n      )}\n    >\n      {!disabled && !readOnly && validationStatus && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={validationStatus}\n        />\n      )}\n      <Text\n        disabled={disabled}\n        id={a11yProps?.[\"aria-describedby\"]}\n        styleAs=\"label\"\n        color={validationStatus ?? \"secondary\"}\n        {...restProps}\n      >\n        {children}\n      </Text>\n    </div>\n  );\n};\n"],"names":["formFieldHelperTextCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAKpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,QAAU,EAAA,gBAAA,KACrC,iBAAkB,EAAA;AAEpB,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,gBAAiB,EAAA;AAAA,QACrD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAC,CAAA,QAAA,IAAY,CAAC,QAAA,IAAY,gBACzB,oBAAA,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC,MAAQ,EAAA;AAAA;AAAA,SACV;AAAA,wBAEF,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,IAAI,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,OAAQ,EAAA,OAAA;AAAA,YACR,OAAO,gBAAoB,IAAA,WAAA;AAAA,YAC1B,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist-es/form-field/FormFieldLabel.js

@@ -25,24 +25,36 @@ const FormFieldLabel = ({
   className,
   children,
   intent = "label",
+  onClick,
   ...restProps
 }) => {
-  const { a11yProps, disabled, necessity } = useFormFieldProps();
+  const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps();
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-form-field-label",
     css: css_248z,
     window: targetWindow
   });
+  const id = a11yProps == null ? void 0 : a11yProps["aria-labelledby"];
+  const handleClick = (event) => {
+    if (formFieldRef == null ? void 0 : formFieldRef.current) {
+      const element = formFieldRef.current.querySelector(
+        `[aria-labelledby*="${id}"]`
+      );
+      element == null ? void 0 : element.focus();
+      element == null ? void 0 : element.click();
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
   const necessityLabel = necessity ? necessity === "asterisk" ? " *" : ` (${capitalize(necessity)})` : void 0;
   return /* @__PURE__ */ jsxs(
     Label,
     {
-      as: "label",
       className: clsx(withBaseName(), withBaseName(intent), className),
-      id: a11yProps == null ? void 0 : a11yProps["aria-labelledby"],
+      id,
       disabled,
       variant: "secondary",
+      onClick: handleClick,
       ...restProps,
       children: [
         children,

package/dist-es/form-field/FormFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["formFieldLabelCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,GAAG;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAc,iBAAkB,EAAA;AAC7D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAA,UAAA,CAAW,SAAS,CAAC,CAC5B,CAAA,CAAA,GAAA,MAAA;AAEJ,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,OAAA;AAAA,MACH,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,MAChB,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,kCACE,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,YAAa,CAAA,gBAAgB,GAAI,QAAe,EAAA,cAAA,EAAA;AAAA;AAAA;AAAA,GAErE;AAEJ;;;;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { MouseEvent } from \"react\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  onClick,\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const id = a11yProps?.[\"aria-labelledby\"];\n\n  const handleClick = (event: MouseEvent<HTMLLabelElement>) => {\n    if (formFieldRef?.current) {\n      const element = formFieldRef.current.querySelector<HTMLElement>(\n        `[aria-labelledby*=\"${id}\"]`,\n      );\n      element?.focus();\n      element?.click();\n    }\n    onClick?.(event);\n  };\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={id}\n      disabled={disabled}\n      variant=\"secondary\"\n      onClick={handleClick}\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["formFieldLabelCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,OAAA;AAAA,EACA,GAAG;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAW,EAAA,YAAA,KAAiB,iBAAkB,EAAA;AAC3E,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,KAAK,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAEvB,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAC3D,IAAA,IAAI,6CAAc,OAAS,EAAA;AACzB,MAAM,MAAA,OAAA,GAAU,aAAa,OAAQ,CAAA,aAAA;AAAA,QACnC,sBAAsB,EAAE,CAAA,EAAA;AAAA,OAC1B;AACA,MAAS,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,EAAA;AACT,MAAS,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,EAAA;AAAA;AAEX,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAA,UAAA,CAAW,SAAS,CAAC,CAC5B,CAAA,CAAA,GAAA,MAAA;AAEJ,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACR,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,kCACE,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,YAAa,CAAA,gBAAgB,GAAI,QAAe,EAAA,cAAA,EAAA;AAAA;AAAA;AAAA,GAErE;AAEJ;;;;"}

package/dist-es/form-field-context/FormFieldContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n  /**\n   * id for FormFieldHelperText\n   */\n  helperTextId?: string;\n  /**\n   * id for FormFieldLabel\n   */\n  labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n  a11yProps: a11yValueAriaProps;\n  disabled: boolean;\n  necessity: NecessityType | undefined;\n  readOnly: boolean;\n  validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextValue,\n);\n"],"names":[],"mappings":";;;;;;;;;AA4BO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AACF;;;;"}
+{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n  /**\n   * id for FormFieldHelperText\n   */\n  helperTextId?: string;\n  /**\n   * id for FormFieldLabel\n   */\n  labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n  a11yProps: a11yValueAriaProps;\n  disabled: boolean;\n  necessity: NecessityType | undefined;\n  readOnly: boolean;\n  validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n  formFieldRef?: RefObject<HTMLDivElement>;\n}\n\nexport const FormFieldContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextValue,\n);\n"],"names":[],"mappings":";;;;;;;;;AA8BO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AACF;;;;"}

package/dist-es/pagination/PageButton.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltPageButton {\n  min-width: var(--salt-size-base);\n  font-weight: var(--salt-text-fontWeight);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  appearance: none;\n  box-sizing: border-box;\n  padding: 0 var(--salt-spacing-100);\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-action-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  cursor: var(--salt-selectable-cursor-hover);\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:active,\n.saltPageButton-active {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltPageButton:disabled {\n  color: var(--salt-content-secondary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n  background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  padding: 0;\n}\n";
+var css_248z = ".saltPageButton {\n  min-width: var(--salt-size-base);\n  font-weight: var(--salt-text-fontWeight);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  appearance: none;\n  box-sizing: border-box;\n  padding: 0 var(--salt-spacing-100);\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  cursor: var(--salt-selectable-cursor-hover);\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:active {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltPageButton:disabled {\n  color: var(--salt-content-secondary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton[aria-current=\"page\"] {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  padding: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=PageButton.css.js.map

package/dist-types/form-field/FormFieldLabel.d.ts

@@ -8,4 +8,4 @@ export interface FormFieldLabelProps extends Omit<TextProps<"label">, "variant"
      */
     intent?: "label" | "sentence";
 }
-export declare const FormFieldLabel: ({ className, children, intent, ...restProps }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormFieldLabel: ({ className, children, intent, onClick, ...restProps }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist-types/form-field-context/FormFieldContext.d.ts

@@ -1,3 +1,4 @@
+import type { RefObject } from "react";
 export interface A11yValueProps {
     /**
      * id for FormFieldHelperText
@@ -19,5 +20,6 @@ export interface FormFieldContextValue {
     necessity: NecessityType | undefined;
     readOnly: boolean;
     validationStatus: "error" | "warning" | "success" | undefined;
+    formFieldRef?: RefObject<HTMLDivElement>;
 }
 export declare const FormFieldContext: import("react").Context<FormFieldContextValue>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.46.1",
+  "version": "1.47.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
-    "@salt-ds/icons": "^1.13.2",
+    "@salt-ds/icons": "^1.14.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
     "clsx": "^2.0.0"