npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.2 → 1.0.0-alpha.4 - Mend

@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/dist-es/packages/lab/src/radio-button/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n forwardRef,\n HTMLAttributes,\n ~~ComponentType~~,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ~~ControlLabel,~~ ~~ControlLabelProps~~ } from \"~~../control-label\";\nimport { RadioButtonBase as Radio } from \"~~./~~RadioButtonBase~~\";\nimport { ~~RadioButtonIconProps~~ } from \"./RadioButtonIcon\";\n\nimport \"./RadioButton.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<HTMLAttributes<~~HTMLDivElement>,~~ \"onChange\"> {\n checked?: boolean;\n ~~className~~?: ~~string~~;\n ~~disabled~~?: boolean;\n /*\n ~~Custom~~ ~~icon~~ ~~component~~\n /\n ~~icon~~?: ~~ComponentType~~<~~RadioButtonIconProps>;\~~n /\n The label to be shown next to the radio\n */\n label?: ~~ControlLabelProps[\"label\"]~~;\n ~~LabelProps?:~~ ~~Partial<ControlLabelProps>;\~~n name?: string;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n value?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked,\n className,\n ~~icon~~,\n ~~disabled~~,\n label,\n ~~LabelProps~~,\n ~~value~~,\n onChange,\n ...rest\n } = props;\n\n ~~return~~ (\n ~~<div~~\n ~~className~~={~~clsx(~~\n ~~withBaseName~~(),\n {\n ~~[withBaseName(~~\"~~disabled~~\")]: ~~disabled,\~~n ~~},\~~n ~~className~~\n )}\n ~~{...rest}~~\n ~~>\n~~ <~~ControlLabel~~\n ~~{...LabelProps}\n~~ className={clsx(\n withBaseName(~~\"labelContainer\"~~),\n {\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n ~~disabled~~={~~disabled~~}\n ~~label=~~{~~label~~}\n ~~labelPlacement=\~~"~~right~~\"\n ~~ref=~~{~~ref~~}\n ~~>\n~~ ~~<Radio\n~~ checked={checked}\n disabled={disabled}\n value={value}\n onChange={~~onChange~~}\n ~~icon~~={~~icon~~}\n />\n ~~</ControlLabel>\~~n </~~div~~>\n );\n }\n);\n"],"names":["RadioButton"~~,"Radio"~~],"mappings":";;;;;;;;~~AAcA~~,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;~~AAqB5C~~,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,~~OAAA~~;AAAA,~~MACA~~,SAAA;AAAA,MACA,~~IAAA~~;AAAA,MACA,~~QAAA~~;AAAA,MACA,KAAA;AAAA,MACA,~~UAAA~~;AAAA,MACA,~~KAAA~~;AAAA,MACA,QAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,~~uBACG~~,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,~~QAAC~~,~~kBAAA~~,GAAA,CAAA,~~YAAA~~,EAAA;AAAA,~~QACE~~,~~GAAG~~,~~UAAA;AAAA~~,~~QACJ~~,~~SAAW~~,~~EAAA,IAAA~~;AAAA,~~UACT~~,~~aAAa~~,~~gBAAgB,CAAA~~;AAAA,~~UAC7B~~;AAAA,~~YACE~~,~~CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,~~QAAA;AAAA,~~WAC9B~~;AAAA,UACA,~~SAAA~~;AAAA,~~SACF~~;AAAA,~~QACA~~,~~QAAA~~;AAAA,~~QACA~~,~~KAAA~~;AAAA,~~QACA~~,~~cAAe~~,EAAA,OAAA;AAAA,~~QACf~~,~~GAAA~~;AAAA,~~QAEA~~,~~QAAC,kBAAA,~~GAAA,~~CAAAC~~,eAAA,EAAA;AAAA,~~UACC~~,OAAA;AAAA,~~UACA~~,~~QAAA;AAAA,UACA,~~KAAA;AAAA,~~UACA~~,QAAA;AAAA,~~UACA~~,~~IAAA~~;AAAA,~~SACF~~,~~CAAA~~;AAAA,~~OACF,CAAA~~;AAAA,~~KACF~~,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport \"./RadioButton.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n HTMLAttributes<HTMLLabelElement>,\n \"onChange\" \| \"onBlur\" \| \"onFocus\"\n > {\n /*\n Set the default selected radio button in the group\n /\n checked?: boolean;\n /\n Set the disabled state\n /\n disabled?: boolean;\n /\n Set the error state\n /\n error?: boolean;\n /\n Props to be passed to the radio input\n /\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /\n The label to be shown next to the radio icon\n /\n label?: ReactNode;\n /\n Name of the radio group\n /\n name?: string;\n /\n Callback for blur event\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Callback for change event\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Callback for focus event\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Value of radio button\n */\n value?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled,\n error,\n inputProps,\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n value,\n ...rest\n } = props;\n\n const radioGroup = useRadioGroup();\n\n const radioGroupChecked =\n radioGroup.value != null && value != null\n ? radioGroup.value === value\n : checkedProp;\n const name = nameProp ?? radioGroup.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n radioGroup.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n className={withBaseName(\"input\")}\n {...inputProps}\n checked={checked}\n disabled={disabled}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n />\n <RadioButtonIcon checked={checked} error={error} disabled={disabled} />\n {label}\n </label>\n );\n }\n);\n"],"names":["RadioButton"],"mappings":";;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAiD5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AAEjC,IAAM,MAAA,iBAAA,GACJ,WAAW,KAAS,IAAA,IAAA,IAAQ,SAAS,IACjC,GAAA,UAAA,CAAW,UAAU,KACrB,GAAA,WAAA,CAAA;AACN,IAAM,MAAA,IAAA,GAAO,8BAAY,UAAW,CAAA,IAAA,CAAA;AAEpC,IAAA,MAAM,CAAC,OAAA,EAAS,eAAe,CAAA,GAAI,aAAc,CAAA;AAAA,MAC/C,UAAY,EAAA,iBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,SAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAhG1E,MAAA,IAAA,EAAA,CAAA;AAiGM,MAAM,MAAA,UAAA,GAAa,MAAM,MAAO,CAAA,OAAA,CAAA;AAChC,MAAA,eAAA,CAAgB,UAAU,CAAA,CAAA;AAE1B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,MAAA,CAAA,EAAA,GAAA,UAAA,CAAW,aAAX,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC9B,GAAG,UAAA;AAAA,UACJ,OAAA;AAAA,UACA,QAAA;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,OAAA;AAAA,UACA,IAAK,EAAA,OAAA;AAAA,SACP,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,OAAA;AAAA,UAAkB,KAAA;AAAA,UAAc,QAAA;AAAA,SAAoB,CAAA;AAAA,QACpE,KAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/radio-button/RadioButtonGroup.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = "/* Styles applied to root component (RadioButton) */\n.salt-density-high {\n  --radioButton-group-vertical-label-marginBottom: 4px;\n  --radioButton-group-legend-minHeight: 14px;\n  --radioButton-group-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginTop: 2px;\n  --radioButton-group-horizontal-legend-marginRight: 12px;\n  --radioButton-group-horizontal-legend-paddingRight: 4px;\n  --radioButton-group-horizontal-legend-marginBottom: 0px;\n  --radioButton-group-vertical-formLabel-paddingRight: 4px;\n  --radioButton-group-vertical-formLabel-marginBottom: 4px;\n  --radioButton-group-vertical-formLabel-transform: translate(0px, 3px);\n  --radioButton-group-formLabel-transform: translate(0px, 3px);\n}\n\n.salt-density-medium {\n  --radioButton-group-vertical-label-marginBottom: 6px;\n  --radioButton-group-legend-minHeight: 14px;\n  --radioButton-group-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginTop: 1px;\n  --radioButton-group-horizontal-legend-marginRight: 24px;\n  --radioButton-group-horizontal-legend-paddingRight: 8px;\n  --radioButton-group-horizontal-legend-marginBottom: 0px;\n  --radioButton-group-vertical-formLabel-paddingRight: 8px;\n  --radioButton-group-vertical-formLabel-marginBottom: 6px;\n  --radioButton-group-vertical-formLabel-transform: translate(0px, 5px);\n  --radioButton-group-formLabel-transform: translate(0px, 5px);\n}\n\n.salt-density-low {\n  --radioButton-group-vertical-label-marginBottom: 9px;\n  --radioButton-group-legend-minHeight: 14px;\n  --radioButton-group-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginTop: 4px;\n  --radioButton-group-horizontal-legend-marginRight: 36px;\n  --radioButton-group-horizontal-legend-paddingRight: 12px;\n  --radioButton-group-horizontal-legend-marginBottom: 0px;\n  --radioButton-group-vertical-formLabel-paddingRight: 12px;\n  --radioButton-group-vertical-formLabel-marginBottom: 9px;\n  --radioButton-group-vertical-formLabel-transform: translate(0px, 7px);\n  --radioButton-group-formLabel-transform: translate(0px, 7px);\n}\n\n.salt-density-touch {\n  --radioButton-group-vertical-label-marginBottom: 12px;\n  --radioButton-group-legend-minHeight: 16px;\n  --radioButton-group-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginTop: 4px;\n  --radioButton-group-horizontal-legend-marginRight: 48px;\n  --radioButton-group-horizontal-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginBottom: 0px;\n  --radioButton-group-vertical-formLabel-paddingRight: 16px;\n  --radioButton-group-vertical-formLabel-marginBottom: 12px;\n  --radioButton-group-vertical-formLabel-transform: translate(0px, 11px);\n  --radioButton-group-formLabel-transform: translate(0px, 11px);\n}\n\n/* Styles applied to root element */\n.saltRadioButtonGroup {\n  border: 0;\n  margin: 0;\n  padding: 0;\n  display: inline-flex;\n  flex-direction: column;\n  vertical-align: top;\n}\n\n/* Styles applied when `row=false OR undefined` */\n.saltRadioButtonGroup-vertical .saltRadioButtonGroup-legend.saltFormLabel {\n  margin-bottom: var(--saltRadioButton-group-vertical-label-marginBottom, var(--radioButton-group-vertical-label-marginBottom));\n  margin-top: var(--saltRadioButton-group-vertical-label-marginTop, 0px);\n\n  --saltFormField-label-paddingRight: var(--radioButton-group-vertical-formLabel-paddingRight);\n  --saltFormField-label-marginBottom: var(--radioButton-group-vertical-formLabel-marginBottom);\n  --saltFormField-label-transform: var(--radioButton-group-vertical-formLabel-transform);\n}\n\n/* Styles applied to the FormField FormLabel component */\n.saltRadioButtonGroup-legend.saltFormLabel {\n  --saltFormField-label-transform: var(--radioButton-group-formLabel-transform);\n}\n\n/* Styles applied to the Form Field FormLabel component if `row={true}` */\n.saltRadioButtonGroup-horizontal .saltRadioButtonGroup-legend.saltFormLabel {\n  --formField-label-width: auto;\n  float: left;\n}\n\n/* Styles applied to the Form Field FormLabel component */\n.saltRadioButtonGroup-legend.saltFormLabel {\n  padding-left: var(--saltRadioButton-group-formLabel-paddingLeft, 0px);\n}\n\n/* Styles applied  to legend if `row={true}` */\n.saltRadioButtonGroup-horizontal .saltRadioButtonGroup-legend {\n  margin-bottom: var(--saltRadioButton-group-horizontal-legend-marginBottom, var(--radioButton-group-horizontal-legend-marginBottom));\n  margin-right: var(--saltRadioButton-group-horizontal-legend-marginRight, var(--radioButton-group-horizontal-legend-marginRight));\n  margin-top: var(--saltRadioButton-group-horizontal-legend-marginTop, var(--radioButton-group-horizontal-legend-marginTop));\n  padding-right: var(--saltRadioButton-group-horizontal-legend-paddingRight, var(--radioButton-group-horizontal-legend-paddingRight));\n}\n\n/* Styles applied to legend */\n.saltRadioButtonGroup-legend {\n  margin-bottom: var(--saltRadioButton-group-legend-marginBottom, 4px);\n  min-height: var(--saltRadioButton-group-legend-minHeight, var(--radioButton-group-legend-minHeight));\n  padding-right: var(--saltRadioButton-group-legend-paddingRight, var(--radioButton-group-legend-paddingRight));\n  transition: none;\n  width: auto;\n}\n\n/* fieldset specific styles */\nfieldset.saltRadioButtonGroup.saltRadioButtonGroup-vertical {\n  line-height: 1;\n}\n\nfieldset.saltRadioButtonGroup.saltRadioButtonGroup-horizontal {\n  display: block;\n  padding-left: 0px;\n  min-inline-size: max-content;\n}\n";
+var css_248z = "/* Styles applied to root element */\n.saltRadioButtonGroup {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Styles applied when direction is vertical */\n.saltRadioButtonGroup-vertical {\n  display: flex;\n  gap: var(--salt-size-unit);\n  flex-direction: column;\n}\n\n/* Styles applied when direction is horizontal */\n.saltRadioButtonGroup-horizontal {\n  display: flex;\n  gap: var(--salt-size-unit);\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.saltRadioButtonGroup-noWrap {\n  flex-wrap: nowrap;\n}\n.saltRadioButtonGroup-noWrap .saltRadioButton {\n  white-space: break-spaces;\n}\n\n/* Styles applied to radio group's legend */\n.saltRadioButtonGroup-legend {\n  display: inline-block;\n  font-size: var(--formField-label-fontSize);\n  color: var(--salt-text-primary-foreground);\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/lab/src/radio-button/RadioButtonGroup.js CHANGED Viewed

