@salt-ds/core 1.71.0 → 1.73.0

package/dist-cjs/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  useClassNameInjection,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useRef,\n} from \"react\";\nimport {\n  type FormFieldValidationStatus,\n  useFormFieldProps,\n} from \"../form-field-context\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n  defaultValueToString,\n  type ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  type UseFloatingUIProps,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport interface DropdownProps<Item = string>\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n    ListControlProps<Item> {\n  /**\n   * If `true`, the dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the dropdown will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The options to display in the dropdown.\n   */\n  children?: ReactNode;\n  /**\n   * The marker to use in an empty read only dropdown.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * If `true`, the dropdown will be multiselect.\n   */\n  multiselect?: boolean;\n  /**\n   * The text shown when the dropdown has no value.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the dropdown will be required.\n   */\n  required?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"error\" | \"warning\" | \"success\".\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /** Styling variant with a full border. Defaults to false\n   */\n  bordered?: boolean;\n  /**\n   *  Props to pass to Dropdown's overlay.\n   */\n  OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n    DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  return open ? (\n    <CollapseIcon className={withBaseName(\"toggle\")} aria-hidden />\n  ) : (\n    <ExpandIcon className={withBaseName(\"toggle\")} aria-hidden />\n  );\n}\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n  props: DropdownProps<Item>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const { className, props: finalProps } = useClassNameInjection(\n    \"saltDropdown\",\n    props,\n  );\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    children,\n    disabled: disabledProp,\n    emptyReadOnlyMarker = \"—\",\n    readOnly: readOnlyProp,\n    multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    value,\n    onOpenChange,\n    open,\n    placeholder,\n    startAdornment,\n    required: requiredProp,\n    variant = \"primary\",\n    validationStatus: validationStatusProp,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    valueToString = defaultValueToString,\n    bordered = false,\n    OverlayProps,\n    ...rest\n  } = finalProps;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown\",\n    css: dropdownCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n  const required = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : requiredProp;\n  const listControl = useListControl<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    setListRef,\n  } = listControl;\n\n  const selectedValue = selectedState\n    .map((item) => valueToString(item))\n    .join(\", \");\n  const displayedValue = value ?? selectedValue;\n  const valueText =\n    readOnly && displayedValue === \"\" ? emptyReadOnlyMarker : displayedValue;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n  };\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && Children.count(children) > 0,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            elements.floating.style.setProperty(\n              \"--overlay-minWidth\",\n              `${rects.reference.width}px`,\n            );\n            elements.floating.style.setProperty(\n              \"--overlay-maxHeight\",\n              `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            );\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context),\n  ]);\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n  const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>();\n\n  const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (typeaheadTimeout.current) {\n      clearTimeout(typeaheadTimeout.current);\n    }\n    typeaheadString.current += event.key;\n    typeaheadTimeout.current = window.setTimeout(() => {\n      typeaheadString.current = \"\";\n    }, 500);\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n    if (!newOption) {\n      newOption = getOptionFromSearch(typeaheadString.current);\n    }\n\n    if (newOption) {\n      setActive(newOption);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleTypeahead(event);\n    }\n\n    const activeOption = activeState ?? getFirstOption()?.data;\n\n    if (activeOption === undefined) {\n      return;\n    }\n\n    let newActive:\n      | { data: OptionValue<Item>; element: HTMLElement }\n      | undefined;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAfter(activeOption) ?? getLastOption();\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionBefore(activeOption) ?? getFirstOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        newActive = getOptionPageAbove(activeOption);\n        break;\n      case \"PageDown\":\n        newActive = getOptionPageBelow(activeOption);\n        break;\n      case \"Enter\":\n      case \" \":\n        if (\n          (openState && Boolean(activeState?.disabled)) ||\n          (typeaheadString.current.trim().length > 0 && event.key === \" \")\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        event.preventDefault();\n        select(event, activeState);\n\n        break;\n      case \"Tab\":\n        if (!multiselect && activeState) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusedState(false);\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n    }\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleFocusButton = () => {\n    buttonRef.current?.focus();\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    // If the list is closed we should clear the active item\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive: ReturnType<typeof getFirstOption>;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > 0) {\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n      }\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getFirstOption();\n    }\n\n    setActive(newActive?.data);\n  }, [openState, children]);\n\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(setListRef, floating);\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <button\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n            [withBaseName(\"bordered\")]: bordered,\n          },\n          className,\n        )}\n        ref={handleButtonRef}\n        role=\"combobox\"\n        type=\"button\"\n        disabled={disabled}\n        aria-readonly={readOnly ? \"true\" : undefined}\n        aria-required={required ? \"true\" : undefined}\n        aria-expanded={openState}\n        aria-activedescendant={activeState?.id}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        aria-controls={openState ? listId : undefined}\n        {...getReferenceProps({\n          onKeyDown: handleKeyDown,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          ...rest,\n        })}\n      >\n        {startAdornment && (\n          <div className={withBaseName(\"startAdornmentContainer\")}>\n            {startAdornment}\n          </div>\n        )}\n        <span\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"placeholder\")]: !valueText,\n          })}\n        >\n          {!valueText ? placeholder : valueText}\n        </span>\n        {!disabled && validationStatus && (\n          <StatusAdornment status={validationStatus} />\n        )}\n        {!readOnly && <ExpandIcon open={openState} />}\n        <div className={withBaseName(\"activationIndicator\")} />\n      </button>\n      <OptionList\n        aria-multiselectable={multiselect}\n        open={\n          (openState || focusedState) &&\n          !readOnly &&\n          Children.count(children) > 0\n        }\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusButton,\n          onClick: handleFocusButton,\n          ...OverlayProps,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        ref={handleListRef}\n        id={listId}\n        collapsed={!openState}\n      >\n        {children}\n      </OptionList>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","ExpandIcon","useIcon","jsx","forwardRef","Dropdown","useClassNameInjection","defaultValueToString","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingUI","Children","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useRef","useForkRef","_a","useEffect","useId","jsxs","ListControlContext","clsx","StatusAdornment","OptionList"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  useClassNameInjection,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useRef,\n} from \"react\";\nimport {\n  type FormFieldValidationStatus,\n  useFormFieldProps,\n} from \"../form-field-context\";\nimport {\n  getListControlNavigationTarget,\n  isListControlNavigationKey,\n  isModifiedListControlNavigationKey,\n  type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport {\n  defaultValueToString,\n  type ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  type UseFloatingUIProps,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport interface DropdownProps<Item = string>\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n    ListControlProps<Item> {\n  /**\n   * If `true`, the dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the dropdown will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The options to display in the dropdown.\n   */\n  children?: ReactNode;\n  /**\n   * The marker to use in an empty read only dropdown.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * If `true`, the dropdown will be multiselect.\n   */\n  multiselect?: boolean;\n  /**\n   * The text shown when the dropdown has no value.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the dropdown will be required.\n   */\n  required?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"error\" | \"warning\" | \"success\".\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /** Styling variant with a full border. Defaults to false\n   */\n  bordered?: boolean;\n  /**\n   *  Props to pass to Dropdown's overlay.\n   */\n  OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n    DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  return open ? (\n    <CollapseIcon className={withBaseName(\"toggle\")} aria-hidden />\n  ) : (\n    <ExpandIcon className={withBaseName(\"toggle\")} aria-hidden />\n  );\n}\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n  props: DropdownProps<Item>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const { className, props: finalProps } = useClassNameInjection(\n    \"saltDropdown\",\n    props,\n  );\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    children,\n    disabled: disabledProp,\n    emptyReadOnlyMarker = \"—\",\n    readOnly: readOnlyProp,\n    multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    value,\n    onOpenChange,\n    open,\n    placeholder,\n    startAdornment,\n    required: requiredProp,\n    variant = \"primary\",\n    validationStatus: validationStatusProp,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    valueToString = defaultValueToString,\n    bordered = false,\n    OverlayProps,\n    ...rest\n  } = finalProps;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown\",\n    css: dropdownCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n  const required = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : requiredProp;\n  const listControl = useListControl<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    setListRef,\n  } = listControl;\n\n  const selectedValue = selectedState\n    .map((item) => valueToString(item))\n    .join(\", \");\n  const displayedValue = value ?? selectedValue;\n  const valueText =\n    readOnly && displayedValue === \"\" ? emptyReadOnlyMarker : displayedValue;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n  };\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && Children.count(children) > 0,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            elements.floating.style.setProperty(\n              \"--overlay-minWidth\",\n              `${rects.reference.width}px`,\n            );\n            elements.floating.style.setProperty(\n              \"--overlay-maxHeight\",\n              `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            );\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context),\n  ]);\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n  const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>(undefined);\n\n  const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (typeaheadTimeout.current) {\n      clearTimeout(typeaheadTimeout.current);\n    }\n    typeaheadString.current += event.key;\n    typeaheadTimeout.current = window.setTimeout(() => {\n      typeaheadString.current = \"\";\n    }, 500);\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    const newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n    if (newOption) {\n      setActive(newOption);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (readOnly || isModifiedListControlNavigationKey(event)) {\n      return;\n    }\n\n    if (!openState) {\n      if (\n        event.key === \"ArrowDown\" ||\n        event.key === \"ArrowUp\" ||\n        event.key === \"Home\" ||\n        event.key === \"End\"\n      ) {\n        event.preventDefault();\n        setOpen(true, undefined, event.key);\n        return;\n      }\n\n      // The list is hidden, so leave PageUp/PageDown to scroll the page.\n      if (isListControlNavigationKey(event.key)) {\n        return;\n      }\n    }\n\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleTypeahead(event);\n    }\n\n    const activeOption = activeState ?? getFirstOption()?.data;\n\n    if (activeOption === undefined) {\n      return;\n    }\n\n    const isNavigationKey = isListControlNavigationKey(event.key);\n    if (isNavigationKey) {\n      event.preventDefault();\n    }\n\n    const newActive: OptionAndElement<Item> | undefined = isNavigationKey\n      ? getListControlNavigationTarget(event.key, activeOption, {\n          getFirstOption,\n          getLastOption,\n          getOptionAfter,\n          getOptionBefore,\n          getOptionPageAbove,\n          getOptionPageBelow,\n        })\n      : undefined;\n\n    switch (event.key) {\n      case \"Enter\":\n      case \" \":\n        if (\n          (openState && Boolean(activeState?.disabled)) ||\n          (typeaheadString.current.trim().length > 0 && event.key === \" \")\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        event.preventDefault();\n        select(event, activeState);\n\n        break;\n      case \"Tab\":\n        if (!multiselect && activeState) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      setActive(newActive.data);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusedState(false);\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n    }\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleFocusButton = () => {\n    buttonRef.current?.focus();\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    // If the list is closed we should clear the active item\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive: ReturnType<typeof getFirstOption>;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex >= 0) {\n      return;\n    }\n\n    // Home and End always open on the first or last option, even with a selection.\n    if (openKey.current === \"Home\") {\n      newActive = getFirstOption();\n    } else if (openKey.current === \"End\") {\n      newActive = getLastOption();\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (!newActive && selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n      }\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getFirstOption();\n    }\n\n    setActive(newActive?.data);\n  }, [openState, children]);\n\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(setListRef, floating);\n\n  return (\n    <ListControlProvider value={listControl}>\n      <button\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n            [withBaseName(\"bordered\")]: bordered,\n          },\n          className,\n        )}\n        ref={handleButtonRef}\n        role=\"combobox\"\n        type=\"button\"\n        disabled={disabled}\n        aria-readonly={readOnly ? \"true\" : undefined}\n        aria-required={required ? \"true\" : undefined}\n        aria-expanded={openState}\n        aria-activedescendant={activeState?.id}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        aria-controls={openState ? listId : undefined}\n        {...getReferenceProps({\n          onKeyDown: handleKeyDown,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          ...rest,\n        })}\n      >\n        {startAdornment && (\n          <div className={withBaseName(\"startAdornmentContainer\")}>\n            {startAdornment}\n          </div>\n        )}\n        <span\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"placeholder\")]: !valueText,\n          })}\n        >\n          {!valueText ? placeholder : valueText}\n        </span>\n        {!disabled && validationStatus && (\n          <StatusAdornment status={validationStatus} />\n        )}\n        {!readOnly && <ExpandIcon open={openState} />}\n        <div className={withBaseName(\"activationIndicator\")} />\n      </button>\n      <OptionList\n        aria-multiselectable={multiselect}\n        open={\n          (openState || focusedState) &&\n          !readOnly &&\n          Children.count(children) > 0\n        }\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusButton,\n          onClick: handleFocusButton,\n          ...OverlayProps,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        ref={handleListRef}\n        id={listId}\n        collapsed={!openState}\n      >\n        {children}\n      </OptionList>\n    </ListControlProvider>\n  );\n}) as <Item = string>(\n  props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => ReactElement;\n"],"names":["makePrefixer","ExpandIcon","useIcon","jsx","forwardRef","Dropdown","useClassNameInjection","defaultValueToString","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingUI","Children","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useRef","useForkRef","_a","isModifiedListControlNavigationKey","isListControlNavigationKey","getListControlNavigationTarget","useEffect","useId","jsxs","ListControlProvider","clsx","StatusAdornment","OptionList"],"mappings":"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"}