@@ -1,14 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
-import { forwardRef, useState, useRef, useImperativeHandle } from 'react';
-import { makePrefixer, useId } from '@salt-ds/core';
-import '../form-field-context/FormFieldContext.js';
-import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
-import { FormGroup } from '../form-group/FormGroup.js';
-import '../form-field/FormField.js';
-import { FormLabel } from '../form-field/FormLabel.js';
+import { forwardRef } from 'react';
+import { makePrefixer, useControlled, useId } from '@salt-ds/core';
 import { RadioGroupContext } from './internal/RadioGroupContext.js';
-import { RadioButton } from './RadioButton.js';
 import './RadioButtonGroup.css.js';
 const withBaseName = makePrefixer("saltRadioButtonGroup");
@@ -17,81 +11,41 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
     children,
     className,
     defaultValue,
-    legend,
-    icon,
-    radios,
+    direction = "vertical",
+    wrap = true,
+    name: nameProp,
     onChange,
     value: valueProp,
-    row,
-    name: nameProp,
     ...rest
   } = props;
-  const { inFormField, a11yProps } = useFormFieldProps({
-    focusVisible: false
+  const [value, setStateValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    state: "value",
+    name: "RadioButtonGroup"
   });
-  const [stateValue, setStateValue] = useState(props.defaultValue);
-  const getValue = () => isControlled() ? props.value : stateValue;
-  const isControlled = () => props.value !== void 0;
   const handleChange = (event) => {
-    if (!isControlled()) {
-      setStateValue(event.target.value);
-    }
-    if (props.onChange) {
-      props.onChange(event);
-    }
+    setStateValue(event.target.value);
+    onChange == null ? void 0 : onChange(event);
   };
-  const rootRef = useRef(null);
-  useImperativeHandle(
-    void 0,
-    () => ({
-      focus: () => {
-        const current = rootRef.current;
-        if (current) {
-          let input = current.querySelector(
-            "input:not(:disabled):checked"
-          );
-          if (!input) {
-            input = current.querySelector("input:not(:disabled)");
-          }
-          if (input) {
-            input.focus();
-          }
-        }
-      }
-    }),
-    []
-  );
   const name = useId(nameProp);
-  return /* @__PURE__ */ jsxs("fieldset", {
+  return /* @__PURE__ */ jsx("fieldset", {
     className: clsx(
       withBaseName(),
-      row ? withBaseName("horizontal") : withBaseName("vertical"),
+      withBaseName(direction),
+      {
+        [withBaseName("noWrap")]: !wrap
+      },
       className
     ),
     "data-testid": "radio-button-group",
     ref,
     role: "radiogroup",
-    ...a11yProps,
-    children: [
-      !inFormField && /* @__PURE__ */ jsx(FormLabel, {
-        className: clsx(withBaseName("legend")),
-        label: legend
-      }),
-      /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
-        value: { name, onChange: handleChange, value: getValue() },
-        children: /* @__PURE__ */ jsx(FormGroup, {
-          role: "radiogroup",
-          ...rest,
-          row,
-          children: radios && radios.map((radio) => /* @__PURE__ */ jsx(RadioButton, {
-            disabled: radio.disabled,
-            icon,
-            label: radio.label,
-            value: radio.value
-          }, radio.label)) || children
-        })
-      })
-    ]
+    ...rest,
+    children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+      value: { name, onChange: handleChange, value },
+      children
+    })
   });
 });

package/dist-es/packages/lab/src/radio-button/RadioButtonGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ~~ComponentType~~,\n forwardRef,\n ~~HTMLAttributes,\n useImperativeHandle,\n useRef,\n useState,\n~~} from \"react\";\nimport { makePrefixer, useId } from \"@salt-ds/core\";\nimport { ~~useFormFieldProps } from \"../form-field-context\";\nimport { FormGroup } from \"../form-group\";\nimport { FormLabel } from \"../form-field\";\nimport {~~ RadioGroupContext } from \"./internal/RadioGroupContext\";\~~nimport { RadioButton } from \"./RadioButton\";\nimport { RadioButtonIconProps } from \"./RadioButtonIcon\";\~~n\nimport \"./RadioButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps extends ~~HTMLAttributes~~<~~HTMLDivElement~~> {\n ~~className?:~~ ~~string;\~~n defaultValue?: string;\n ~~icon~~?: ~~ComponentType<RadioButtonIconProps>;\~~n ~~legend~~?: ~~string~~;\n name?: string;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n ~~radios?: {\~~n ~~disabled?:~~ ~~boolean;\n label?:~~ ~~string;\n~~ value?: ~~string;\~~n ~~}[];\~~n ~~row?: boolean;\n~~ value?: string;\n}\n\nexport const RadioButtonGroup = forwardRef<\n HTMLFieldSetElement,\n RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n const {\n children,\n className,\n defaultValue,\n ~~legend~~,\n ~~icon~~,\n ~~radios~~,\n onChange,\n value: valueProp,\n ~~row,\n name: nameProp,\n~~ ...rest\n } = props;\n\n const ~~{ inFormField~~, ~~a11yProps~~ } = ~~useFormFieldProps~~({\n ~~focusVisible~~: ~~false~~,\n ~~});\n\n const~~ ~~[stateValue, setStateValue] = useState(props.~~defaultValue~~);\~~n\n ~~const getValue = () => (isControlled() ? props.value~~ : ~~stateValue);\n~~\n ~~const isControlled = (~~) ~~=> props.value !== undefined~~;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n ~~if (!isControlled()) {\n~~ setStateValue(event.target.value);\n ~~}\n if (props.~~onChange~~) {\n props.onChange~~(event);\n ~~}\n~~ };\n\n const rootRef = useRef<HTMLFieldSetElement>(null);\n\n useImperativeHandle(\n undefined,\n () => ({\n focus: () => {\n const current = rootRef.current;\n if (current) {\n let input: HTMLInputElement \| null = current.querySelector(\n \"input:not(:disabled):checked\"\n );\n if (!input) {\n input = current.querySelector(\"input:not(:disabled)\");\n }\n if (input) {\n input.focus();\n }\n }\n },\n }),\n []\n );\n\n const name = useId(nameProp);\n\n return (\n <fieldset\n className={clsx(\n withBaseName(),\n ~~row ?~~ withBaseName(\~~"horizontal\") :~~ withBaseName(\"~~vertical~~\"),\n className\n )}\n data-testid=\"radio-button-group\"\n ref={ref}\n role=\"radiogroup\"\n {...~~a11yProps~~}\n >\n ~~{!inFormField && (\n~~ <~~FormLabel className={clsx(withBaseName(\"legend\"))} label={legend} />\n )}\n\n <~~RadioGroupContext.Provider\n value={{ name, onChange: handleChange, value: ~~getValue()~~ }}\n >\n ~~<FormGroup role=\"radiogroup\"~~ {...rest} row={row}>\n {(radios &&\n radios.map((radio) => (\n <RadioButton\n disabled={radio.disabled}\n icon={icon}\n key={radio.label}\n label={radio.label}\n value={radio.value}\n />\n ))) \|\|\n children}\n ~~</FormGroup>\n~~ </RadioGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["RadioButtonGroup"],"mappings":"~~;;;;;;;;;;;;;AAoBA~~,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;~~AAkBjD~~,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,~~MAAA;AAAA~~,~~IACA~~,~~IAAA~~;AAAA,~~IACA~~,~~MAAA;AAAA~~,~~IACA~~,~~QAAA~~;AAAA,~~IACA~~,~~KAAO~~,EAAA,~~SAAA~~;AAAA,~~IACP~~,~~GAAA~~;AAAA,IACA,~~IAAM~~,EAAA,~~QAAA~~;AAAA,~~IACH~~,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,~~EAAE~~,~~WAAA~~,~~EAAa~~,~~SAAU~~,~~EAAA~~,GAAI,~~iBAAkB~~,CAAA;AAAA,~~IACnD~~,~~YAAc~~,EAAA,~~KAAA~~;AAAA,~~GACf~~,~~CAAA~~,~~CAAA;AAED,~~EAAA,~~MAAM~~,~~CAAC~~,~~UAAY~~,EAAA,~~aAAa,CAAI,GAAA,QAAA,CAAS,MAAM,YAAY,CAAA,CAAA~~;~~AAE/D~~,~~EAAA~~,~~MAAM~~,~~QAAW,GAAA,MAAO,YAAa,~~EAAA,~~GAAI,MAAM,KAAQ,GAAA,UAAA,CAAA~~;~~AAEvD~~,~~EAAM~~,~~MAAA,YAAA,GAAe,MAAM,KAAA,CAAM,KAAU,KAAA,KAAA,~~CAAA,CAAA;~~AAE3C~~,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,~~IAAI~~,~~IAAA,CAAC,cAAgB,EAAA;AACnB,MAAc,~~aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;~~AAAA~~,~~KAClC;AACA~~,IAAA,~~IAAI~~,~~MAAM~~,~~QAAU,EAAA;AAClB,MAAA,~~KAAA,~~CAAM,SAAS,KAAK,~~CAAA,~~CAAA;AAAA~~,~~KACtB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,OAAA,GAAU,OAA4B,IAAI,CAAA,CAAA;AAEhD,EAAA,mBAAA;AAAA,IACE,KAAA,CAAA;AAAA,IACA,OAAO;AAAA,MACL,OAAO,MAAM;AACX,~~QAAA,~~MAAM,UAAU,OAAQ,~~CAAA,~~OAAA,CAAA;AACxB,QAAA,IAAI,OAAS,EAAA;AACX,UAAA,IAAI,QAAiC,OAAQ,CAAA,aAAA;AAAA,YAC3C,8BAAA;AAAA,WACF,CAAA;AACA,UAAA,IAAI,CAAC,KAAO,EAAA;AACV,YAAQ,~~KAAA,~~GAAA,OAAA,CAAQ,cAAc,sBAAsB,~~CAAA,CAAA;AAAA,~~WACtD;AACA~~,~~UAAA,IAAI,KAAO,EAAA;AACT,YAAA,KAAA,CAAM,KAAM,EAAA,~~CAAA;~~AAAA,WACd;AAAA,SACF;AAAA,OACF;AAAA,KACF,CAAA;AAAA,IACA,EAAC;AAAA,GACH,CAAA;~~AAEA,EAAM,MAAA,IAAA,GAAO,MAAM,QAAQ,CAAA,CAAA;AAE3B,EAAA,uBACG,~~IAAA~~,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,~~GAAM~~,~~GAAA~~,YAAA,CAAa,~~YAAY~~,CAAA,GAAI,~~aAAa~~,~~UAAU~~,~~CAAA~~;AAAA,~~MAC1D~~,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,oBAAA;AAAA,IACZ,GAAA;AAAA,IACA,IAAK,EAAA,YAAA;AAAA,IACJ,GAAG,~~SAAA~~;AAAA,~~IAEH~~,QAAA,~~EAAA;AAAA~~,~~MAAA,CAAC,+BACC,~~GAAA,~~CAAA,SAAA,EAAA;AAAA,QAAU,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,QAAQ,~~CAAC,~~CAAA;AAAA,QAAG,KAAO,EAAA,MAAA;AAAA,OAAQ,CAAA;AAAA,sBAGrE,GAAA,CAAC,~~kBAAkB,QAAlB,EAAA;AAAA,~~QACC~~,~~OAAO~~,~~EAAE,IAAA,EAAM,UAAU,YAAc,~~EAAA,~~KAAA~~,~~EAAO~~,~~UAAW,~~EAAA~~;AAAA~~,QAEzD,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,UAAU,IAAK,EAAA,YAAA;AAAA,UAAc,GAAG,IAAA;AAAA,UAAM,GAAA;AAAA,UACnC,QACA,EAAA,MAAA,IAAA,MAAA,CAAO,GAAI,CAAA,CAAC,0BACT,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,UAAU,KAAM,CAAA,QAAA~~;AAAA~~,~~YAChB~~,~~IAAA;AAAA~~,~~YAEA,OAAO,~~KAAM,~~CAAA,KAAA~~;AAAA,~~YACb~~,~~OAAO,KAAM,CAAA,KAAA;AAAA,WAFR,EAAA,KAAA,CAAM,KAGb,CACD,CACD,IAAA,~~QAAA;AAAA,~~SACJ~~,CAAA;AAAA,~~OACF,CAAA;AAAA,KAAA;AAAA,~~GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"@salt-ds/core\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport \"./RadioButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /*\n Set the selected value when initialized.\n /\n defaultValue?: string;\n /\n Set the group direction.\n /\n direction?: \"horizontal\" \| \"vertical\";\n /\n Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n /\n wrap?: boolean;\n /\n The name to be set on each radio button within the group. If not set, then one will be generated for you.\n /\n name?: string;\n /\n Callback for change event.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n The value of the radio group, required for a controlled component.\n */\n value?: string;\n}\n\nexport const RadioButtonGroup = forwardRef<\n HTMLFieldSetElement,\n RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n const {\n children,\n className,\n defaultValue,\n direction = \"vertical\",\n wrap = true,\n name: nameProp,\n onChange,\n value: valueProp,\n ...rest\n } = props;\n\n const [value, setStateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n state: \"value\",\n name: \"RadioButtonGroup\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setStateValue(event.target.value);\n onChange?.(event);\n };\n\n const name = useId(nameProp);\n\n return (\n <fieldset\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className\n )}\n data-testid=\"radio-button-group\"\n ref={ref}\n role=\"radiogroup\"\n {...rest}\n >\n <RadioGroupContext.Provider\n value={{ name, onChange: handleChange, value }}\n >\n {children}\n </RadioGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["RadioButtonGroup"],"mappings":";;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AA8BjD,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAY,GAAA,UAAA;AAAA,IACZ,IAAO,GAAA,IAAA;AAAA,IACP,IAAM,EAAA,QAAA;AAAA,IACN,QAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACJ,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,CAAC,KAAA,EAAO,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAC3C,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,IAAM,EAAA,kBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAChC,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,IAAA,GAAO,MAAM,QAAQ,CAAA,CAAA;AAE3B,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,oBAAA;AAAA,IACZ,GAAA;AAAA,IACA,IAAK,EAAA,YAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,MACC,KAAO,EAAA,EAAE,IAAM,EAAA,QAAA,EAAU,cAAc,KAAM,EAAA;AAAA,MAE5C,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/radio-button/RadioButtonIcon.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = ".salt-density-high {\n  --radioButton-icon-size: 12px;\n}\n\n.salt-density-medium {\n  --radioButton-icon-size: 14px;\n}\n\n.salt-density-low {\n  --radioButton-icon-size: 16px;\n}\n\n.salt-density-touch {\n  --radioButton-icon-size: 18px;\n}\n\n/* Styles applied to root component */\n.saltRadioButtonIcon {\n  --radioButton-icon-fill: transparent;\n  --radioButton-icon-fill-checked: var(--salt-selectable-borderColor-selected);\n  --radioButton-icon-fill-checked-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n\n  --radioButton-icon-strokeColor: var(--salt-selectable-borderColor);\n  --radioButton-icon-strokeColor-disabled: var(--salt-selectable-borderColor-disabled);\n  --radioButton-icon-strokeColor-hover: var(--salt-selectable-borderColor-hover);\n  --radioButton-icon-strokeColor-checked: var(--salt-selectable-borderColor-selected);\n  --radioButton-icon-strokeColor-checked-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n\n  --radioButton-icon-strokeWidth: var(--salt-size-border);\n  --radioButton-icon-strokeWidth-hover: var(--salt-size-border);\n  --radioButton-icon-strokeWidth-checked: var(--salt-size-border);\n\n  width: var(--saltRadioButton-icon-svg-size, var(--radioButton-icon-size));\n  height: var(--saltRadioButton-icon-svg-size, var(--radioButton-icon-size));\n}\n\n/* Styles applied to RadioButtonIcon border */\n.saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill, var(--radioButton-icon-fill));\n  stroke: var(--saltRadioButton-icon-strokeColor, var(--radioButton-icon-strokeColor));\n  stroke-width: var(--saltRadioButton-icon-strokeWidth, var(--radioButton-icon-strokeWidth));\n}\n\n/* Styles applied to RadioButtonIcon border if `checked={true}` */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-checked, var(--radioButton-icon-fill-checked));\n  stroke: var(--saltRadioButton-icon-strokeColor-checked, var(--radioButton-icon-strokeColor-checked));\n  stroke-width: var(--saltRadioButton-icon-strokeWidth-checked, var(--radioButton-icon-strokeWidth-checked));\n}\n\n/* Styles applied to RadioButtonIcon border on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-hover, var(--radioButton-icon-fill));\n  stroke: var(--saltRadioButton-icon-strokeColor-hover, var(--radioButton-icon-strokeColor-hover));\n}\n\n/* Styles applied to RadioButtonIcon border on hover if `checked={true}` */\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-checked-hover, var(--radioButton-icon-fill-checked));\n  stroke: var(--saltRadioButton-icon-strokeColor-checked-hover, var(--radioButton-icon-strokeColor-checked));\n}\n\n/* Styles applied to RadioButtonIcon border if `disabled={true}` or in a disabled FormField */\n.saltRadioButton-disabled .saltRadioButtonIcon-border,\n.saltFormField-disabled .saltRadioButton .saltRadioButtonIcon-border,\n.saltRadioButton-disabled:hover .saltRadioButtonIcon-border,\n.saltFormField-disabled .saltRadioButton:hover .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-disabled, var(--radioButton-icon-fill));\n  stroke: var(--saltRadioButton-icon-strokeColor-disabled, var(--radioButton-icon-strokeColor-disabled));\n}\n\n/* Styles applied to RadioButtonIcon border if `checked={true}` when `disabled={true}` or in a disabled FormField  */\n.saltFormField-disabled .saltRadioButton .saltRadioButtonIcon-checked .saltRadioButtonIcon-border,\n.saltFormField-disabled .saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-border,\n.saltRadioButton-disabled .saltRadioButtonIcon-checked .saltRadioButtonIcon-border,\n.saltRadioButton-disabled:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-checked-disabled, var(--radioButton-icon-fill-checked-disabled));\n  stroke: var(--saltRadioButton-icon-strokeColor-checked-disabled, transparent);\n}\n\n/* Styles applied to inner circle when `checked={true}` */\n.saltRadioButtonIcon-inner-checked {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-selectable-primary-foreground-selected));\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltRadioButtonIcon {\n  --radioButton-icon-fill: transparent;\n  --radioButton-icon-fill-checked: var(--salt-selectable-borderColor-selected);\n  --radioButton-icon-fill-checked-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n  --radioButton-icon-fill-error: var(--salt-status-error-borderColor);\n  --radioButton-icon-fill-error-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n\n  width: var(--saltRadioButton-icon-svg-size, var(--salt-size-selectable));\n  height: var(--saltRadioButton-icon-svg-size, var(--salt-size-selectable));\n  border-radius: 50%;\n  flex: none;\n  margin-top: var(--salt-size-border);\n}\n\n/* Styles applied to RadioButtonIcon border */\n.saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill, var(--radioButton-icon-fill));\n  stroke: var(--saltRadioButton-icon-strokeColor, var(--salt-selectable-borderColor));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to RadioButtonIcon border on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-hover, var(--radioButton-icon-fill));\n  stroke: var(--saltRadioButton-icon-strokeColor-hover, var(--salt-selectable-borderColor-hover));\n}\n\n/* Styles applied to RadioButtonIcon border if checked */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-checked, var(--radioButton-icon-fill-checked));\n  stroke: var(--saltRadioButton-icon-strokeColor-checked, var(--salt-selectable-borderColor-selected));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to RadioButtonIcon border on hover if checked */\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-checked-hover, var(--radioButton-icon-fill-checked));\n  stroke: var(--saltRadioButton-icon-strokeColor-checked-hover, var(--salt-selectable-borderColor-selected));\n}\n\n/* Styles applied to RadioButtonIcon border if disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-border,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-disabled, var(--radioButton-icon-fill));\n  stroke: var(--saltRadioButton-icon-strokeColor-disabled, var(--salt-selectable-borderColor-disabled));\n}\n\n/* Styles applied to RadioButtonIcon border if checked and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-border,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-checked-disabled, var(--radioButton-icon-fill-checked-disabled));\n  stroke: var(--saltRadioButton-icon-strokeColor-checked-disabled, transparent);\n}\n\n/* Styles applied to inner circle when checked */\n.saltRadioButtonIcon-inner-checked {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-selectable-primary-foreground-selected));\n}\n\n/* Styles applied to radio button icon with error */\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-border,\n.saltRadioButtonIcon-error,\n.saltRadioButtonIcon-error .saltRadioButtonIcon-border {\n  stroke: var(--saltRadioButton-icon-strokeColor-error, var(--salt-status-error-borderColor));\n}\n\n/* Styles applied to radio button icon when checked and with error */\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-border,\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-border {\n  fill: var(--saltRadioButton-icon-fill-error, var(--salt-status-error-borderColor));\n}\n\n/* Styles applied to radio button icon when checked and with error */\n/* TODO: replace with correct token */\n.saltRadioButton-disabled .saltRadioButtonIcon-error {\n  opacity: var(--salt-palette-opacity-background);\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/lab/src/radio-button/RadioButtonIcon.js CHANGED Viewed