package/dist-cjs/file-drop-zone/FileDropZone.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border: var(--saltFileDropZone-border, var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-bold-borderColor));\n  border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));\n  flex-direction: column;\n  padding: var(--salt-spacing-200);\n  gap: var(--salt-spacing-200);\n  width: 100%;\n  font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n  box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n  background: var(--salt-target-background-hover);\n  border: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n  border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n  border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-success-borderColor);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-bold-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+var css_248z = ".saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border: var(--saltFileDropZone-border, var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-bold-borderColor));\n  border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));\n  flex-direction: column;\n  padding: var(--salt-spacing-200);\n  gap: var(--salt-spacing-200);\n  width: 100%;\n  font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltFileDropZone-letterSpacing, var(--salt-text-letterSpacing));\n  box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n  background: var(--salt-target-background-hover);\n  border: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n  border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n  border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-success-borderColor);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-bold-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FileDropZone.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 100%);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltFormField-labelTop {\n  gap: var(--salt-spacing-75);\n  grid-auto-rows: min-content;\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop.saltFormField-hasControls {\n  align-content: start;\n  grid-template-rows: min-content minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft.saltFormField-hasControls {\n  grid-template-rows: minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelRight {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight.saltFormField-hasControls {\n  grid-template-rows: minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-labelTop > :not(.saltFormFieldLabel):not(.saltFormFieldHelperText) {\n  align-self: center;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n\n@supports selector(:has(*)) {\n  .saltFormField:not(:has(.saltFormFieldLabel)) {\n    grid-template-areas: \"controls\";\n  }\n\n  .saltFormField-hasControls:not(:has(.saltFormFieldLabel)) {\n    grid-template-rows: minmax(var(--salt-size-base), auto);\n  }\n}\n";
+var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 100%);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltFormField-labelTop {\n  gap: var(--salt-spacing-75);\n  grid-auto-rows: min-content;\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop.saltFormField-hasControls {\n  align-content: start;\n  grid-template-rows: min-content minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft.saltFormField-hasControls {\n  grid-template-rows: minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelRight {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight.saltFormField-hasControls {\n  grid-template-rows: minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-labelTop > :not(.saltFormFieldLabel):not(.saltFormFieldHelperText) {\n  align-self: center;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n\n@supports selector(:has(*)) {\n  .saltFormField:not(:has(.saltFormFieldLabel)) {\n    grid-template-areas: \"controls\";\n  }\n\n  .saltFormField-hasControls:not(:has(.saltFormFieldLabel)) {\n    grid-template-rows: minmax(var(--salt-size-base), auto);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormField.css.js.map

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

@@ -30,7 +30,7 @@ function hasFormFieldControls(children) {
   });
 }
 const FormField = React.forwardRef(
-  ({
+  function FormField2({
     children,
     className,
     disabled = false,
@@ -40,7 +40,7 @@ const FormField = React.forwardRef(
     readOnly = false,
     validationStatus,
     ...restProps
-  }, ref) => {
+  }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-form-field",

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  Fragment,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useRef,\n} from \"react\";\nimport {\n  type A11yValueProps,\n  FormFieldContext,\n  type FormFieldValidationStatus,\n} from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\nimport { FormFieldHelperText } from \"./FormFieldHelperText\";\nimport { FormFieldLabel } from \"./FormFieldLabel\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: FormFieldValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nfunction hasFormFieldControls(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement<{ children?: ReactNode }>(child)) {\n      return true;\n    }\n\n    if (child.type === Fragment) {\n      return hasFormFieldControls(child.props.children);\n    }\n\n    return child.type !== FormFieldLabel && child.type !== FormFieldHelperText;\n  });\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formFieldRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, formFieldRef);\n\n    const formId = useId(idProp);\n    const hasControls = hasFormFieldControls(children);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"hasControls\")]: hasControls,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n            formFieldRef,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","Children","isValidElement","Fragment","FormFieldLabel","FormFieldHelperText","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useRef","useForkRef","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;;;AA2DA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAEjD,SAAS,qBAAqB,QAAA,EAA8B;AAC1D,EAAA,OAAOC,eAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAChD,IAAA,IAAI,CAACC,oBAAA,CAAyC,KAAK,CAAA,EAAG;AACpD,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,KAAA,CAAM,SAASC,cAAA,EAAU;AAC3B,MAAA,OAAO,oBAAA,CAAqB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAAA,IAClD;AAEA,IAAA,OAAO,KAAA,CAAM,IAAA,KAASC,6BAAA,IAAkB,KAAA,CAAM,IAAA,KAASC,uCAAA;AAAA,EACzD,CAAC,CAAA;AACH;AAEO,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,MAAA;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAA,GAAeC,aAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAAW,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAA,MAAM,MAAA,GAASC,YAAM,MAAM,CAAA;AAC3B,IAAA,MAAM,WAAA,GAAc,qBAAqB,QAAQ,CAAA;AAEjD,IAAA,MAAM,OAAA,GAAU,MAAA,GAAS,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,GAAK,MAAA;AAC7C,IAAA,MAAM,YAAA,GAAe,MAAA,GAAS,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,MAAA;AAEvD,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,WAAA;AAAA,YAC/B,CAAC,aAAa,CAAA,KAAA,EAAQC,qBAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA;AAAA,UAACG,iCAAA,CAAiB,QAAA;AAAA,UAAjB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,SAAA,EAAW;AAAA,gBACT,iBAAA,EAAmB,OAAA;AAAA,gBACnB,kBAAA,EAAoB;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  Fragment,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useRef,\n} from \"react\";\nimport {\n  type A11yValueProps,\n  FormFieldContext,\n  type FormFieldValidationStatus,\n} from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\nimport { FormFieldHelperText } from \"./FormFieldHelperText\";\nimport { FormFieldLabel } from \"./FormFieldLabel\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: FormFieldValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nfunction hasFormFieldControls(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement<{ children?: ReactNode }>(child)) {\n      return true;\n    }\n\n    if (child.type === Fragment) {\n      return hasFormFieldControls(child.props.children);\n    }\n\n    return child.type !== FormFieldLabel && child.type !== FormFieldHelperText;\n  });\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  function FormField(\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formFieldRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, formFieldRef);\n\n    const formId = useId(idProp);\n    const hasControls = hasFormFieldControls(children);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"hasControls\")]: hasControls,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n            formFieldRef,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","Children","isValidElement","Fragment","FormFieldLabel","FormFieldHelperText","forwardRef","FormField","useWindow","useComponentCssInjection","formFieldCss","useRef","useForkRef","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;;;AA2DA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAEjD,SAAS,qBAAqB,QAAA,EAA8B;AAC1D,EAAA,OAAOC,eAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAChD,IAAA,IAAI,CAACC,oBAAA,CAAyC,KAAK,CAAA,EAAG;AACpD,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,KAAA,CAAM,SAASC,cAAA,EAAU;AAC3B,MAAA,OAAO,oBAAA,CAAqB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAAA,IAClD;AAEA,IAAA,OAAO,KAAA,CAAM,IAAA,KAASC,6BAAA,IAAkB,KAAA,CAAM,IAAA,KAASC,uCAAA;AAAA,EACzD,CAAC,CAAA;AACH;AAEO,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,SAASC,UAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,MAAA;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAA,GAAeC,aAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAAW,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAA,MAAM,MAAA,GAASC,YAAM,MAAM,CAAA;AAC3B,IAAA,MAAM,WAAA,GAAc,qBAAqB,QAAQ,CAAA;AAEjD,IAAA,MAAM,OAAA,GAAU,MAAA,GAAS,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,GAAK,MAAA;AAC7C,IAAA,MAAM,YAAA,GAAe,MAAA,GAAS,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,MAAA;AAEvD,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,WAAA;AAAA,YAC/B,CAAC,aAAa,CAAA,KAAA,EAAQC,qBAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA;AAAA,UAACG,iCAAA,CAAiB,QAAA;AAAA,UAAjB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,SAAA,EAAW;AAAA,gBACT,iBAAA,EAAmB,OAAA;AAAA,gBACnB,kBAAA,EAAoB;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

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

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

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

@@ -9,6 +9,8 @@ var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 var StatusIndicator = require('../status-indicator/StatusIndicator.js');
 require('../text/Code.js');
 require('../text/Display.js');
+require('../text/Editorial.js');
+require('../text/Eyebrow.js');
 require('../text/Headings.js');
 require('../text/Label.js');
 var Text = require('../text/Text.js');

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormFieldLabel.saltText {\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n  width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-weight: var(--salt-text-fontWeight);\n  font-style: var(--salt-typography-textDecoration-italic);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n}\n";
+var css_248z = ".saltFormFieldLabel.saltText {\n  font-size: var(--formFieldLabel-fontSize);\n  line-height: var(--formFieldLabel-lineHeight);\n  font-weight: var(--saltFormField-label-fontWeight, var(--formFieldLabel-fontWeight));\n  width: 100%;\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n  width: fit-content;\n}\n\n.saltFormFieldLabel-label {\n  --formFieldLabel-fontSize: var(--salt-text-label-fontSize);\n  --formFieldLabel-lineHeight: var(--salt-text-label-lineHeight);\n  --formFieldLabel-fontWeight: var(--salt-text-label-fontWeight-bolder);\n  --formFieldLabel-necessity-fontWeight: var(--salt-text-label-fontWeight);\n}\n\n.saltFormFieldLabel-sentence {\n  --formFieldLabel-fontSize: var(--salt-text-fontSize);\n  --formFieldLabel-lineHeight: var(--salt-text-lineHeight);\n  --formFieldLabel-fontWeight: var(--salt-text-fontWeight-bolder);\n  --formFieldLabel-necessity-fontWeight: var(--salt-text-fontWeight);\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-style: var(--salt-typography-fontStyle-italic, italic);\n  font-weight: var(--formFieldLabel-necessity-fontWeight);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormFieldLabel.css.js.map

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

@@ -8,6 +8,8 @@ require('../form-field-context/FormFieldContext.js');
 var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 require('../text/Code.js');
 require('../text/Display.js');
+require('../text/Editorial.js');
+require('../text/Eyebrow.js');
 require('../text/Headings.js');
 var Label = require('../text/Label.js');
 require('../text/Text.js');
@@ -55,7 +57,7 @@ const FormFieldLabel = ({
       className: clsx.clsx(withBaseName(), withBaseName(intent), className),
       id,
       disabled,
-      variant: "secondary",
+      color: intent === "sentence" ? "primary" : "secondary",
       onClick: handleClick,
       ...restProps,
       children: [

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { MouseEvent } from \"react\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  onClick,\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const id = a11yProps?.[\"aria-labelledby\"];\n\n  const handleClick = (event: MouseEvent<HTMLLabelElement>) => {\n    if (formFieldRef?.current) {\n      const element = formFieldRef.current.querySelector<HTMLElement>(\n        `[aria-labelledby*=\"${id}\"]`,\n      );\n      element?.focus();\n      element?.click();\n    }\n    onClick?.(event);\n  };\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={id}\n      disabled={disabled}\n      variant=\"secondary\"\n      onClick={handleClick}\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAA,EAAW,YAAA,KAAiBC,mCAAA,EAAkB;AAC3E,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,uBAAA;AAAA,IACR,GAAA,EAAKC,gBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,KAAK,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,iBAAA,CAAA;AAEvB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAC3D,IAAA,IAAI,6CAAc,OAAA,EAAS;AACzB,MAAA,MAAM,OAAA,GAAU,aAAa,OAAA,CAAQ,aAAA;AAAA,QACnC,sBAAsB,EAAE,CAAA,EAAA;AAAA,OAC1B;AACA,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AACT,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AAAA,IACX;AACA,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,YACnB,SAAA,KAAc,UAAA,GACZ,OACA,CAAA,EAAA,EAAKC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAA,CAAA,GAC5B,MAAA;AAEJ,EAAA,uBACEC,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA,EAAQ,WAAA;AAAA,MACR,OAAA,EAAS,WAAA;AAAA,MACR,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,kCACCC,cAAA,CAAC,MAAA,EAAA,EAAK,WAAW,YAAA,CAAa,gBAAgB,GAAI,QAAA,EAAA,cAAA,EAAe;AAAA;AAAA;AAAA,GAErE;AAEJ;;;;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { MouseEvent } from \"react\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\" | \"fontWeight\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  onClick,\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const id = a11yProps?.[\"aria-labelledby\"];\n\n  const handleClick = (event: MouseEvent<HTMLLabelElement>) => {\n    if (formFieldRef?.current) {\n      const element = formFieldRef.current.querySelector<HTMLElement>(\n        `[aria-labelledby*=\"${id}\"]`,\n      );\n      element?.focus();\n      element?.click();\n    }\n    onClick?.(event);\n  };\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={id}\n      disabled={disabled}\n      color={intent === \"sentence\" ? \"primary\" : \"secondary\"}\n      onClick={handleClick}\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAA,EAAW,YAAA,KAAiBC,mCAAA,EAAkB;AAC3E,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,uBAAA;AAAA,IACR,GAAA,EAAKC,gBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,KAAK,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,iBAAA,CAAA;AAEvB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAC3D,IAAA,IAAI,6CAAc,OAAA,EAAS;AACzB,MAAA,MAAM,OAAA,GAAU,aAAa,OAAA,CAAQ,aAAA;AAAA,QACnC,sBAAsB,EAAE,CAAA,EAAA;AAAA,OAC1B;AACA,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AACT,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AAAA,IACX;AACA,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,YACnB,SAAA,KAAc,UAAA,GACZ,OACA,CAAA,EAAA,EAAKC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAA,CAAA,GAC5B,MAAA;AAEJ,EAAA,uBACEC,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA,EAAO,MAAA,KAAW,UAAA,GAAa,SAAA,GAAY,WAAA;AAAA,MAC3C,OAAA,EAAS,WAAA;AAAA,MACR,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,kCACCC,cAAA,CAAC,MAAA,EAAA,EAAK,WAAW,YAAA,CAAa,gBAAgB,GAAI,QAAA,EAAA,cAAA,EAAe;AAAA;AAAA;AAAA,GAErE;AAEJ;;;;"}

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

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

package/dist-cjs/index.js

@@ -90,9 +90,11 @@ var MenuTrigger = require('./menu/MenuTrigger.js');
 var MultilineInput = require('./multiline-input/MultilineInput.js');
 var NavigationItem = require('./navigation-item/NavigationItem.js');
 var NumberInput = require('./number-input/NumberInput.js');
+var OnSolidButton = require('./on-solid-button/OnSolidButton.js');
 var Option = require('./option/Option.js');
 var OptionGroup = require('./option/OptionGroup.js');
 var Overlay = require('./overlay/Overlay.js');
+var OverlayFooter = require('./overlay/OverlayFooter.js');
 var OverlayHeader = require('./overlay/OverlayHeader.js');
 var OverlayPanel = require('./overlay/OverlayPanel.js');
 var OverlayPanelCloseButton = require('./overlay/OverlayPanelCloseButton.js');
@@ -155,6 +157,8 @@ var TabTrigger = require('./tabs/TabTrigger.js');
 var Tag = require('./tag/Tag.js');
 var Code = require('./text/Code.js');
 var Display = require('./text/Display.js');
+var Editorial = require('./text/Editorial.js');
+var Eyebrow = require('./text/Eyebrow.js');
 var Headings = require('./text/Headings.js');
 var Label = require('./text/Label.js');
 var Text = require('./text/Text.js');
@@ -321,9 +325,11 @@ exports.MultilineInput = MultilineInput.MultilineInput;
 exports.NavigationItem = NavigationItem.NavigationItem;
 exports.NumberInput = NumberInput.NumberInput;
 exports.isOutOfRange = NumberInput.isOutOfRange;
+exports.OnSolidButton = OnSolidButton.OnSolidButton;
 exports.Option = Option.Option;
 exports.OptionGroup = OptionGroup.OptionGroup;
 exports.Overlay = Overlay.Overlay;
+exports.OverlayFooter = OverlayFooter.OverlayFooter;
 exports.OverlayHeader = OverlayHeader.OverlayHeader;
 exports.OverlayPanel = OverlayPanel.OverlayPanel;
 exports.OverlayPanelCloseButton = OverlayPanelCloseButton.OverlayPanelCloseButton;
@@ -401,6 +407,13 @@ exports.Display1 = Display.Display1;
 exports.Display2 = Display.Display2;
 exports.Display3 = Display.Display3;
 exports.Display4 = Display.Display4;
+exports.Editorial1 = Editorial.Editorial1;
+exports.Editorial2 = Editorial.Editorial2;
+exports.Editorial3 = Editorial.Editorial3;
+exports.Editorial4 = Editorial.Editorial4;
+exports.Editorial5 = Editorial.Editorial5;
+exports.Editorial6 = Editorial.Editorial6;
+exports.Eyebrow = Eyebrow.Eyebrow;
 exports.H1 = Headings.H1;
 exports.H2 = Headings.H2;
 exports.H3 = Headings.H3;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/input/Input.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltInput {\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltInput-height, var(--salt-size-base));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltInput-bordered.saltInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput-bordered.saltInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltInput-bordered.saltInput-focused,\n.saltInput-bordered.saltInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltInput-bordered.saltInput-readOnly,\n.saltInput-bordered.saltInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-bordered.saltInput-disabled,\n.saltInput-bordered.saltInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltInput-focused .saltInput-activationIndicator,\n.saltInput-focused:hover .saltInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-readOnly:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-disabled .saltInput-activationIndicator,\n.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-bordered .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltInput-bordered.saltInput-focused .saltInput-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltInput-tertiary {\n  --input-background: var(--salt-editable-tertiary-background);\n  --input-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --input-background-readonly: var(--salt-editable-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltInput-focused,\n.saltInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltInput {\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltInput-height, var(--salt-size-base));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltInput-bordered.saltInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput-bordered.saltInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltInput-bordered.saltInput-focused,\n.saltInput-bordered.saltInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltInput-bordered.saltInput-readOnly,\n.saltInput-bordered.saltInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-bordered.saltInput-disabled,\n.saltInput-bordered.saltInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltInput-focused .saltInput-activationIndicator,\n.saltInput-focused:hover .saltInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-readOnly:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-disabled .saltInput-activationIndicator,\n.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-bordered .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltInput-bordered.saltInput-focused .saltInput-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltInput-tertiary {\n  --input-background: var(--salt-editable-tertiary-background);\n  --input-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --input-background-readonly: var(--salt-editable-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltInput-focused,\n.saltInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, var(--salt-text-letterSpacing));\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Input.css.js.map

package/dist-cjs/interactable-card/InteractableCard.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-borderStyle-solid));\n  border-color: var(--saltInteractableCard-borderColor, var(--interactableCard-borderColor));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--card-padding));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --interactableCard-borderColor: var(--salt-container-borderColor);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltInteractableCard.saltInteractableCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltInteractableCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"tertiary\" */\n.saltInteractableCard-tertiary {\n  background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));\n}\n\n/* Styles applied when elevation=\"flat\" */\n.saltInteractableCard-flat {\n  box-shadow: var(--saltInteractableCard-boxShadow-flat, none);\n}\n\n/* Styles applied when elevation=\"raised\" */\n.saltInteractableCard-raised {\n  box-shadow: var(--saltInteractableCard-boxShadow, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied when borderColor=\"strong\" */\n.saltInteractableCard-borderColorStrong {\n  --interactableCard-borderColor: var(--salt-container-bold-borderColor);\n}\n\n/* Styles applied when borderColor=\"subtle\" */\n.saltInteractableCard-borderColorSubtle {\n  --interactableCard-borderColor: var(--salt-container-subtle-borderColor);\n}\n\n/* Styles applied when borderColor=\"none\" */\n.saltInteractableCard-borderColorNone {\n  --interactableCard-borderColor: transparent;\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:not(.saltInteractableCard-disabled):hover {\n    cursor: var(--salt-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow);\n  border-color: var(--salt-actionable-accented-borderColor-active);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:focus-visible,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  box-shadow: none;\n  cursor: var(--salt-cursor-disabled);\n  outline: none;\n  opacity: 0.4;\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-borderStyle-solid));\n  border-color: var(--saltInteractableCard-borderColor, var(--interactableCard-borderColor));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--card-padding));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --interactableCard-borderColor: var(--salt-container-borderColor);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltInteractableCard.saltInteractableCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltInteractableCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"tertiary\" */\n.saltInteractableCard-tertiary {\n  background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));\n}\n\n/* Styles applied when elevation=\"flat\" */\n.saltInteractableCard-flat {\n  box-shadow: var(--saltInteractableCard-boxShadow-flat, none);\n}\n\n/* Styles applied when elevation=\"raised\" */\n.saltInteractableCard-raised {\n  box-shadow: var(--saltInteractableCard-boxShadow, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied when borderColor=\"strong\" */\n.saltInteractableCard-borderColorStrong {\n  --interactableCard-borderColor: var(--salt-container-bold-borderColor);\n}\n\n/* Styles applied when borderColor=\"subtle\" */\n.saltInteractableCard-borderColorSubtle {\n  --interactableCard-borderColor: var(--salt-container-subtle-borderColor);\n}\n\n/* Styles applied when borderColor=\"none\" */\n.saltInteractableCard-borderColorNone {\n  --interactableCard-borderColor: transparent;\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:hover {\n    cursor: var(--salt-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow);\n  border-color: var(--salt-actionable-accented-borderColor-active);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  border-color: var(--saltInteractableCard-borderColor, var(--interactableCard-borderColor));\n  box-shadow: none;\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n/* Preserve selection while suppressing disabled hover and pressed styles. */\n.saltInteractableCard-disabled.saltInteractableCard-selected,\n.saltInteractableCard-disabled.saltInteractableCard-selected:hover,\n.saltInteractableCard-disabled.saltInteractableCard-selected:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=InteractableCard.css.js.map

package/dist-cjs/interactable-card/InteractableCard.js

@@ -9,6 +9,7 @@ var hasCardSection = require('../card/hasCardSection.js');
 var capitalize = require('../utils/capitalize.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 var useControlled = require('../utils/useControlled.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 var useForkRef = require('../utils/useForkRef.js');
 require('../utils/useId.js');
@@ -58,7 +59,10 @@ const InteractableCard = React.forwardRef(function InteractableCard2(props, ref)
   const ariaChecked = role === "radio" || role === "checkbox" ? selected : void 0;
   const accentValue = accent || accentPlacement;
   const handleClick = (event) => {
-    if (interactableCardGroup && !disabled) {
+    if (disabled) {
+      return;
+    }
+    if (interactableCardGroup) {
       interactableCardGroup.select(event, value);
       setSelected(!selected);
     }
@@ -66,22 +70,29 @@ const InteractableCard = React.forwardRef(function InteractableCard2(props, ref)
     onClick == null ? void 0 : onClick(event);
   };
   let tabIndex;
-  if (interactableCardGroup) {
-    if (disabled) {
-      tabIndex = -1;
-    } else if (isMultiselect) {
+  if (disabled) {
+    tabIndex = void 0;
+  } else if (interactableCardGroup) {
+    if (isMultiselect) {
       tabIndex = 0;
     } else {
       tabIndex = selected ? 0 : -1;
-      if (!interactableCardGroup.value && isFirstChild) {
+      const hasEnabledSelection = interactableCardGroup.hasEnabledSelection ?? Boolean(interactableCardGroup.value);
+      if (!hasEnabledSelection && isFirstChild) {
         tabIndex = 0;
       }
     }
   } else {
-    tabIndex = disabled ? -1 : 0;
+    tabIndex = 0;
   }
   const cardRef = React.useRef(null);
   const handleRef = useForkRef.useForkRef(ref, cardRef);
+  const registerCard = interactableCardGroup == null ? void 0 : interactableCardGroup.registerCard;
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!disabled && cardRef.current && registerCard) {
+      return registerCard(value, cardRef.current);
+    }
+  }, [disabled, registerCard, value]);
   const { active, cardProps } = useInteractableCard.useInteractableCard({
     disabled,
     onKeyUp,

package/dist-cjs/interactable-card/InteractableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { hasCardSection } from \"../card/hasCardSection\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  type InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Visual elevation.\n   */\n  elevation?: \"flat\" | \"raised\";\n  /**\n   * Border color strength.\n   */\n  borderColor?: \"strong\" | \"subtle\" | \"none\";\n  /**\n   * @deprecated since 1.23.0. Use the `accent` prop instead.\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    borderColor,\n    children,\n    className,\n    disabled: disabledProp,\n    elevation = \"raised\",\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect = interactableCardGroup?.multiSelect;\n\n  const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (interactableCardGroup && !disabled) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  let tabIndex: number;\n\n  if (interactableCardGroup) {\n    if (disabled) {\n      tabIndex = -1;\n    } else if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: Only selected or first item (if none are selected) is focusable\n      tabIndex = selected ? 0 : -1;\n      if (!interactableCardGroup.value && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = disabled ? -1 : 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  const sectioned = hasCardSection(children);\n\n  return (\n    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n    // biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard event handlers are provided by cardProps.\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        borderColor && withBaseName(`borderColor${capitalize(borderColor)}`),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(elevation || \"\")]: elevation,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"sectioned\")]: sectioned,\n        },\n        className,\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCard","useWindow","useComponentCssInjection","interactableCardCss","useInteractableCardGroup","useControlled","useRef","useForkRef","useInteractableCard","hasCardSection","jsx","clsx","capitalize"],"mappings":"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"}
+{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { hasCardSection } from \"../card/hasCardSection\";\nimport {\n  capitalize,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  type InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Visual elevation.\n   */\n  elevation?: \"flat\" | \"raised\";\n  /**\n   * Border color strength.\n   */\n  borderColor?: \"strong\" | \"subtle\" | \"none\";\n  /**\n   * @deprecated since 1.23.0. Use the `accent` prop instead.\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    borderColor,\n    children,\n    className,\n    disabled: disabledProp,\n    elevation = \"raised\",\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect = interactableCardGroup?.multiSelect;\n\n  const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    if (interactableCardGroup) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  // Disabled cards omit tabIndex so they can't receive focus, matching native disabled controls.\n  let tabIndex: number | undefined;\n\n  if (disabled) {\n    tabIndex = undefined;\n  } else if (interactableCardGroup) {\n    if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: only the selected card, or the first enabled card when no enabled card is selected, is focusable\n      tabIndex = selected ? 0 : -1;\n      // Fall back to the value for custom providers without hasEnabledSelection.\n      const hasEnabledSelection =\n        interactableCardGroup.hasEnabledSelection ??\n        Boolean(interactableCardGroup.value);\n      if (!hasEnabledSelection && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n  const registerCard = interactableCardGroup?.registerCard;\n\n  useIsomorphicLayoutEffect(() => {\n    if (!disabled && cardRef.current && registerCard) {\n      return registerCard(value, cardRef.current);\n    }\n  }, [disabled, registerCard, value]);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  const sectioned = hasCardSection(children);\n\n  return (\n    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n    // biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard event handlers are provided by cardProps.\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        borderColor && withBaseName(`borderColor${capitalize(borderColor)}`),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(elevation || \"\")]: elevation,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"sectioned\")]: sectioned,\n        },\n        className,\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCard","useWindow","useComponentCssInjection","interactableCardCss","useInteractableCardGroup","useControlled","useRef","useForkRef","useIsomorphicLayoutEffect","useInteractableCard","hasCardSection","jsx","clsx","capitalize"],"mappings":"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"}