@@ -4,10 +4,16 @@ import { clsx } from 'clsx';
 import './RadioButtonIcon.css.js';
 const withBaseName = makePrefixer("saltRadioButtonIcon");
-const RadioButtonIcon = ({ checked }) => {
+const RadioButtonIcon = ({
+  checked,
+  error,
+  disabled
+}) => {
   return /* @__PURE__ */ jsxs("svg", {
     className: clsx(withBaseName(), {
-      [withBaseName("checked")]: checked
+      [withBaseName("checked")]: checked,
+      [withBaseName("error")]: error,
+      [withBaseName("disabled")]: disabled
     }),
     height: "14",
     viewBox: "0 0 14 14",
@@ -23,12 +29,11 @@ const RadioButtonIcon = ({ checked }) => {
         className: withBaseName("inner-checked"),
         cx: "7",
         cy: "7",
-        r: "3"
+        r: "3.2"
       })
     ]
   });
 };
-const makeRadioIcon = (iconChecked, iconUnchecked) => (props) => props.checked ? iconChecked : iconUnchecked;
-export { RadioButtonIcon, makeRadioIcon };
+export { RadioButtonIcon };
 //# sourceMappingURL=RadioButtonIcon.js.map

package/dist-es/packages/lab/src/radio-button/RadioButtonIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { ~~ComponentType, ReactElement } from \"react\";\nimport {~~ makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport \"./RadioButtonIcon.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps {\n checked?: boolean;\n}\n\n/*\n Default radio icon\n /\nexport const RadioButtonIcon = ({ checked }: RadioButtonIconProps) => {\n return (\n <svg\n className={clsx(withBaseName(), {\n [withBaseName(\"checked\")]: checked,\n })}\n height=\"14\"\n viewBox=\"0 0 14 14\"\n width=\"14\"\n >\n <circle className={withBaseName(\"border\")} cx=\"7\" cy=\"7\" r=\"6.5\" />\n {checked && (\n <circle className={withBaseName(\"inner-checked\")} cx=\"7\" cy=\"7\" r=\"3\" />\n )}\n </svg>\n );\n};\n\n/\n Creates a component that can be given to Radio or RadioButton as the 'icon'\n */\nexport const makeRadioIcon =\n (\n iconChecked: ReactElement \| null,\n iconUnchecked: ReactElement \| null\n ): ComponentType<RadioButtonIconProps> =>\n (props: RadioButtonIconProps) =>\n props.checked ? iconChecked : iconUnchecked;\n"],"names":[],"mappings":";;;;;~~AAKA~~,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;~~AAShD~~,MAAM,~~eAAkB~~,~~GAAA,~~CAAC,~~EAAE~~,OAAA,~~EAAoC~~,KAAA;~~AACpE~~,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,~~KAC5B~~,CAAA;AAAA,IACD,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,IAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAChE,2BACE,GAAA,CAAA,QAAA,EAAA;AAAA,~~QAAO~~,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,~~QAAG~~,EAAG,EAAA,GAAA;AAAA,~~QAAI~~,EAAG,EAAA,GAAA;AAAA,~~QAAI~~,CAAE,EAAA,~~GAAA~~;AAAA,~~OAAI~~,CAAA;AAAA,KAAA;AAAA,~~GAE1E~~,CAAA,CAAA;AAEJ~~,EAAA;AAKa,MAAA,aAAA,GACX,CACE,WACA,EAAA,aAAA,KAEF,CAAC,KACC,KAAA,KAAA,CAAM,UAAU,WAAc,GAAA~~;;;;"}
1	+ {"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport \"./RadioButtonIcon.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps {\n checked?: boolean;\n error?: boolean;\n disabled?: boolean;\n}\n\n/*\n Default radio icon\n */\nexport const RadioButtonIcon = ({\n checked,\n error,\n disabled,\n}: RadioButtonIconProps) => {\n return (\n <svg\n className={clsx(withBaseName(), {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"error\")]: error,\n [withBaseName(\"disabled\")]: disabled,\n })}\n height=\"14\"\n viewBox=\"0 0 14 14\"\n width=\"14\"\n >\n <circle className={withBaseName(\"border\")} cx=\"7\" cy=\"7\" r=\"6.5\" />\n {checked && (\n <circle\n className={withBaseName(\"inner-checked\")}\n cx=\"7\"\n cy=\"7\"\n r=\"3.2\"\n />\n )}\n </svg>\n );\n};\n"],"names":[],"mappings":";;;;;AAIA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAWhD,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AACF,CAA4B,KAAA;AAC1B,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,MAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,MACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,KAC7B,CAAA;AAAA,IACD,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,IAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAChE,2BACE,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,QACvC,EAAG,EAAA,GAAA;AAAA,QACH,EAAG,EAAA,GAAA;AAAA,QACH,CAAE,EAAA,KAAA;AAAA,OACJ,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/radio-button/internal/RadioGroupContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { createContext } from \"@salt-ds/core\";\n\nexport interface RadioGroupContextValue {\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n}\n\nexport const RadioGroupContext = createContext(\n \"RadioGroupContext\",\n {} ~~as RadioGroupContextValue~~\n);\n"],"names":[],"mappings":";;AASO,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}
1	+ {"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { createContext } from \"@salt-ds/core\";\n\nexport interface RadioGroupContextValue {\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n \"RadioGroupContext\",\n {}\n);\n"],"names":[],"mappings":";;AASO,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/packages/lab/src/responsive/useDynamicCollapse.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { useState, useCallback } from 'react';
-import { measureElementSize, getElementForItem, getRuntimePadding, measureContainerOverflow, isCollapsed, isCollapsible, byDescendingPriority } from './overflowUtils.js';
+import { measureElementSize, getElementForItem, getRuntimePadding, measureContainerOverflow, isCollapsible, isCollapsed, byDescendingPriority } from './overflowUtils.js';
 const UNCOLLAPSED_DYNAMIC_ITEMS = '[data-collapsible="dynamic"]:not([data-collapsed="true"]):not([data-collapsing="true"])';
 const hasUncollapsedDynamicItems = (containerRef) => containerRef.current.querySelector(UNCOLLAPSED_DYNAMIC_ITEMS) !== null;

package/dist-es/packages/lab/src/skip-link/SkipLink.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = "/* CSS Variables for the Skip Link */\n.saltSkipLink {\n  --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));\n  --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));\n  --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));\n  --skipLink-color: var(--saltSkipLink-color, var(--salt-text-primary-foreground));\n}\n\n/* Overrides */\n.saltSkipLink {\n  --saltLink-color-focus: var(--skipLink-color);\n}\n\n.saltSkipLink-target {\n  --skipLink-target-focus: var(--salt-focused-outline);\n}\n\n/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  display: block;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n  opacity: 1;\n  width: auto;\n  height: auto;\n  white-space: nowrap;\n  margin: var(--skipLink-margin);\n  padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);\n  background: var(--skipLink-background);\n  color: var(--skipLink-color);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltSkipLink {\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--saltSkipLink-fontFamily, var(--salt-typography-fontFamily));\n  line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));\n}\n\n/*Styles applied to the skip link focus target*/\n.saltSkipLink-target {\n  outline: var(--skipLink-target-focus);\n}\n";
+var css_248z = "/* CSS Variables for the Skip Link */\n.saltSkipLink {\n  --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));\n  --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));\n  --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));\n  --skipLink-color: var(--saltSkipLink-color, var(--salt-text-primary-foreground));\n}\n\n/* Overrides */\n.saltSkipLink {\n  --saltLink-color-focus: var(--skipLink-color);\n}\n\n.saltSkipLink-target {\n  --skipLink-target-focus: var(--salt-focused-outline);\n}\n\n/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  display: block;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n  opacity: 1;\n  width: auto;\n  height: auto;\n  white-space: nowrap;\n  margin: var(--skipLink-margin);\n  padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);\n  background: var(--skipLink-background);\n  color: var(--skipLink-color);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltSkipLink {\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--saltSkipLink-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));\n}\n\n/*Styles applied to the skip link focus target*/\n.saltSkipLink-target {\n  outline: var(--skipLink-target-focus);\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/lab/src/skip-link/internal/useManageFocusOnTarget.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useMemo, useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 const FOCUS_TIMEOUT = 50;
 const useManageFocusOnTarget = ({

package/dist-es/packages/lab/src/slider/Slider.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = ".salt-density-high {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 2px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 2px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 3px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-medium {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 4px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 4px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 6px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-low {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 8px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 8px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 9px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-touch {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 12px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 12px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 12px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.saltSlider {\n  --slider-rail-height: var(--saltSlider-rail-height, 8px);\n  --slider-rail-color: var(--saltSlider-rail-color, var(--salt-measured-borderColor));\n\n  --slider-rail-mark-height: var(--saltSlider-rail-mark-height, 7px);\n  --slider-rail-mark-color: var(--saltSlider-rail-mark-color, var(--slider-rail-color));\n\n  --slider-selection-color: var(--saltSlider-selection-color, var(--salt-measured-fill));\n  --slider-selection-height: var(--saltSlider-selection-height, 2px);\n\n  --slider-handle-size: var(--saltSlider-handle-size, calc(var(--salt-size-base) * 0.5));\n  --slider-handle-outlineStyle: var(--saltSlider-handle-outlineStyle, var(--salt-focused-outlineStyle));\n  --slider-handle-outlineWidth: var(--saltSlider-handle-outlineWidth, var(--salt-focused-outlineWidth));\n  --slider-handle-outlineColor: var(--saltSlider-handle-outlineColor, var(--salt-focused-outlineColor));\n  --slider-handle-outlineOffset: var(--saltSlider-handle-outlineOffset, var(--salt-focused-outlineOffset));\n\n  --slider-arrow-height: var(--saltSlider-arrow-height, 6px);\n  --slider-arrow-width: var(--saltSlider-arrow-width, 8px);\n  --slider-arrow-color: var(--saltSlider-arrow-color, var(--slider-selection-color));\n\n  --slider-borderStyle: var(--saltSlider-borderStyle, none);\n  --slider-borderWidth: var(--saltSlider-borderWidth, 0);\n  --slider-borderColor: var(--saltSlider-borderColor, transparent);\n  --slider-width: var(--saltSlider-width, 300px);\n\n  --slider-clickable-paddingLeft: var(--saltSlider-clickable-paddingLeft, calc(var(--salt-size-base) * 0.5));\n  --slider-clickable-paddingRight: var(--saltSlider-clickable-paddingRight, calc(var(--salt-size-base) * 0.5));\n\n  --slider-label-fontSize: var(--saltSlider-label-fontSize, var(--salt-text-label-fontSize));\n  --slider-label-paddingLeft: var(--saltSlider-label-paddingLeft, 0);\n  --slider-label-paddingRight: var(--saltSlider-label-paddingRight, 0);\n}\n\n.saltSlider {\n  width: var(--slider-width);\n  border-style: var(--slider-borderStyle);\n  border-width: var(--slider-borderWidth);\n  border-color: var(--slider-borderColor);\n\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n\n  padding-top: var(--slider-paddingTop);\n  padding-bottom: var(--slider-paddingBottom);\n}\n\n.saltSlider-disabled {\n}\n\n.saltSlider-clickable {\n  padding: var(--slider-clickable-paddingTop) var(--slider-clickable-paddingRight) var(--slider-clickable-paddingBottom) var(--slider-clickable-paddingLeft);\n  margin-right: calc(-1 * var(--slider-clickable-paddingRight));\n  margin-left: calc(-1 * var(--slider-clickable-paddingLeft));\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n}\n\n.saltSlider-track {\n  display: grid;\n  grid-template-rows: auto auto auto;\n  align-items: end;\n  grid-template-columns: auto auto auto;\n  row-gap: 0;\n  transition: grid-template-columns 100ms ease;\n}\n\n.saltSliderRail {\n  grid-row: 1;\n  grid-column-start: 1;\n  grid-column-end: -1;\n  height: var(--slider-rail-height);\n  border-style: solid;\n  border-width: 0 1px 1px 1px;\n  border-color: var(--slider-rail-color);\n}\n\n.saltSliderRailMarks {\n  grid-row: 2;\n  grid-column-start: 1;\n  grid-column-end: -1;\n  /*height: var(--markedRail-height);*/\n  display: grid;\n  grid-template-rows: auto;\n}\n\n.saltSliderRailMarks-mark {\n  grid-row: 1;\n  width: 0;\n  height: var(--slider-rail-mark-height);\n  border-left: 1px solid var(--slider-rail-mark-color);\n}\n\n.saltSliderRailMarks-max {\n  margin-left: -1px;\n}\n\n.saltSliderMarkLabels {\n  grid-row: 3;\n  grid-column-start: 1;\n  grid-column-end: -1;\n\n  display: grid;\n  grid-template-rows: auto;\n  justify-items: center;\n}\n\n.saltSliderMarkLabels-label {\n  color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground));\n  font-size: var(--slider-label-fontSize);\n  margin-top: var(--saltSlider-label-marginTop);\n  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));\n\n  white-space: nowrap;\n}\n\n.saltSliderSelection {\n  grid-row: 1;\n  grid-column-start: 1;\n  grid-column-end: -2;\n  height: var(--slider-selection-height);\n  background: var(--slider-selection-color);\n}\n\n.saltSliderSelection-range {\n  grid-row: 1;\n  grid-column-start: 2;\n  grid-column-end: -2;\n  height: var(--slider-selection-height);\n  background: var(--slider-selection-color);\n}\n\n.saltSliderHandle-box:focus-visible {\n  outline-style: var(--slider-handle-outlineStyle);\n  outline-width: var(--slider-handle-outlineWidth);\n  outline-color: var(--slider-handle-outlineColor);\n  outline-offset: var(--slider-handle-outlineOffset);\n}\n\n.saltSliderHandle {\n  margin-left: calc(var(--slider-arrow-width) * -0.5);\n  grid-row: 1;\n  width: 0;\n  height: 0;\n  border-left: calc(var(--slider-arrow-width) * 0.5) solid transparent;\n  border-right: calc(var(--slider-arrow-width) * 0.5) solid transparent;\n  border-bottom: calc(var(--slider-arrow-height)) solid var(--slider-arrow-color);\n  position: relative;\n}\n\n.saltSliderHandle-min {\n  border-left: none;\n  margin-left: 0;\n}\n\n.saltSliderHandle-max {\n  border-right: none;\n}\n\n.saltSlider-label {\n  color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground));\n  font-size: var(--slider-label-fontSize);\n  margin-top: var(--saltSlider-label-marginTop);\n  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));\n\n  padding-left: var(--slider-label-paddingLeft);\n  padding-right: var(--slider-label-paddingRight);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n";
+var css_248z = ".salt-density-high {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 2px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 2px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 3px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-medium {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 4px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 4px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 6px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-low {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 8px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 8px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 9px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-touch {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 12px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 12px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 12px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.saltSlider {\n  --slider-rail-height: var(--saltSlider-rail-height, 8px);\n  --slider-rail-color: var(--saltSlider-rail-color, var(--salt-track-borderColor));\n\n  --slider-rail-mark-height: var(--saltSlider-rail-mark-height, 7px);\n  --slider-rail-mark-color: var(--saltSlider-rail-mark-color, var(--slider-rail-color));\n\n  --slider-selection-color: var(--saltSlider-selection-color, var(--salt-accent-background));\n  --slider-selection-height: var(--saltSlider-selection-height, 2px);\n\n  --slider-handle-size: var(--saltSlider-handle-size, calc(var(--salt-size-base) * 0.5));\n  --slider-handle-outlineStyle: var(--saltSlider-handle-outlineStyle, var(--salt-focused-outlineStyle));\n  --slider-handle-outlineWidth: var(--saltSlider-handle-outlineWidth, var(--salt-focused-outlineWidth));\n  --slider-handle-outlineColor: var(--saltSlider-handle-outlineColor, var(--salt-focused-outlineColor));\n  --slider-handle-outlineOffset: var(--saltSlider-handle-outlineOffset, var(--salt-focused-outlineOffset));\n\n  --slider-arrow-height: var(--saltSlider-arrow-height, 6px);\n  --slider-arrow-width: var(--saltSlider-arrow-width, 8px);\n  --slider-arrow-color: var(--saltSlider-arrow-color, var(--slider-selection-color));\n\n  --slider-borderStyle: var(--saltSlider-borderStyle, none);\n  --slider-borderWidth: var(--saltSlider-borderWidth, 0);\n  --slider-borderColor: var(--saltSlider-borderColor, transparent);\n  --slider-width: var(--saltSlider-width, 300px);\n\n  --slider-clickable-paddingLeft: var(--saltSlider-clickable-paddingLeft, calc(var(--salt-size-base) * 0.5));\n  --slider-clickable-paddingRight: var(--saltSlider-clickable-paddingRight, calc(var(--salt-size-base) * 0.5));\n\n  --slider-label-fontSize: var(--saltSlider-label-fontSize, var(--salt-text-label-fontSize));\n  --slider-label-paddingLeft: var(--saltSlider-label-paddingLeft, 0);\n  --slider-label-paddingRight: var(--saltSlider-label-paddingRight, 0);\n}\n\n.saltSlider {\n  width: var(--slider-width);\n  border-style: var(--slider-borderStyle);\n  border-width: var(--slider-borderWidth);\n  border-color: var(--slider-borderColor);\n\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n\n  padding-top: var(--slider-paddingTop);\n  padding-bottom: var(--slider-paddingBottom);\n}\n\n.saltSlider-disabled {\n}\n\n.saltSlider-clickable {\n  padding: var(--slider-clickable-paddingTop) var(--slider-clickable-paddingRight) var(--slider-clickable-paddingBottom) var(--slider-clickable-paddingLeft);\n  margin-right: calc(-1 * var(--slider-clickable-paddingRight));\n  margin-left: calc(-1 * var(--slider-clickable-paddingLeft));\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n}\n\n.saltSlider-track {\n  display: grid;\n  grid-template-rows: auto auto auto;\n  align-items: end;\n  grid-template-columns: auto auto auto;\n  row-gap: 0;\n  transition: grid-template-columns 100ms ease;\n}\n\n.saltSliderRail {\n  grid-row: 1;\n  grid-column-start: 1;\n  grid-column-end: -1;\n  height: var(--slider-rail-height);\n  border-style: solid;\n  border-width: 0 1px 1px 1px;\n  border-color: var(--slider-rail-color);\n}\n\n.saltSliderRailMarks {\n  grid-row: 2;\n  grid-column-start: 1;\n  grid-column-end: -1;\n  /*height: var(--markedRail-height);*/\n  display: grid;\n  grid-template-rows: auto;\n}\n\n.saltSliderRailMarks-mark {\n  grid-row: 1;\n  width: 0;\n  height: var(--slider-rail-mark-height);\n  border-left: 1px solid var(--slider-rail-mark-color);\n}\n\n.saltSliderRailMarks-max {\n  margin-left: -1px;\n}\n\n.saltSliderMarkLabels {\n  grid-row: 3;\n  grid-column-start: 1;\n  grid-column-end: -1;\n\n  display: grid;\n  grid-template-rows: auto;\n  justify-items: center;\n}\n\n.saltSliderMarkLabels-label {\n  color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground));\n  font-size: var(--slider-label-fontSize);\n  margin-top: var(--saltSlider-label-marginTop);\n  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));\n\n  white-space: nowrap;\n}\n\n.saltSliderSelection {\n  grid-row: 1;\n  grid-column-start: 1;\n  grid-column-end: -2;\n  height: var(--slider-selection-height);\n  background: var(--slider-selection-color);\n}\n\n.saltSliderSelection-range {\n  grid-row: 1;\n  grid-column-start: 2;\n  grid-column-end: -2;\n  height: var(--slider-selection-height);\n  background: var(--slider-selection-color);\n}\n\n.saltSliderHandle-box:focus-visible {\n  outline-style: var(--slider-handle-outlineStyle);\n  outline-width: var(--slider-handle-outlineWidth);\n  outline-color: var(--slider-handle-outlineColor);\n  outline-offset: var(--slider-handle-outlineOffset);\n}\n\n.saltSliderHandle {\n  margin-left: calc(var(--slider-arrow-width) * -0.5);\n  grid-row: 1;\n  width: 0;\n  height: 0;\n  border-left: calc(var(--slider-arrow-width) * 0.5) solid transparent;\n  border-right: calc(var(--slider-arrow-width) * 0.5) solid transparent;\n  border-bottom: calc(var(--slider-arrow-height)) solid var(--slider-arrow-color);\n  position: relative;\n}\n\n.saltSliderHandle-min {\n  border-left: none;\n  margin-left: 0;\n}\n\n.saltSliderHandle-max {\n  border-right: none;\n}\n\n.saltSlider-label {\n  color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground));\n  font-size: var(--slider-label-fontSize);\n  margin-top: var(--saltSlider-label-marginTop);\n  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));\n\n  padding-left: var(--slider-label-paddingLeft);\n  padding-right: var(--slider-label-paddingRight);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/lab/src/slider/internal/useSliderMouseDown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useEffect } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 import { roundValue, clampValue } from './utils.js';
 const valueFromClientX = (context, x) => {

package/dist-es/packages/lab/src/stepper-input/useStepperInput.js CHANGED Viewed

@@ -181,6 +181,7 @@ const useStepperInput = (props, inputRef) => {
   };
   const getButtonProps = (type = stepperDirection.INCREMENT, buttonPropsProp = {}) => ({
     "aria-hidden": true,
+    "data-testid": `${type}-button`,
     tabIndex: -1,
     ...buttonPropsProp,
     onMouseDown: callAll(

package/dist-es/packages/lab/src/stepper-input/useStepperInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, MutableRefObject } from \"react\";\nimport { ButtonProps, useControlled, useId } from \"@salt-ds/core\";\nimport { InputProps } from \"../input\";\nimport { useDynamicAriaLabel } from \"./internal/useDynamicAriaLabel\";\nimport { useSpinner } from \"./internal/useSpinner\";\nimport { StepperInputProps } from \"./StepperInput\";\n\ntype Direction = \"decrement\" \| \"increment\";\n\nconst stepperDirection = {\n INCREMENT: \"increment\" as Direction,\n DECREMENT: \"decrement\" as Direction,\n};\n\n// The input should only accept numbers, decimal points, and plus/minus symbols\nconst ACCEPT_INPUT = /^[-+]?[0-9]\\.?([0-9]+)?/g;\n\nconst callAll =\n (...fns: any[]) =>\n (...args: any[]) =>\n fns.forEach((fn) => fn && fn(...args));\n\nconst toFixedDecimalPlaces = (inputNumber: number, decimalPlaces: number) =>\n inputNumber.toFixed(decimalPlaces);\n\nconst isAllowedNonNumeric = (inputCharacter: number \| string) => {\n if (typeof inputCharacter === \"number\") return;\n return (\n (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) \|\|\n inputCharacter === \"\"\n );\n};\n\nconst toFloat = (inputValue: number \| string) => {\n // Plus, minus, and empty characters are treated as 0\n if (isAllowedNonNumeric(inputValue)) return 0;\n return parseFloat(inputValue.toString());\n};\n\nconst santizedInput = (numberString: string) =>\n (numberString.match(ACCEPT_INPUT) \|\| []).join(\"\");\n\nconst getButtonIcon = (type: Direction) =>\n type === stepperDirection.INCREMENT ? \"triangle-up\" : \"triangle-down\";\n\nexport const useStepperInput = (\n props: StepperInputProps,\n inputRef: MutableRefObject<HTMLInputElement \| null>\n) => {\n const {\n block = 10,\n decimalPlaces = 0,\n defaultValue = 0,\n liveValue,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange,\n step = 1,\n value,\n InputProps: inputPropsProp = {},\n } = props;\n\n const [currentValue, setCurrentValue, isControlled] = useControlled({\n controlled: value,\n default: toFixedDecimalPlaces(defaultValue, decimalPlaces),\n name: \"stepper-input\",\n });\n const inputId = useId(inputPropsProp.id);\n\n const isOutOfRange = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) > max \|\| toFloat(currentValue) < min;\n };\n\n const isAtMax = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) >= max \|\| (max === 0 && currentValue === \"\");\n };\n\n const isAtMin = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) <= min \|\| (min === 0 && currentValue === \"\");\n };\n\n const valuesHaveDiverged = () => {\n if (liveValue === undefined \|\| currentValue === undefined) return false;\n return (\n toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !==\n toFloat(currentValue)\n );\n };\n\n const { setHasAnnounced } = useDynamicAriaLabel(\n \", value out of date\",\n liveValue !== undefined,\n inputRef,\n currentValue,\n valuesHaveDiverged\n );\n\n const decrement = () => {\n if (currentValue === undefined \|\| isAtMin()) return;\n let nextValue = currentValue === \"\" ? -step : toFloat(currentValue) - step;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const decrementBlock = () => {\n if (currentValue === undefined \|\| isAtMin()) return;\n let nextValue =\n currentValue === \"\"\n ? block -step\n : toFloat(currentValue) - step * block;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const increment = () => {\n if (currentValue === undefined \|\| isAtMax()) return;\n let nextValue = currentValue === \"\" ? step : toFloat(currentValue) + step;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const incrementBlock = () => {\n if (currentValue === undefined \|\| isAtMax()) return;\n let nextValue =\n currentValue === \"\" ? block * step : toFloat(currentValue) + step * block;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const setNextValue = (modifiedValue: number) => {\n let nextValue = modifiedValue;\n if (nextValue < min) nextValue = min;\n if (nextValue > max) nextValue = max;\n\n const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n if (isNaN(toFloat(roundedValue))) return;\n\n if (!isControlled) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } =\n useSpinner(decrementBlock, isAtMin());\n\n const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } =\n useSpinner(decrement, isAtMin());\n\n const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } =\n useSpinner(incrementBlock, isAtMax());\n\n const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } =\n useSpinner(increment, isAtMax());\n\n const handleInputBlur = () => {\n if (currentValue === undefined) return;\n\n const roundedValue = toFixedDecimalPlaces(\n toFloat(currentValue),\n decimalPlaces\n );\n\n if (\n currentValue !== \"\" &&\n !isAllowedNonNumeric(currentValue) &&\n !isControlled\n ) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const handleInputFocus = () => {\n setHasAnnounced(false);\n };\n\n const handleInputChange = (event: KeyboardEvent) => {\n const changedValue = (event.currentTarget as HTMLInputElement).value;\n\n if (!isControlled) {\n setCurrentValue(santizedInput(changedValue));\n }\n\n if (onChange) {\n onChange(santizedInput(changedValue));\n }\n };\n\n const handleInputKeyDown = (event: KeyboardEvent) => {\n if ([\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"ArrowUp\" ? incrementSpinner() : decrementSpinner();\n }\n if ([\"PageUp\", \"PageDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"PageUp\"\n ? incrementSpinnerBlock()\n : decrementSpinnerBlock();\n }\n };\n\n const handleButtonMouseDown = (\n event: MouseEvent<HTMLButtonElement>,\n type: Direction = stepperDirection.INCREMENT\n ) => {\n if (event.nativeEvent.button !== 0) return;\n type === stepperDirection.INCREMENT\n ? incrementSpinner()\n : decrementSpinner();\n };\n\n const handleButtonMouseUp = () => inputRef.current?.focus();\n\n const refreshCurrentValue = () => {\n const refreshedcurrentValue =\n liveValue !== undefined ? liveValue : defaultValue;\n if (refreshedcurrentValue === undefined) return;\n\n setCurrentValue(\n toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n );\n\n inputRef.current?.focus();\n\n if (onChange) {\n onChange(\n toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n );\n }\n };\n\n const getButtonProps = (\n type: Direction = stepperDirection.INCREMENT,\n buttonPropsProp: ButtonProps = {}\n ) => ({\n \"aria-hidden\": true,\n tabIndex: -1,\n ...buttonPropsProp,\n onMouseDown: callAll(\n (event: MouseEvent<HTMLButtonElement>) =>\n handleButtonMouseDown(event, type),\n buttonPropsProp.onMouseDown\n ),\n onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp),\n });\n\n const getInputProps = (\n inputProps: InputProps = {}\n ): InputProps \| undefined => {\n if (currentValue === undefined) return undefined;\n return {\n ...inputProps,\n inputProps: {\n role: \"spinbutton\",\n \"aria-invalid\": isOutOfRange(),\n \"aria-valuemax\": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),\n \"aria-valuemin\": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),\n \"aria-valuenow\": toFloat(\n toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)\n ),\n id: inputId,\n ...inputProps.inputProps,\n },\n onBlur: callAll(inputProps.onBlur, handleInputBlur),\n onChange: callAll(inputProps.onChange, handleInputChange),\n onFocus: callAll(inputProps.onFocus, handleInputFocus),\n onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),\n value: String(currentValue),\n };\n };\n\n return {\n decrementButtonDown: arrowDownButtonDown \|\| pgDnButtonDown,\n getButtonIcon,\n getButtonProps,\n getInputProps,\n incrementButtonDown: arrowUpButtonDown \|\| pgUpButtonDown,\n isAtMax,\n isAtMin,\n refreshCurrentValue,\n stepperDirection,\n valuesHaveDiverged,\n };\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, MutableRefObject } from \"react\";\nimport { ButtonProps, useControlled, useId } from \"@salt-ds/core\";\nimport { InputProps } from \"../input\";\nimport { useDynamicAriaLabel } from \"./internal/useDynamicAriaLabel\";\nimport { useSpinner } from \"./internal/useSpinner\";\nimport { StepperInputProps } from \"./StepperInput\";\n\ntype Direction = \"decrement\" \| \"increment\";\n\nconst stepperDirection = {\n INCREMENT: \"increment\" as Direction,\n DECREMENT: \"decrement\" as Direction,\n};\n\n// The input should only accept numbers, decimal points, and plus/minus symbols\nconst ACCEPT_INPUT = /^[-+]?[0-9]\\.?([0-9]+)?/g;\n\nconst callAll =\n (...fns: any[]) =>\n (...args: any[]) =>\n fns.forEach((fn) => fn && fn(...args));\n\nconst toFixedDecimalPlaces = (inputNumber: number, decimalPlaces: number) =>\n inputNumber.toFixed(decimalPlaces);\n\nconst isAllowedNonNumeric = (inputCharacter: number \| string) => {\n if (typeof inputCharacter === \"number\") return;\n return (\n (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) \|\|\n inputCharacter === \"\"\n );\n};\n\nconst toFloat = (inputValue: number \| string) => {\n // Plus, minus, and empty characters are treated as 0\n if (isAllowedNonNumeric(inputValue)) return 0;\n return parseFloat(inputValue.toString());\n};\n\nconst santizedInput = (numberString: string) =>\n (numberString.match(ACCEPT_INPUT) \|\| []).join(\"\");\n\nconst getButtonIcon = (type: Direction) =>\n type === stepperDirection.INCREMENT ? \"triangle-up\" : \"triangle-down\";\n\nexport const useStepperInput = (\n props: StepperInputProps,\n inputRef: MutableRefObject<HTMLInputElement \| null>\n) => {\n const {\n block = 10,\n decimalPlaces = 0,\n defaultValue = 0,\n liveValue,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange,\n step = 1,\n value,\n InputProps: inputPropsProp = {},\n } = props;\n\n const [currentValue, setCurrentValue, isControlled] = useControlled({\n controlled: value,\n default: toFixedDecimalPlaces(defaultValue, decimalPlaces),\n name: \"stepper-input\",\n });\n const inputId = useId(inputPropsProp.id);\n\n const isOutOfRange = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) > max \|\| toFloat(currentValue) < min;\n };\n\n const isAtMax = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) >= max \|\| (max === 0 && currentValue === \"\");\n };\n\n const isAtMin = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) <= min \|\| (min === 0 && currentValue === \"\");\n };\n\n const valuesHaveDiverged = () => {\n if (liveValue === undefined \|\| currentValue === undefined) return false;\n return (\n toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !==\n toFloat(currentValue)\n );\n };\n\n const { setHasAnnounced } = useDynamicAriaLabel(\n \", value out of date\",\n liveValue !== undefined,\n inputRef,\n currentValue,\n valuesHaveDiverged\n );\n\n const decrement = () => {\n if (currentValue === undefined \|\| isAtMin()) return;\n let nextValue = currentValue === \"\" ? -step : toFloat(currentValue) - step;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const decrementBlock = () => {\n if (currentValue === undefined \|\| isAtMin()) return;\n let nextValue =\n currentValue === \"\"\n ? block -step\n : toFloat(currentValue) - step * block;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const increment = () => {\n if (currentValue === undefined \|\| isAtMax()) return;\n let nextValue = currentValue === \"\" ? step : toFloat(currentValue) + step;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const incrementBlock = () => {\n if (currentValue === undefined \|\| isAtMax()) return;\n let nextValue =\n currentValue === \"\" ? block * step : toFloat(currentValue) + step * block;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const setNextValue = (modifiedValue: number) => {\n let nextValue = modifiedValue;\n if (nextValue < min) nextValue = min;\n if (nextValue > max) nextValue = max;\n\n const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n if (isNaN(toFloat(roundedValue))) return;\n\n if (!isControlled) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } =\n useSpinner(decrementBlock, isAtMin());\n\n const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } =\n useSpinner(decrement, isAtMin());\n\n const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } =\n useSpinner(incrementBlock, isAtMax());\n\n const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } =\n useSpinner(increment, isAtMax());\n\n const handleInputBlur = () => {\n if (currentValue === undefined) return;\n\n const roundedValue = toFixedDecimalPlaces(\n toFloat(currentValue),\n decimalPlaces\n );\n\n if (\n currentValue !== \"\" &&\n !isAllowedNonNumeric(currentValue) &&\n !isControlled\n ) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const handleInputFocus = () => {\n setHasAnnounced(false);\n };\n\n const handleInputChange = (event: KeyboardEvent) => {\n const changedValue = (event.currentTarget as HTMLInputElement).value;\n\n if (!isControlled) {\n setCurrentValue(santizedInput(changedValue));\n }\n\n if (onChange) {\n onChange(santizedInput(changedValue));\n }\n };\n\n const handleInputKeyDown = (event: KeyboardEvent) => {\n if ([\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"ArrowUp\" ? incrementSpinner() : decrementSpinner();\n }\n if ([\"PageUp\", \"PageDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"PageUp\"\n ? incrementSpinnerBlock()\n : decrementSpinnerBlock();\n }\n };\n\n const handleButtonMouseDown = (\n event: MouseEvent<HTMLButtonElement>,\n type: Direction = stepperDirection.INCREMENT\n ) => {\n if (event.nativeEvent.button !== 0) return;\n type === stepperDirection.INCREMENT\n ? incrementSpinner()\n : decrementSpinner();\n };\n\n const handleButtonMouseUp = () => inputRef.current?.focus();\n\n const refreshCurrentValue = () => {\n const refreshedcurrentValue =\n liveValue !== undefined ? liveValue : defaultValue;\n if (refreshedcurrentValue === undefined) return;\n\n setCurrentValue(\n toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n );\n\n inputRef.current?.focus();\n\n if (onChange) {\n onChange(\n toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n );\n }\n };\n\n const getButtonProps = (\n type: Direction = stepperDirection.INCREMENT,\n buttonPropsProp: ButtonProps = {}\n ) => ({\n \"aria-hidden\": true,\n \"data-testid\": `${type}-button`,\n tabIndex: -1,\n ...buttonPropsProp,\n onMouseDown: callAll(\n (event: MouseEvent<HTMLButtonElement>) =>\n handleButtonMouseDown(event, type),\n buttonPropsProp.onMouseDown\n ),\n onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp),\n });\n\n const getInputProps = (\n inputProps: InputProps = {}\n ): InputProps \| undefined => {\n if (currentValue === undefined) return undefined;\n return {\n ...inputProps,\n inputProps: {\n role: \"spinbutton\",\n \"aria-invalid\": isOutOfRange(),\n \"aria-valuemax\": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),\n \"aria-valuemin\": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),\n \"aria-valuenow\": toFloat(\n toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)\n ),\n id: inputId,\n ...inputProps.inputProps,\n },\n onBlur: callAll(inputProps.onBlur, handleInputBlur),\n onChange: callAll(inputProps.onChange, handleInputChange),\n onFocus: callAll(inputProps.onFocus, handleInputFocus),\n onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),\n value: String(currentValue),\n };\n };\n\n return {\n decrementButtonDown: arrowDownButtonDown \|\| pgDnButtonDown,\n getButtonIcon,\n getButtonProps,\n getInputProps,\n incrementButtonDown: arrowUpButtonDown \|\| pgUpButtonDown,\n isAtMax,\n isAtMin,\n refreshCurrentValue,\n stepperDirection,\n valuesHaveDiverged,\n };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/tabs/Tabstrip.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-height: 1px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-thumb-inset: -1px 0 0 0;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-palette-interact-background-active);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-height: 1px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-thumb-inset: -1px 0 0 0;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/lab/src/toggle-button/ToggleButton.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = ".salt-density-touch {\n  --toggleButton-icon-padding: 11px;\n}\n\n.salt-density-low {\n  --toggleButton-icon-padding: 7px;\n}\n\n.salt-density-medium {\n  --toggleButton-icon-padding: 5px;\n}\n\n.salt-density-high {\n  --toggleButton-icon-padding: 1px;\n}\n\n.saltToggleButton-horizontal.saltToggleButton-iconOnly {\n  padding: var(--saltToggleButton-icon-padding, var(--toggleButton-icon-padding));\n}\n\n/* CTA */\n.saltToggleButton-cta {\n  --saltButton-background: var(--salt-selectable-background);\n  --saltButton-background-hover: var(--salt-selectable-cta-background-hover);\n  --saltButton-background-active: var(--salt-selectable-cta-background-selected);\n  --saltButton-background-disabled: var(--salt-selectable-background-disabled);\n\n  --saltButton-text-color: var(--salt-selectable-cta-foreground);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-cta-foreground-selected);\n  --saltButton-text-color-disabled: var(--salt-selectable-cta-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground);\n}\n.saltToggleButton-cta.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-background-hover: var(--salt-selectable-background-disabled);\n  --saltButton-background-active: var(--salt-selectable-cta-background-disabled);\n\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-disabled);\n  --saltButton-text-color-active: var(--salt-selectable-cta-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground-disabled);\n}\n.saltToggleButton-cta.saltToggleButton-disabled {\n  --saltButton-background-active: var(--salt-selectable-cta-background-selectedDisabled);\n  --saltButton-text-color-active: var(--salt-selectable-cta-foreground-selectedDisabled);\n  --saltIcon-color-active: var(--salt-selectable-cta-foreground-selectedDisabled);\n}\n.saltToggleButton-cta.saltToggleButton-toggled {\n  --saltButton-background: var(--salt-selectable-cta-background-selected);\n  --saltButton-background-hover: var(--salt-selectable-cta-background-selected);\n\n  --saltButton-text-color: var(--salt-selectable-cta-foreground-selected);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-selected);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground-selected);\n}\n.saltToggleButton-cta.saltToggleButton-toggled.saltToggleButton-disabled {\n  --saltButton-background-disabled: var(--salt-selectable-cta-background-selectedDisabled);\n  --saltButton-background-hover: var(--salt-selectable-cta-background-selectedDisabled);\n\n  --saltButton-text-color-disabled: var(--salt-selectable-cta-foreground-selectedDisabled);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-selectedDisabled);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground-selectedDisabled);\n}\n\n/* Primary */\n.saltToggleButton-primary {\n  --saltButton-background: var(--salt-selectable-background);\n  --saltButton-background-hover: var(--salt-selectable-primary-background-hover);\n  --saltButton-background-active: var(--salt-selectable-primary-background-selected);\n  --saltButton-background-disabled: var(--salt-selectable-primary-background-disabled);\n\n  --saltButton-text-color: var(--salt-selectable-primary-foreground);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-primary-foreground-selected);\n  --saltButton-text-color-disabled: var(--salt-selectable-primary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground);\n}\n.saltToggleButton-primary.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-background-active: var(--salt-selectable-primary-background-disabled);\n  --saltButton-background-hover: var(--salt-selectable-background-disabled);\n\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-disabled);\n  --saltButton-text-color-active: var(--salt-selectable-primary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground-disabled);\n}\n.saltToggleButton-primary.saltToggleButton-disabled.saltButton-active {\n  --saltButton-background-active: var(--salt-selectable-primary-background-selectedDisabled);\n  --saltButton-text-color-active: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n.saltToggleButton-primary.saltToggleButton-toggled {\n  --saltButton-background: var(--salt-selectable-primary-background-selected);\n  --saltButton-background-hover: var(--salt-selectable-primary-background-selected);\n\n  --saltButton-text-color: var(--salt-selectable-primary-foreground-selected);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-selected);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground-selected);\n}\n.saltToggleButton-primary.saltToggleButton-toggled.saltToggleButton-disabled {\n  --saltButton-background-disabled: var(--salt-selectable-primary-background-selectedDisabled);\n  --saltButton-background-hover: var(--salt-selectable-primary-background-selectedDisabled);\n\n  --saltButton-text-color-disabled: var(--salt-selectable-primary-foreground-selectedDisabled);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-selectedDisabled);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n\n/* Secondary */\n.saltToggleButton-secondary {\n  --saltButton-background: var(--salt-selectable-background);\n  --saltButton-background-hover: var(--salt-selectable-secondary-background-hover);\n  --saltButton-background-active: var(--salt-selectable-secondary-background-selected);\n  --saltButton-background-disabled: var(--salt-selectable-background-disabled);\n\n  --saltButton-text-color: var(--salt-selectable-secondary-foreground);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-secondary-foreground-selected);\n  --saltButton-text-color-disabled: var(--salt-selectable-secondary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-secondary-foreground);\n}\n.saltToggleButton-secondary.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-background-active: var(--salt-selectable-secondary-background-disabled);\n  --saltButton-background-hover: var(--salt-selectable-background-disabled);\n\n  --saltButton-text-color-active: var(--salt-selectable-secondary-foreground-disabled);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-secondary-foreground-disabled);\n}\n.saltToggleButton-secondary.saltToggleButton-disabled.saltButton-active {\n  --saltButton-background-active: var(--salt-selectable-secondary-background-selectedDisabled);\n  --saltButton-text-color-active: var(--salt-selectable-secondary-foreground-selectedDisabled);\n  --saltIcon-color-active: var(--salt-selectable-secondary-foreground-selectedDisabled);\n}\n.saltToggleButton-secondary.saltToggleButton-toggled {\n  --saltButton-background: var(--salt-selectable-secondary-background-selected);\n  --saltButton-background-hover: var(--salt-selectable-secondary-background-selected);\n\n  --saltButton-text-color: var(--salt-selectable-secondary-foreground-selected);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-selected);\n\n  --saltIcon-color: var(--salt-selectable-secondary-foreground-selected);\n}\n.saltToggleButton-secondary.saltToggleButton-toggled.saltToggleButton-disabled {\n  --saltButton-background-disabled: var(--salt-selectable-secondary-background-selectedDisabled);\n  --saltButton-background-hover: var(--salt-selectable-secondary-background-selectedDisabled);\n  --saltButton-text-color-disabled: var(--salt-selectable-secondary-foreground-selectedDisabled);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-selectedDisabled);\n  --saltIcon-color: var(--salt-selectable-secondary-foreground-selectedDisabled);\n}\n";
+var css_248z = ".salt-density-touch {\n  --toggleButton-icon-padding: 11px;\n}\n\n.salt-density-low {\n  --toggleButton-icon-padding: 7px;\n}\n\n.salt-density-medium {\n  --toggleButton-icon-padding: 5px;\n}\n\n.salt-density-high {\n  --toggleButton-icon-padding: 1px;\n}\n\n.saltToggleButton-horizontal.saltToggleButton-iconOnly {\n  padding: var(--saltToggleButton-icon-padding, var(--toggleButton-icon-padding));\n}\n\n.saltToggleButton {\n  --saltButton-text-color: var(--salt-text-primary-foreground);\n  --saltButton-text-color-disabled: var(--salt-text-primary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-text-primary-foreground);\n}\n\n.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-text-color-active: var(--salt-text-primary-foreground-disabled);\n  --saltButton-text-color-hover: var(--salt-text-primary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* CTA */\n.saltToggleButton-cta {\n  --saltButton-background: var(--salt-selectable-background);\n  --saltButton-background-hover: var(--salt-selectable-cta-background-hover);\n  --saltButton-background-active: var(--salt-selectable-cta-background-selected);\n  --saltButton-background-disabled: var(--salt-selectable-background-disabled);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-cta-foreground-selected);\n}\n.saltToggleButton-cta.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-background-hover: var(--salt-selectable-background-disabled);\n  --saltButton-background-active: var(--salt-selectable-cta-background-disabled);\n}\n.saltToggleButton-cta.saltToggleButton-disabled {\n  --saltButton-background-active: var(--salt-selectable-cta-background-selectedDisabled);\n  --saltButton-text-color-active: var(--salt-selectable-cta-foreground-selectedDisabled);\n\n  --saltIcon-color-active: var(--salt-selectable-cta-foreground-selectedDisabled);\n}\n.saltToggleButton-cta.saltToggleButton-toggled {\n  --saltButton-background: var(--salt-selectable-cta-background-selected);\n  --saltButton-background-hover: var(--salt-selectable-cta-background-selected);\n  --saltButton-text-color: var(--salt-selectable-cta-foreground-selected);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-selected);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground-selected);\n}\n.saltToggleButton-cta.saltToggleButton-toggled.saltToggleButton-disabled {\n  --saltButton-background-disabled: var(--salt-selectable-cta-background-selectedDisabled);\n  --saltButton-background-hover: var(--salt-selectable-cta-background-selectedDisabled);\n  --saltButton-text-color-disabled: var(--salt-selectable-cta-foreground-selectedDisabled);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-selectedDisabled);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground-selectedDisabled);\n}\n\n/* Primary */\n.saltToggleButton-primary {\n  --saltButton-background: var(--salt-selectable-background);\n  --saltButton-background-hover: var(--salt-selectable-primary-background-hover);\n  --saltButton-background-active: var(--salt-selectable-primary-background-selected);\n  --saltButton-background-disabled: var(--salt-selectable-primary-background-disabled);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-primary-foreground-selected);\n}\n.saltToggleButton-primary.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-background-active: var(--salt-selectable-primary-background-disabled);\n  --saltButton-background-hover: var(--salt-selectable-background-disabled);\n}\n.saltToggleButton-primary.saltToggleButton-disabled.saltButton-active {\n  --saltButton-background-active: var(--salt-selectable-primary-background-selectedDisabled);\n  --saltButton-text-color-active: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n.saltToggleButton-primary.saltToggleButton-toggled {\n  --saltButton-background: var(--salt-selectable-primary-background-selected);\n  --saltButton-background-hover: var(--salt-selectable-primary-background-selected);\n  --saltButton-text-color: var(--salt-selectable-primary-foreground-selected);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-selected);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground-selected);\n}\n.saltToggleButton-primary.saltToggleButton-toggled.saltToggleButton-disabled {\n  --saltButton-background-disabled: var(--salt-selectable-primary-background-selectedDisabled);\n  --saltButton-background-hover: var(--salt-selectable-primary-background-selectedDisabled);\n  --saltButton-text-color-disabled: var(--salt-selectable-primary-foreground-selectedDisabled);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-selectedDisabled);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n\n/* Secondary */\n.saltToggleButton-secondary {\n  --saltButton-background: var(--salt-selectable-background);\n  --saltButton-background-hover: var(--salt-selectable-secondary-background-hover);\n  --saltButton-background-active: var(--salt-selectable-secondary-background-selected);\n  --saltButton-background-disabled: var(--salt-selectable-background-disabled);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-secondary-foreground-selected);\n}\n.saltToggleButton-secondary.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-background-active: var(--salt-selectable-secondary-background-disabled);\n  --saltButton-background-hover: var(--salt-selectable-background-disabled);\n}\n.saltToggleButton-secondary.saltToggleButton-disabled.saltButton-active {\n  --saltButton-background-active: var(--salt-selectable-secondary-background-selectedDisabled);\n  --saltButton-text-color-active: var(--salt-selectable-secondary-foreground-selectedDisabled);\n\n  --saltIcon-color-active: var(--salt-selectable-secondary-foreground-selectedDisabled);\n}\n.saltToggleButton-secondary.saltToggleButton-toggled {\n  --saltButton-background: var(--salt-selectable-secondary-background-selected);\n  --saltButton-background-hover: var(--salt-selectable-secondary-background-selected);\n  --saltButton-text-color: var(--salt-selectable-secondary-foreground-selected);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-selected);\n\n  --saltIcon-color: var(--salt-selectable-secondary-foreground-selected);\n}\n.saltToggleButton-secondary.saltToggleButton-toggled.saltToggleButton-disabled {\n  --saltButton-background-disabled: var(--salt-selectable-secondary-background-selectedDisabled);\n  --saltButton-background-hover: var(--salt-selectable-secondary-background-selectedDisabled);\n  --saltButton-text-color-disabled: var(--salt-selectable-secondary-foreground-selectedDisabled);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-selectedDisabled);\n\n  --saltIcon-color: var(--salt-selectable-secondary-foreground-selectedDisabled);\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/lab/src/toolbar/Tooltray.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = ".saltTooltray {\n  --toolbar-tooltray-height: var(--toolbar-size);\n}\n\n.saltTooltray {\n  background: inherit;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  overflow: hidden;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n.saltTooltray-horizontal {\n  height: var(--toolbar-tooltray-height);\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n.saltTooltray > .Responsive-inner {\n  align-items: center;\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  gap: 0 !important;\n  justify-content: inherit;\n}\n\n/* .saltTooltray-horizontal > .Responsive-inner > :not(:last-child) { */\n.saltTooltray-horizontal > .Responsive-inner > * {\n  margin-top: var(--salt-size-unit);\n  margin-right: var(--salt-size-unit);\n}\n\n/* .saltTooltray-horizontal:first-child {\n  padding-left: var(--salt-size-unit);\n} */\n/* .saltTooltray-horizontal:last-child {\n  padding-right: var(--salt-size-unit);\n} */\n\n.saltTooltray-horizontal:not(:first-child) {\n  margin-left: var(--salt-size-unit);\n  padding-left: calc(var(--salt-size-unit) * 2);\n}\n.saltTooltray-horizontal:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  background: #c5c9d0;\n  top: 8px;\n  left: 0;\n  width: 1px;\n  height: 28px;\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n  flex: 0 0 auto;\n}\n\n.saltTooltray > .Responsive-inner > *[data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"] {\n  flex-shrink: 0;\n}\n.saltTooltray[data-collapsible=\"dynamic\"] > .Responsive-inner {\n  flex-wrap: wrap;\n}\n.saltTooltray[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsed=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n}\n";
+var css_248z = ".saltTooltray {\n  --toolbar-tooltray-height: var(--toolbar-size);\n}\n\n.saltTooltray {\n  background: inherit;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  overflow: hidden;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n.saltTooltray-horizontal {\n  height: var(--toolbar-tooltray-height);\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n.saltTooltray > .Responsive-inner {\n  align-items: center;\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  gap: 0 !important;\n  justify-content: inherit;\n}\n\n/* .saltTooltray-horizontal > .Responsive-inner > :not(:last-child) { */\n.saltTooltray-horizontal > .Responsive-inner > * {\n  margin-top: var(--salt-size-unit);\n  margin-right: var(--salt-size-unit);\n}\n\n/* .saltTooltray-horizontal:first-child {\n  padding-left: var(--salt-size-unit);\n} */\n/* .saltTooltray-horizontal:last-child {\n  padding-right: var(--salt-size-unit);\n} */\n\n.saltTooltray-horizontal:not(:first-child) {\n  margin-left: var(--salt-size-unit);\n  padding-left: calc(var(--salt-size-unit) * 2);\n}\n.saltTooltray-horizontal:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  background: var(--salt-separable-primary-borderColor);\n  top: 8px;\n  left: 0;\n  width: 1px;\n  height: 28px;\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n  flex: 0 0 auto;\n}\n\n.saltTooltray > .Responsive-inner > *[data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"] {\n  flex-shrink: 0;\n}\n.saltTooltray[data-collapsible=\"dynamic\"] > .Responsive-inner {\n  flex-wrap: wrap;\n}\n.saltTooltray[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsed=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/lab/src/toolbar/toolbar-field/useToolbarField.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { isValidElement, useCallback } from 'react';
+import { useCallback, isValidElement } from 'react';
 import { ToolbarButton } from '../ToolbarButton.js';
 const NullActivationIndicator = () => null;

package/dist-es/packages/lab/src/utils/useEventCallback.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useRef, useCallback } from 'react';
 import { useIsomorphicLayoutEffect } from '@salt-ds/core';
 function useEventCallback(fn) {

package/dist-types/color-chooser/Color.d.ts CHANGED Viewed

@@ -8,6 +8,8 @@ export declare class Color {
     private color;
     get hex(): string;
     get rgba(): RGBAValue;
+    /** E.g. Orange800 */
+    get colorName(): string | undefined;
     static makeColorFromHex(hexValue: string | undefined): Color | undefined;
     static makeColorFromRGB(r: number, g: number, b: number, a?: number): Color;
     setAlpha(alpha: number): Color;

package/dist-types/color-chooser/ColorHelpers.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
-export declare function getColorNameByHexValue(hexValue: string | undefined, disableAlpha?: boolean, saltColorOverrides?: Record<string, string>): string | undefined;
+export declare function getColorNameByHexValue(hexValue: string | undefined, disableAlpha?: boolean, saltColorOverrides?: Record<string, string>,
+/** When disabled, color names not recognized will be undefined instead of hex values */
+disableFallBackToHex?: boolean): string | undefined;
 export declare function hexValueWithoutAlpha(hexValue: string | undefined): string | undefined;
 export declare function getHexValue(hexValue: string | undefined, disableAlpha: boolean): string | undefined;
 export declare const isValidHex: (hex: string | undefined) => boolean;