@salt-ds/lab 1.0.0-alpha.30 → 1.0.0-alpha.32

package/dist-es/dropdown-next/DropdownNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  MouseEvent,\n  KeyboardEvent,\n  useEffect,\n  FocusEvent,\n  useRef,\n} from \"react\";\nimport {\n  ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n  makePrefixer,\n  StatusAdornment,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n  ValidationStatus,\n} from \"@salt-ds/core\";\nimport { flip, size } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dropdownCss from \"./DropdownNext.css\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport interface DropdownNextProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n    ListControlProps {\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\";\n  /**\n   * Validation status, one of \"error\" | \"warning\" | \"success\".\n   */\n  validationStatus?: Exclude<ValidationStatus, \"info\">;\n}\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n  return open ? <ChevronUpIcon aria-hidden /> : <ChevronDownIcon aria-hidden />;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport const DropdownNext = forwardRef<HTMLButtonElement, DropdownNextProps>(\n  function DropdownNext(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      disabled: disabledProp,\n      emptyReadOnlyMarker = \"—\",\n      readOnly: readOnlyProp,\n      multiselect,\n      onSelectionChange,\n      selected,\n      defaultSelected,\n      defaultOpen,\n      defaultValue: defaultValueProp,\n      value,\n      onOpenChange,\n      open,\n      placeholder,\n      startAdornment,\n      required: requiredProp,\n      variant = \"primary\",\n      validationStatus: validationStatusProp,\n      onClick,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-DropdownNext\",\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 = validationStatusProp ?? formFieldValidationStatus;\n    const required = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : undefined ?? requiredProp;\n\n    const isEmptyReadOnly = readOnly && !defaultValueProp && !value;\n    const defaultValue = isEmptyReadOnly\n      ? emptyReadOnlyMarker\n      : defaultValueProp;\n\n    const listControl = useListControl({\n      open,\n      defaultOpen,\n      onOpenChange,\n      multiselect,\n      defaultSelected,\n      selected,\n      onSelectionChange,\n      defaultValue,\n      value,\n    });\n\n    const {\n      activeState,\n      setActive,\n      openState,\n      setOpen,\n      openKey,\n      getOptionAtIndex,\n      getIndexOfOption,\n      getOptionsMatching,\n      getOptionFromSearch,\n      options,\n      selectedState,\n      select,\n      valueState,\n      setFocusVisibleState,\n      focusedState,\n      setFocusedState,\n      listRef,\n    } = listControl;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { x, y, strategy, elements, floating, reference } = useFloatingUI({\n      open,\n      placement: \"bottom-start\",\n      middleware: [\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `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 buttonRef = useRef<HTMLButtonElement>(null);\n    const handleTriggerRef = useForkRef<HTMLButtonElement>(\n      reference,\n      buttonRef\n    );\n    const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (!readOnly) {\n        setFocusVisibleState(false);\n        setOpen(event, !openState);\n      }\n      onClick?.(event);\n    };\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(event, true);\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      const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n      const count = options.length - 1;\n\n      if (readOnly) {\n        return;\n      }\n\n      if (!openState) {\n        if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n          setOpen(event, true);\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      let newActive;\n      switch (event.key) {\n        case \"ArrowDown\":\n          newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n          break;\n        case \"ArrowUp\":\n          newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n          break;\n        case \"Home\":\n          newActive = getOptionAtIndex(0);\n          break;\n        case \"End\":\n          newActive = getOptionAtIndex(count);\n          break;\n        case \"PageUp\":\n          newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n          break;\n        case \"PageDown\":\n          newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\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          if (!multiselect) {\n            setOpen(event, false);\n          }\n\n          break;\n        case \"Escape\":\n          setOpen(event, false);\n          break;\n        case \"Tab\":\n          if (!multiselect && activeState) {\n            select(event, activeState);\n          }\n          break;\n      }\n\n      if (newActive && newActive?.id != activeState?.id) {\n        event.preventDefault();\n        setActive(newActive);\n        setFocusVisibleState(true);\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      setFocusedState(true);\n\n      onFocus?.(event);\n    };\n\n    const ignoreBlur = useRef(false);\n\n    const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n      if (!ignoreBlur.current) {\n        setOpen(event, false);\n      }\n      ignoreBlur.current = false;\n\n      setFocusedState(false);\n      onBlur?.(event);\n    };\n\n    const handleListMouseOver = () => {\n      setFocusVisibleState(false);\n    };\n\n    const handleListMouseDown = () => {\n      ignoreBlur.current = true;\n    };\n\n    const handleListFocus = () => {\n      buttonRef.current?.focus();\n    };\n    const handleListClick = () => {\n      buttonRef.current?.focus();\n    };\n\n    useEffect(() => {\n      // We check the active index because the active item may have been removed\n      const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n      if (openState && activeIndex < 0) {\n        if (openKey.current.key === \"ArrowDown\") {\n          setActive(getOptionAtIndex(0));\n        } else if (openKey.current.key === \"ArrowUp\") {\n          setActive(getOptionAtIndex(options.length - 1));\n        } else {\n          if (selectedState.length > 0) {\n            const selected = getOptionsMatching(\n              (option) => option.value === selectedState[0]\n            ).pop();\n            if (selected) {\n              setActive(selected);\n            }\n          } else {\n            setActive(getOptionAtIndex(0));\n          }\n        }\n      } else if (!openState) {\n        setActive(undefined);\n      }\n    }, [openState, children]);\n\n    const listId = useId();\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            },\n            className\n          )}\n          ref={handleButtonRef}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\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={\n            clsx(formFieldLabelledBy, ariaLabelledBy) || undefined\n          }\n          aria-describedby={\n            clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n          }\n          aria-multiselectable={multiselect}\n          aria-controls={openState ? listId : undefined}\n          {...rest}\n        >\n          {startAdornment}\n          <span\n            className={clsx(withBaseName(\"content\"), {\n              [withBaseName(\"placeholder\")]: !valueState,\n            })}\n          >\n            {valueState ?? placeholder}\n          </span>\n          {validationStatus && <StatusAdornment status={validationStatus} />}\n          {!readOnly && <ExpandIcon open={openState} />}\n        </button>\n        <FloatingComponent\n          open={(openState || focusedState) && !readOnly}\n          left={x ?? 0}\n          top={y ?? 0}\n          position={strategy}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n          ref={floating}\n        >\n          <OptionList\n            id={listId}\n            collapsed={!openState}\n            onMouseOver={handleListMouseOver}\n            onMouseDown={handleListMouseDown}\n            onFocus={handleListFocus}\n            onClick={handleListClick}\n            ref={listRef}\n          >\n            {children}\n          </OptionList>\n        </FloatingComponent>\n      </ListControlContext.Provider>\n    );\n  }\n);\n"],"names":["DropdownNext","dropdownCss","elements","_a","selected"],"mappings":"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"}
+{"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  KeyboardEvent,\n  useEffect,\n  FocusEvent,\n  useRef,\n  ForwardedRef,\n  Ref,\n} from \"react\";\nimport {\n  ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n  makePrefixer,\n  StatusAdornment,\n  useFloatingComponent,\n  useFloatingUI,\n  UseFloatingUIProps,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n  ValidationStatus,\n} from \"@salt-ds/core\";\nimport {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dropdownCss from \"./DropdownNext.css\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport interface DropdownNextProps<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\";\n  /**\n   * The default content of the dropdown shown in the button.\n   */\n  defaultValue?: string | readonly string[] | number | undefined;\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 | readonly string[] | number | undefined;\n  /**\n   * Validation status, one of \"error\" | \"warning\" | \"success\".\n   */\n  validationStatus?: Exclude<ValidationStatus, \"info\">;\n}\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n  return open ? <ChevronUpIcon aria-hidden /> : <ChevronDownIcon aria-hidden />;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport const DropdownNext = forwardRef(function DropdownNext<Item>(\n  props: DropdownNextProps<Item>,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    children,\n    className,\n    disabled: disabledProp,\n    emptyReadOnlyMarker = \"—\",\n    readOnly: readOnlyProp,\n    multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    defaultValue: defaultValueProp,\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    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-DropdownNext\",\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 = validationStatusProp ?? formFieldValidationStatus;\n  const required = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : undefined ?? requiredProp;\n\n  const isEmptyReadOnly = readOnly && !defaultValueProp && !value;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const listControl = useListControl<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    defaultValue,\n    value,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    options,\n    selectedState,\n    select,\n    valueState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n  } = listControl;\n\n  const { Component: FloatingComponent } = useFloatingComponent();\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 != undefined,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      middleware: [\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `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    const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n    const count = options.length - 1;\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    let newActive;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n        break;\n      case \"Home\":\n        newActive = getOptionAtIndex(0);\n        break;\n      case \"End\":\n        newActive = getOptionAtIndex(count);\n        break;\n      case \"PageUp\":\n        newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n        break;\n      case \"PageDown\":\n        newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\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?.id != activeState?.id) {\n      event.preventDefault();\n      setActive(newActive);\n      setFocusVisibleState(true);\n    }\n\n    onKeyDown?.(event);\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    onBlur?.(event);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleFocusButton = () => {\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\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 the list is closed we should clear the active item\n    if (!openState) {\n      setActive(undefined);\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 = getOptionAtIndex(0);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getOptionAtIndex(options.length - 1);\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 = getOptionAtIndex(0);\n    }\n\n    setActive(newActive);\n  }, [openState, children]);\n\n  const listId = useId();\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          },\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-multiselectable={multiselect}\n        aria-controls={openState ? listId : undefined}\n        {...getReferenceProps({\n          onKeyDown: handleKeyDown,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          ...rest,\n        })}\n      >\n        {startAdornment}\n        <span\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"placeholder\")]: !valueState,\n          })}\n        >\n          {!valueState ? placeholder : valueState}\n        </span>\n        {validationStatus && <StatusAdornment status={validationStatus} />}\n        {!readOnly && <ExpandIcon open={openState} />}\n      </button>\n      <FloatingComponent\n        open={(openState || focusedState) && !readOnly && children != undefined}\n        {...getFloatingProps()}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        ref={floating}\n      >\n        <OptionList\n          id={listId}\n          collapsed={!openState}\n          onMouseOver={handleListMouseOver}\n          onFocus={handleFocusButton}\n          onClick={handleFocusButton}\n          ref={listRef}\n        >\n          {children}\n        </OptionList>\n      </FloatingComponent>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: DropdownNextProps<Item> & { ref?: Ref<HTMLButtonElement> }\n) => JSX.Element;\n"],"names":["DropdownNext","dropdownCss","elements","_a"],"mappings":"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"}

package/dist-es/index.js

@@ -57,14 +57,14 @@ export { MailLinkComponent } from './contact-details/MailLinkComponent.js';
 export { ContentStatus } from './content-status/ContentStatus.js';
 export { DeckItem } from './deck-item/DeckItem.js';
 export { DeckLayout } from './deck-layout/DeckLayout.js';
-export { Dialog } from './dialog/Dialog.js';
+export { ConditionalScrimWrapper, Dialog } from './dialog/Dialog.js';
 export { DialogTitle } from './dialog/DialogTitle.js';
 export { DialogActions } from './dialog/DialogActions.js';
 export { DialogContent } from './dialog/DialogContent.js';
 export { DialogContext, useDialogContext } from './dialog/DialogContext.js';
 export { DialogCloseButton } from './dialog/DialogCloseButton.js';
-export { DRAWER_POSITIONS, Drawer } from './drawer/Drawer.js';
-export { useDrawer } from './drawer/useDrawer.js';
+export { Drawer } from './drawer/Drawer.js';
+export { DrawerCloseButton } from './drawer/DrawerCloseButton.js';
 export { DropdownBase } from './dropdown/DropdownBase.js';
 export { DropdownButton } from './dropdown/DropdownButton.js';
 export { Dropdown } from './dropdown/Dropdown.js';
@@ -101,11 +101,8 @@ export { OptionGroup } from './option/OptionGroup.js';
 export { Overlay } from './overlay/Overlay.js';
 export { OverlayTrigger } from './overlay/OverlayTrigger.js';
 export { OverlayPanel } from './overlay/OverlayPanel.js';
-export { ParentChildItem } from './parent-child-item/ParentChildItem.js';
 export { ParentChildLayout } from './parent-child-layout/ParentChildLayout.js';
 export { Portal } from './portal/Portal.js';
-export { CircularProgress } from './progress/CircularProgress/CircularProgress.js';
-export { LinearProgress } from './progress/LinearProgress/LinearProgress.js';
 export { QueryInput } from './query-input/QueryInput.js';
 export { useQueryInput } from './query-input/useQueryInput.js';
 export { useInstantCollapse } from './responsive/useInstantCollapse.js';

package/dist-es/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-es/list-control/ListControlContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface OptionValue {\n  id: string;\n  disabled: boolean;\n  value: string;\n  text: string;\n}\n\nexport interface ListControlContextValue {\n  openState: boolean;\n  setOpen: (event: SyntheticEvent, newOpen: boolean) => void;\n  register: (optionValue: OptionValue, element: HTMLElement) => () => void;\n  selectedState: string[];\n  select: (event: SyntheticEvent, option: OptionValue) => void;\n  activeState?: OptionValue;\n  setActive: (option: OptionValue) => void;\n  multiselect: boolean;\n  focusVisibleState: boolean;\n}\n\nexport const ListControlContext = createContext<ListControlContextValue>(\n  \"ListControlContext\",\n  {\n    openState: false,\n    setOpen() {\n      return undefined;\n    },\n    register() {\n      return () => undefined;\n    },\n    selectedState: [],\n    select() {\n      return undefined;\n    },\n    activeState: undefined,\n    setActive() {\n      return undefined;\n    },\n    multiselect: false,\n    focusVisibleState: false,\n  }\n);\n\nexport function useListControlContext() {\n  return useContext(ListControlContext);\n}\n"],"names":[],"mappings":";;;AAsBO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,QAAW,GAAA;AACT,MAAA,OAAO,MAAM,KAAA,CAAA,CAAA;AAAA,KACf;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAS,GAAA;AACP,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA,CAAA;AAAA,IACb,SAAY,GAAA;AACV,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA;AAAA,IACb,iBAAmB,EAAA,KAAA;AAAA,GACrB;AACF,EAAA;AAEO,SAAS,qBAAwB,GAAA;AACtC,EAAA,OAAO,WAAW,kBAAkB,CAAA,CAAA;AACtC;;;;"}
+{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface OptionValue<Item> {\n  id: string;\n  disabled: boolean;\n  value: Item;\n  text: string;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n  openState: boolean;\n  setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n  register: (\n    optionValue: OptionValue<Item>,\n    element: HTMLElement\n  ) => () => void;\n  selectedState: unknown[];\n  select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n  activeState?: OptionValue<Item>;\n  setActive: (option: OptionValue<Item>) => void;\n  multiselect: boolean;\n  focusVisibleState: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Need to use any here as a winder type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n  \"ListControlContext\",\n  {\n    openState: false,\n    setOpen() {\n      return undefined;\n    },\n    register() {\n      return () => undefined;\n    },\n    selectedState: [],\n    select() {\n      return undefined;\n    },\n    activeState: undefined,\n    setActive() {\n      return undefined;\n    },\n    multiselect: false,\n    focusVisibleState: false,\n  }\n);\n\nexport function useListControlContext<Item>() {\n  return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":[],"mappings":";;;AA4BO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,QAAW,GAAA;AACT,MAAA,OAAO,MAAM,KAAA,CAAA,CAAA;AAAA,KACf;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAS,GAAA;AACP,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA,CAAA;AAAA,IACb,SAAY,GAAA;AACV,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA;AAAA,IACb,iBAAmB,EAAA,KAAA;AAAA,GACrB;AACF,EAAA;AAEO,SAAS,qBAA8B,GAAA;AAC5C,EAAA,OAAO,WAAW,kBAAkB,CAAA,CAAA;AACtC;;;;"}

package/dist-es/list-control/ListControlState.js

@@ -11,7 +11,9 @@ function useListControl(props) {
     selected: selectedProp,
     onSelectionChange,
     defaultValue,
-    value
+    value,
+    disabled,
+    readOnly
   } = props;
   const [focusedState, setFocusedState] = useState(false);
   const [focusVisibleState, setFocusVisibleState] = useState(false);
@@ -37,20 +39,15 @@ function useListControl(props) {
     name: "ListControl",
     state: "open"
   });
-  const openKey = useRef({
-    key: "",
-    altKey: false
-  });
-  const setOpen = (event, newOpen) => {
-    setOpenState(newOpen);
-    if (event.nativeEvent instanceof KeyboardEvent) {
-      openKey.current = {
-        key: event.nativeEvent.key,
-        altKey: event.nativeEvent.altKey
-      };
+  const openKey = useRef(void 0);
+  const setOpen = (newOpen, reason, key) => {
+    if (disabled || readOnly) {
+      return;
     }
+    setOpenState(newOpen);
+    openKey.current = key;
     if (newOpen !== openState) {
-      onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
+      onOpenChange == null ? void 0 : onOpenChange(newOpen, reason);
     }
   };
   const [selectedState, setSelectedState] = useControlled({
@@ -60,16 +57,15 @@ function useListControl(props) {
     state: "selected"
   });
   const select = (event, option) => {
-    const { disabled, value: value2 } = option;
-    if (disabled) {
+    if (option.disabled || readOnly || disabled) {
       return;
     }
-    let newSelected = [value2];
+    let newSelected = [option.value];
     if (multiselect) {
-      if (selectedState.includes(value2)) {
-        newSelected = selectedState.filter((item) => item !== value2);
+      if (selectedState.includes(option.value)) {
+        newSelected = selectedState.filter((item) => item !== option.value);
       } else {
-        newSelected = selectedState.concat([value2]);
+        newSelected = selectedState.concat([option.value]);
       }
     }
     setSelectedState(newSelected);
@@ -77,11 +73,16 @@ function useListControl(props) {
       getOptionsMatching((option2) => newSelected.includes(option2.value)).map((option2) => option2.text).join(", ")
     );
     onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
+    if (!multiselect) {
+      setOpen(false);
+    }
   };
   const clear = (event) => {
     setSelectedState([]);
     setValueState("");
-    onSelectionChange == null ? void 0 : onSelectionChange(event, []);
+    if (selectedState.length !== 0) {
+      onSelectionChange == null ? void 0 : onSelectionChange(event, []);
+    }
   };
   const optionsRef = useRef([]);
   const register = useCallback(

package/dist-es/list-control/ListControlState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { OptionValue } from \"./ListControlContext\";\n\nexport interface ListControlProps {\n  /**\n   * If true, the list will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * If true, the list will be open. Useful for controlling the component.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;\n  /**\n   * The default selected options. If this is provided `defaultValue` should be provided as well.\n   */\n  defaultSelected?: string[];\n  /**\n   * The selected options. The component will be controlled if this prop is provided.\n   */\n  selected?: string[];\n  /**\n   * Callback fired when the selected options change.\n   */\n  onSelectionChange?: (event: SyntheticEvent, newSelected: string[]) => void;\n  /**\n   * The default value.\n   */\n  defaultValue?: string | readonly string[] | number | undefined;\n  /**\n   * The value. The component will be controlled if this prop is provided.\n   */\n  value?: string | readonly string[] | number | undefined;\n  /**\n   * If true, multiple options can be selected.\n   */\n  multiselect?: boolean;\n}\n\nexport function useListControl(props: ListControlProps) {\n  const {\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected: selectedProp,\n    onSelectionChange,\n    defaultValue,\n    value,\n  } = props;\n\n  const [focusedState, setFocusedState] = useState(false);\n  const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n  const [valueState, setValueState] = useControlled({\n    controlled: value,\n    default: defaultValue,\n    name: \"ListControl\",\n    state: \"value\",\n  });\n\n  const [activeState, setActiveState] = useState<OptionValue | undefined>(\n    undefined\n  );\n\n  const setActive = (option?: OptionValue) => {\n    if (option) {\n      setActiveState(option);\n    } else {\n      setActiveState(undefined);\n    }\n  };\n\n  const [openState, setOpenState] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const openKey = useRef<{ key: string; altKey: boolean }>({\n    key: \"\",\n    altKey: false,\n  });\n  const setOpen = (event: SyntheticEvent, newOpen: boolean) => {\n    setOpenState(newOpen);\n\n    if (event.nativeEvent instanceof KeyboardEvent) {\n      openKey.current = {\n        key: event.nativeEvent.key,\n        altKey: event.nativeEvent.altKey,\n      };\n    }\n\n    if (newOpen !== openState) {\n      onOpenChange?.(event, newOpen);\n    }\n  };\n\n  const [selectedState, setSelectedState] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"ListControl\",\n    state: \"selected\",\n  });\n\n  const select = (event: SyntheticEvent, option: OptionValue) => {\n    const { disabled, value } = option;\n\n    if (disabled) {\n      return;\n    }\n\n    let newSelected = [value];\n\n    if (multiselect) {\n      if (selectedState.includes(value)) {\n        newSelected = selectedState.filter((item) => item !== value);\n      } else {\n        newSelected = selectedState.concat([value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    setValueState(\n      getOptionsMatching((option) => newSelected.includes(option.value))\n        .map((option) => option.text)\n        .join(\", \")\n    );\n    onSelectionChange?.(event, newSelected);\n  };\n\n  const clear = (event: SyntheticEvent) => {\n    setSelectedState([]);\n    setValueState(\"\");\n    onSelectionChange?.(event, []);\n  };\n\n  const optionsRef = useRef<{ value: OptionValue; element: HTMLElement }[]>([]);\n\n  const register = useCallback(\n    (optionValue: OptionValue, element: HTMLElement) => {\n      const { id } = optionValue;\n      const option = optionsRef.current.find((item) => item.value.id === id);\n      const index = optionsRef.current.findIndex((option) => {\n        return (\n          option.element.compareDocumentPosition(element) &\n          Node.DOCUMENT_POSITION_PRECEDING\n        );\n      });\n\n      if (!option) {\n        if (index === -1) {\n          optionsRef.current.push({ value: optionValue, element });\n        } else {\n          optionsRef.current.splice(index, 0, { value: optionValue, element });\n        }\n      }\n\n      return () => {\n        optionsRef.current = optionsRef.current.filter(\n          (item) => item.value.id !== id\n        );\n      };\n    },\n    []\n  );\n\n  const getOptionAtIndex = (index: number) => {\n    return optionsRef.current[index]?.value;\n  };\n\n  const getIndexOfOption = (option: OptionValue) => {\n    return optionsRef.current.findIndex((item) => item.value.id === option.id);\n  };\n\n  const getOptionsMatching = (predicate: (option: OptionValue) => boolean) => {\n    return optionsRef.current\n      .filter((item) => predicate(item.value))\n      .map((item) => item.value);\n  };\n\n  const getOptionFromSearch = (search: string, startFrom?: OptionValue) => {\n    const collator = new Intl.Collator(\"en\", {\n      usage: \"search\",\n      sensitivity: \"base\",\n    });\n\n    const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n    const searchList = optionsRef.current.map((item) => item.value);\n\n    let matches = searchList.filter(\n      (option) =>\n        collator.compare(option.text.substring(0, search.length), search) === 0\n    );\n\n    if (matches.length === 0) {\n      const letters = search.split(\"\");\n      const allSameLetter =\n        letters.length > 0 &&\n        letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n      if (allSameLetter) {\n        matches = searchList.filter(\n          (option) =>\n            collator.compare(option.text[0].toLowerCase(), letters[0]) === 0\n        );\n      }\n    }\n\n    return matches.find((option) => getIndexOfOption(option) >= startIndex);\n  };\n\n  const listRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (listRef.current) {\n      const activeElement = optionsRef.current.find(\n        (option) => option.value === activeState\n      )?.element;\n\n      if (!activeElement) {\n        return;\n      }\n\n      const { scrollTop } = listRef.current;\n      const { offsetTop, offsetHeight } = activeElement;\n\n      const isVisible =\n        offsetTop >= scrollTop &&\n        offsetTop + offsetHeight <= scrollTop + listRef.current.offsetHeight;\n\n      if (!isVisible) {\n        activeElement.scrollIntoView({\n          block: \"end\",\n          inline: \"nearest\",\n        });\n      }\n    }\n  }, [activeState]);\n\n  return {\n    multiselect: Boolean(multiselect),\n    openState,\n    setOpen,\n    openKey,\n    activeState,\n    setActive,\n    selectedState,\n    setSelectedState,\n    select,\n    clear,\n    valueState,\n    setValueState,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    options: optionsRef.current.map((option) => option.element),\n    register,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n  };\n}\n"],"names":["value","option"],"mappings":"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"}
+{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlProps<Item> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  /**\n   * If true, the list will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * If true, the list will be open. Useful for controlling the component.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;\n  /**\n   * The default selected options. If this is provided `defaultValue` should be provided as well.\n   */\n  defaultSelected?: Item[];\n  /**\n   * The selected options. The component will be controlled if this prop is provided.\n   */\n  selected?: Item[];\n  /**\n   * Callback fired when the selected options change.\n   */\n  onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;\n  /**\n   * The default value.\n   */\n  defaultValue?: string | readonly string[] | number | undefined;\n  /**\n   * The value. The component will be controlled if this prop is provided.\n   */\n  value?: string | readonly string[] | number | undefined;\n  /**\n   * If true, multiple options can be selected.\n   */\n  multiselect?: boolean;\n}\n\nexport function useListControl<Item>(props: ListControlProps<Item>) {\n  const {\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected: selectedProp,\n    onSelectionChange,\n    defaultValue,\n    value,\n    disabled,\n    readOnly,\n  } = props;\n\n  const [focusedState, setFocusedState] = useState(false);\n  const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n  const [valueState, setValueState] = useControlled({\n    controlled: value,\n    default: defaultValue,\n    name: \"ListControl\",\n    state: \"value\",\n  });\n\n  const [activeState, setActiveState] = useState<OptionValue<Item> | undefined>(\n    undefined\n  );\n\n  const setActive = (option?: OptionValue<Item>) => {\n    if (option) {\n      setActiveState(option);\n    } else {\n      setActiveState(undefined);\n    }\n  };\n\n  const [openState, setOpenState] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const openKey = useRef<string | undefined>(undefined);\n\n  const setOpen = (\n    newOpen: boolean,\n    reason?: OpenChangeReason,\n    key?: string\n  ) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    setOpenState(newOpen);\n    openKey.current = key;\n\n    if (newOpen !== openState) {\n      onOpenChange?.(newOpen, reason);\n    }\n  };\n\n  const [selectedState, setSelectedState] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"ListControl\",\n    state: \"selected\",\n  });\n\n  const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n    if (option.disabled || readOnly || disabled) {\n      return;\n    }\n\n    let newSelected = [option.value];\n\n    if (multiselect) {\n      if (selectedState.includes(option.value)) {\n        newSelected = selectedState.filter((item) => item !== option.value);\n      } else {\n        newSelected = selectedState.concat([option.value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    setValueState(\n      getOptionsMatching((option) => newSelected.includes(option.value))\n        .map((option) => option.text)\n        .join(\", \")\n    );\n    onSelectionChange?.(event, newSelected);\n\n    if (!multiselect) {\n      setOpen(false);\n    }\n  };\n\n  const clear = (event: SyntheticEvent) => {\n    setSelectedState([]);\n    setValueState(\"\");\n    if (selectedState.length !== 0) {\n      onSelectionChange?.(event, []);\n    }\n  };\n\n  const optionsRef = useRef<\n    { value: OptionValue<Item>; element: HTMLElement }[]\n  >([]);\n\n  const register = useCallback(\n    (optionValue: OptionValue<Item>, element: HTMLElement) => {\n      const { id } = optionValue;\n      const option = optionsRef.current.find((item) => item.value.id === id);\n      const index = optionsRef.current.findIndex((option) => {\n        return (\n          option.element.compareDocumentPosition(element) &\n          Node.DOCUMENT_POSITION_PRECEDING\n        );\n      });\n\n      if (!option) {\n        if (index === -1) {\n          optionsRef.current.push({ value: optionValue, element });\n        } else {\n          optionsRef.current.splice(index, 0, { value: optionValue, element });\n        }\n      }\n\n      return () => {\n        optionsRef.current = optionsRef.current.filter(\n          (item) => item.value.id !== id\n        );\n      };\n    },\n    []\n  );\n\n  const getOptionAtIndex = (index: number) => {\n    return optionsRef.current[index]?.value;\n  };\n\n  const getIndexOfOption = (option: OptionValue<Item>) => {\n    return optionsRef.current.findIndex((item) => item.value.id === option.id);\n  };\n\n  const getOptionsMatching = (\n    predicate: (option: OptionValue<Item>) => boolean\n  ) => {\n    return optionsRef.current\n      .filter((item) => predicate(item.value))\n      .map((item) => item.value);\n  };\n\n  const getOptionFromSearch = (\n    search: string,\n    startFrom?: OptionValue<Item>\n  ) => {\n    const collator = new Intl.Collator(\"en\", {\n      usage: \"search\",\n      sensitivity: \"base\",\n    });\n\n    const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n    const searchList = optionsRef.current.map((item) => item.value);\n\n    let matches = searchList.filter(\n      (option) =>\n        collator.compare(option.text.substring(0, search.length), search) === 0\n    );\n\n    if (matches.length === 0) {\n      const letters = search.split(\"\");\n      const allSameLetter =\n        letters.length > 0 &&\n        letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n      if (allSameLetter) {\n        matches = searchList.filter(\n          (option) =>\n            collator.compare(option.text[0].toLowerCase(), letters[0]) === 0\n        );\n      }\n    }\n\n    return matches.find((option) => getIndexOfOption(option) >= startIndex);\n  };\n\n  const listRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (listRef.current) {\n      const activeElement = optionsRef.current.find(\n        (option) => option.value === activeState\n      )?.element;\n\n      if (!activeElement) {\n        return;\n      }\n\n      const { scrollTop } = listRef.current;\n      const { offsetTop, offsetHeight } = activeElement;\n\n      const isVisible =\n        offsetTop >= scrollTop &&\n        offsetTop + offsetHeight <= scrollTop + listRef.current.offsetHeight;\n\n      if (!isVisible) {\n        activeElement.scrollIntoView({\n          block: \"end\",\n          inline: \"nearest\",\n        });\n      }\n    }\n  }, [activeState]);\n\n  return {\n    multiselect: Boolean(multiselect),\n    openState,\n    setOpen,\n    openKey,\n    activeState,\n    setActive,\n    selectedState,\n    setSelectedState,\n    select,\n    clear,\n    valueState,\n    setValueState,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    options: optionsRef.current.map((option) => option.element),\n    register,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n  };\n}\n"],"names":["option"],"mappings":";;;AAqDO,SAAS,eAAqB,KAA+B,EAAA;AAClE,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACtD,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEhE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAChD,UAAY,EAAA,KAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA;AAAA,IACpC,KAAA,CAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,CAAC,MAA+B,KAAA;AAChD,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,cAAA,CAAe,MAAM,CAAA,CAAA;AAAA,KAChB,MAAA;AACL,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,KAC1B;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,IAC9C,UAAY,EAAA,QAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,IAC5B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,OAA2B,KAAS,CAAA,CAAA,CAAA;AAEpD,EAAA,MAAM,OAAU,GAAA,CACd,OACA,EAAA,MAAA,EACA,GACG,KAAA;AACH,IAAA,IAAI,YAAY,QAAU,EAAA;AACxB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,YAAA,CAAa,OAAO,CAAA,CAAA;AACpB,IAAA,OAAA,CAAQ,OAAU,GAAA,GAAA,CAAA;AAElB,IAAA,IAAI,YAAY,SAAW,EAAA;AACzB,MAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAe,OAAS,EAAA,MAAA,CAAA,CAAA;AAAA,KAC1B;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,aAAc,CAAA;AAAA,IACtD,UAAY,EAAA,YAAA;AAAA,IACZ,OAAA,EAAS,4CAAmB,EAAC;AAAA,IAC7B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,CAAC,KAAA,EAAuB,MAA8B,KAAA;AACnE,IAAI,IAAA,MAAA,CAAO,QAAY,IAAA,QAAA,IAAY,QAAU,EAAA;AAC3C,MAAA,OAAA;AAAA,KACF;AAEA,IAAI,IAAA,WAAA,GAAc,CAAC,MAAA,CAAO,KAAK,CAAA,CAAA;AAE/B,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,IAAI,aAAc,CAAA,QAAA,CAAS,MAAO,CAAA,KAAK,CAAG,EAAA;AACxC,QAAA,WAAA,GAAc,cAAc,MAAO,CAAA,CAAC,IAAS,KAAA,IAAA,KAAS,OAAO,KAAK,CAAA,CAAA;AAAA,OAC7D,MAAA;AACL,QAAA,WAAA,GAAc,aAAc,CAAA,MAAA,CAAO,CAAC,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AAAA,OACnD;AAAA,KACF;AAEA,IAAA,gBAAA,CAAiB,WAAW,CAAA,CAAA;AAC5B,IAAA,aAAA;AAAA,MACE,mBAAmB,CAACA,OAAAA,KAAW,WAAY,CAAA,QAAA,CAASA,QAAO,KAAK,CAAC,CAC9D,CAAA,GAAA,CAAI,CAACA,OAAWA,KAAAA,OAAAA,CAAO,IAAI,CAAA,CAC3B,KAAK,IAAI,CAAA;AAAA,KACd,CAAA;AACA,IAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,WAAA,CAAA,CAAA;AAE3B,IAAA,IAAI,CAAC,WAAa,EAAA;AAChB,MAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KACf;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,KAAA,GAAQ,CAAC,KAA0B,KAAA;AACvC,IAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AACnB,IAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAChB,IAAI,IAAA,aAAA,CAAc,WAAW,CAAG,EAAA;AAC9B,MAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,OAAO,EAAC,CAAA,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,MAEjB,CAAA,EAAE,CAAA,CAAA;AAEJ,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,aAAgC,OAAyB,KAAA;AACxD,MAAM,MAAA,EAAE,IAAO,GAAA,WAAA,CAAA;AACf,MAAM,MAAA,MAAA,GAAS,WAAW,OAAQ,CAAA,IAAA,CAAK,CAAC,IAAS,KAAA,IAAA,CAAK,KAAM,CAAA,EAAA,KAAO,EAAE,CAAA,CAAA;AACrE,MAAA,MAAM,KAAQ,GAAA,UAAA,CAAW,OAAQ,CAAA,SAAA,CAAU,CAACA,OAAW,KAAA;AACrD,QAAA,OACEA,OAAO,CAAA,OAAA,CAAQ,uBAAwB,CAAA,OAAO,IAC9C,IAAK,CAAA,2BAAA,CAAA;AAAA,OAER,CAAA,CAAA;AAED,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,UAAA,UAAA,CAAW,QAAQ,IAAK,CAAA,EAAE,KAAO,EAAA,WAAA,EAAa,SAAS,CAAA,CAAA;AAAA,SAClD,MAAA;AACL,UAAW,UAAA,CAAA,OAAA,CAAQ,OAAO,KAAO,EAAA,CAAA,EAAG,EAAE,KAAO,EAAA,WAAA,EAAa,SAAS,CAAA,CAAA;AAAA,SACrE;AAAA,OACF;AAEA,MAAA,OAAO,MAAM;AACX,QAAW,UAAA,CAAA,OAAA,GAAU,WAAW,OAAQ,CAAA,MAAA;AAAA,UACtC,CAAC,IAAA,KAAS,IAAK,CAAA,KAAA,CAAM,EAAO,KAAA,EAAA;AAAA,SAC9B,CAAA;AAAA,OACF,CAAA;AAAA,KACF;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAAkB,KAAA;AA/L9C,IAAA,IAAA,EAAA,CAAA;AAgMI,IAAO,OAAA,CAAA,EAAA,GAAA,UAAA,CAAW,OAAQ,CAAA,KAAA,CAAA,KAAnB,IAA2B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,CAAA;AAAA,GACpC,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,MAA8B,KAAA;AACtD,IAAO,OAAA,UAAA,CAAW,QAAQ,SAAU,CAAA,CAAC,SAAS,IAAK,CAAA,KAAA,CAAM,EAAO,KAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA,GAC3E,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,CACzB,SACG,KAAA;AACH,IAAA,OAAO,UAAW,CAAA,OAAA,CACf,MAAO,CAAA,CAAC,SAAS,SAAU,CAAA,IAAA,CAAK,KAAK,CAAC,CACtC,CAAA,GAAA,CAAI,CAAC,IAAA,KAAS,KAAK,KAAK,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,mBAAA,GAAsB,CAC1B,MAAA,EACA,SACG,KAAA;AACH,IAAA,MAAM,QAAW,GAAA,IAAI,IAAK,CAAA,QAAA,CAAS,IAAM,EAAA;AAAA,MACvC,KAAO,EAAA,QAAA;AAAA,MACP,WAAa,EAAA,MAAA;AAAA,KACd,CAAA,CAAA;AAED,IAAA,MAAM,UAAa,GAAA,SAAA,GAAY,gBAAiB,CAAA,SAAS,IAAI,CAAI,GAAA,CAAA,CAAA;AACjE,IAAA,MAAM,aAAa,UAAW,CAAA,OAAA,CAAQ,IAAI,CAAC,IAAA,KAAS,KAAK,KAAK,CAAA,CAAA;AAE9D,IAAA,IAAI,UAAU,UAAW,CAAA,MAAA;AAAA,MACvB,CAAC,MAAA,KACC,QAAS,CAAA,OAAA,CAAQ,MAAO,CAAA,IAAA,CAAK,SAAU,CAAA,CAAA,EAAG,MAAO,CAAA,MAAM,CAAG,EAAA,MAAM,CAAM,KAAA,CAAA;AAAA,KAC1E,CAAA;AAEA,IAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,MAAM,MAAA,OAAA,GAAU,MAAO,CAAA,KAAA,CAAM,EAAE,CAAA,CAAA;AAC/B,MAAA,MAAM,aACJ,GAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,IACjB,QAAQ,KAAM,CAAA,CAAC,MAAW,KAAA,QAAA,CAAS,OAAQ,CAAA,MAAA,EAAQ,OAAQ,CAAA,CAAA,CAAE,MAAM,CAAC,CAAA,CAAA;AACtE,MAAA,IAAI,aAAe,EAAA;AACjB,QAAA,OAAA,GAAU,UAAW,CAAA,MAAA;AAAA,UACnB,CAAC,MACC,KAAA,QAAA,CAAS,OAAQ,CAAA,MAAA,CAAO,IAAK,CAAA,CAAA,CAAA,CAAG,WAAY,EAAA,EAAG,OAAQ,CAAA,CAAA,CAAE,CAAM,KAAA,CAAA;AAAA,SACnE,CAAA;AAAA,OACF;AAAA,KACF;AAEA,IAAA,OAAO,QAAQ,IAAK,CAAA,CAAC,WAAW,gBAAiB,CAAA,MAAM,KAAK,UAAU,CAAA,CAAA;AAAA,GACxE,CAAA;AAEA,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAA,SAAA,CAAU,MAAM;AAjPlB,IAAA,IAAA,EAAA,CAAA;AAkPI,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAM,MAAA,aAAA,GAAA,CAAgB,gBAAW,OAAQ,CAAA,IAAA;AAAA,QACvC,CAAC,MAAW,KAAA,MAAA,CAAO,KAAU,KAAA,WAAA;AAAA,YADT,IAEnB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAA,CAAA;AAEH,MAAA,IAAI,CAAC,aAAe,EAAA;AAClB,QAAA,OAAA;AAAA,OACF;AAEA,MAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,CAAA,OAAA,CAAA;AAC9B,MAAM,MAAA,EAAE,SAAW,EAAA,YAAA,EAAiB,GAAA,aAAA,CAAA;AAEpC,MAAA,MAAM,YACJ,SAAa,IAAA,SAAA,IACb,YAAY,YAAgB,IAAA,SAAA,GAAY,QAAQ,OAAQ,CAAA,YAAA,CAAA;AAE1D,MAAA,IAAI,CAAC,SAAW,EAAA;AACd,QAAA,aAAA,CAAc,cAAe,CAAA;AAAA,UAC3B,KAAO,EAAA,KAAA;AAAA,UACP,MAAQ,EAAA,SAAA;AAAA,SACT,CAAA,CAAA;AAAA,OACH;AAAA,KACF;AAAA,GACF,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAO,OAAA;AAAA,IACL,WAAA,EAAa,QAAQ,WAAW,CAAA;AAAA,IAChC,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,iBAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAS,UAAW,CAAA,OAAA,CAAQ,IAAI,CAAC,MAAA,KAAW,OAAO,OAAO,CAAA;AAAA,IAC1D,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA,mBAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-es/option/Option.js

@@ -44,7 +44,6 @@ const Option = forwardRef(function Option2(props, ref) {
     setActive,
     activeState,
     multiselect,
-    setOpen,
     select,
     register,
     selectedState,
@@ -67,9 +66,6 @@ const Option = forwardRef(function Option2(props, ref) {
     }
     setActive(optionValue);
     select(event, optionValue);
-    if (!multiselect) {
-      setOpen(event, false);
-    }
     onClick == null ? void 0 : onClick(event);
   };
   useEffect(() => {

package/dist-es/option/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  MouseEvent,\n  useRef,\n  useEffect,\n  useMemo,\n  Children,\n} from \"react\";\nimport { Checkbox, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  OptionValue,\n  useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the option.\n   */\n  value: string;\n  /**\n   * The text value of the option. If not provided, the text value will be inferred from the children.\n   */\n  textValue?: string;\n  /**\n   * The content of the option.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nfunction getOptionText(textValue: string | undefined, children: ReactNode) {\n  if (textValue) {\n    return textValue;\n  }\n\n  let textString = \"\";\n  Children.forEach(children, (child) => {\n    if (typeof child === \"string\") {\n      textString += child;\n    }\n  });\n\n  return textString;\n}\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(function Option(\n  props,\n  ref\n) {\n  const {\n    className,\n    children,\n    disabled,\n    onClick,\n    id: idProp,\n    value,\n    textValue,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-option\",\n    css: optionCss,\n    window: targetWindow,\n  });\n\n  const optionRef = useRef(null);\n  const id = useId(idProp);\n  const optionText = getOptionText(textValue, children);\n\n  const {\n    setActive,\n    activeState,\n    multiselect,\n    setOpen,\n    select,\n    register,\n    selectedState,\n    focusVisibleState,\n  } = useListControlContext();\n\n  const selected = selectedState.includes(value);\n  const active = activeState?.id === id;\n\n  const optionValue: OptionValue = useMemo(\n    () => ({\n      id: String(id),\n      disabled: Boolean(disabled),\n      value,\n      text: optionText,\n    }),\n    [id, disabled, value, optionText]\n  );\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disabled || id == undefined) {\n      return;\n    }\n\n    // set active descendent\n    setActive(optionValue);\n\n    // handle selection\n    select(event, optionValue);\n\n    // handle close if multi-select\n    if (!multiselect) {\n      setOpen(event, false);\n    }\n\n    onClick?.(event);\n  };\n\n  useEffect(() => {\n    if (id && optionRef.current) {\n      return register(optionValue, optionRef.current);\n    }\n  }, [optionValue, id, register]);\n\n  const handleRef = useForkRef(optionRef, ref);\n\n  return (\n    <div\n      aria-disabled={disabled ? \"true\" : undefined}\n      aria-selected={selected}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"active\")]: active,\n          [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n        },\n        className\n      )}\n      ref={handleRef}\n      role=\"option\"\n      id={id}\n      onClick={handleClick}\n      {...rest}\n    >\n      {multiselect && (\n        <Checkbox checked={selected} aria-hidden=\"true\" tabIndex={-1} />\n      )}\n      {children}\n    </div>\n  );\n});\n"],"names":["Option","optionCss"],"mappings":"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"}
+{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  MouseEvent,\n  useRef,\n  useEffect,\n  useMemo,\n  Children,\n} from \"react\";\nimport { Checkbox, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  OptionValue,\n  useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the option.\n   */\n  value: unknown;\n  /**\n   * The text value of the option. If not provided, the text value will be inferred from the children.\n   */\n  textValue?: string;\n  /**\n   * The content of the option.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nfunction getOptionText(textValue: string | undefined, children: ReactNode) {\n  if (textValue) {\n    return textValue;\n  }\n\n  let textString = \"\";\n  Children.forEach(children, (child) => {\n    if (typeof child === \"string\") {\n      textString += child;\n    }\n  });\n\n  return textString;\n}\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(function Option(\n  props,\n  ref\n) {\n  const {\n    className,\n    children,\n    disabled,\n    onClick,\n    id: idProp,\n    value,\n    textValue,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-option\",\n    css: optionCss,\n    window: targetWindow,\n  });\n\n  const optionRef = useRef(null);\n  const id = useId(idProp);\n  const optionText = getOptionText(textValue, children);\n\n  const {\n    setActive,\n    activeState,\n    multiselect,\n    select,\n    register,\n    selectedState,\n    focusVisibleState,\n  } = useListControlContext();\n\n  const selected = selectedState.includes(value);\n  const active = activeState?.id === id;\n\n  const optionValue: OptionValue<unknown> = useMemo(\n    () => ({\n      id: String(id),\n      disabled: Boolean(disabled),\n      value,\n      text: optionText,\n    }),\n    [id, disabled, value, optionText]\n  );\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disabled || id == undefined) {\n      return;\n    }\n\n    // set active descendent\n    setActive(optionValue);\n\n    // handle selection\n    select(event, optionValue);\n\n    onClick?.(event);\n  };\n\n  useEffect(() => {\n    if (id && optionRef.current) {\n      return register(optionValue, optionRef.current);\n    }\n  }, [optionValue, id, register]);\n\n  const handleRef = useForkRef(optionRef, ref);\n\n  return (\n    <div\n      aria-disabled={disabled ? \"true\" : undefined}\n      aria-selected={selected}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"active\")]: active,\n          [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n        },\n        className\n      )}\n      ref={handleRef}\n      role=\"option\"\n      id={id}\n      onClick={handleClick}\n      {...rest}\n    >\n      {multiselect && (\n        <Checkbox checked={selected} aria-hidden=\"true\" tabIndex={-1} />\n      )}\n      {children}\n    </div>\n  );\n});\n"],"names":["Option","optionCss"],"mappings":"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"}

package/dist-es/option/OptionList.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOptionList {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-popout);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltOptionList-collapsed {\n  display: none;\n}\n";
+var css_248z = ".saltOptionList {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltOptionList-collapsed {\n  display: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=OptionList.css.js.map

package/dist-es/parent-child-layout/ParentChildLayout.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltParentChildLayout {\n}\n";
+var css_248z = ".saltParentChildLayout {\n  overflow: hidden;\n}\n\n.saltParentChildLayout-parent {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n.saltParentChildLayout-child {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltParentChildLayout-reversed.saltFlexLayout {\n  --flexLayout-direction: row-reverse;\n}\n\n.saltParentChildLayout-no-animations .saltParentChildLayout-parent,\n.saltParentChildLayout-no-animations .saltParentChildLayout-child {\n  animation: none;\n}\n\n@media (prefers-reduced-motion) {\n  .reduced-motion .saltParentChildLayout-parent {\n    animation: none;\n  }\n\n  .reduced-motion .saltParentChildLayout-child {\n    animation: none;\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ParentChildLayout.css.js.map

package/dist-es/parent-child-layout/ParentChildLayout.js

@@ -1,39 +1,23 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { makePrefixer, FlexLayout } from '@salt-ds/core';
+import { makePrefixer, FlexItem, FlexLayout } from '@salt-ds/core';
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import { ParentChildItem } from '../parent-child-item/ParentChildItem.js';
+import { forwardRef, useEffect } from 'react';
 import { useIsViewportLargerThanBreakpoint } from '../utils/useIsViewportLargerThanBreakpoint.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './ParentChildLayout.css.js';
 
 const withBaseName = makePrefixer("saltParentChildLayout");
-const getDirection = (orientation, stackedViewElement) => {
-  let direction = "right";
-  if (orientation === "horizontal") {
-    if (stackedViewElement === "parent") {
-      direction = "left";
-    } else {
-      direction = "right";
-    }
-  } else {
-    if (stackedViewElement === "parent") {
-      direction = "bottom";
-    } else {
-      direction = "top";
-    }
-  }
-  return direction;
-};
 const ParentChildLayout = forwardRef(function ParentChildLayout2({
-  stackedAtBreakpoint = "sm",
-  stackedViewElement = "parent",
+  collapseAtBreakpoint = "sm",
+  collapsedViewElement = "parent",
   disableAnimations = false,
+  parentPosition = "left",
   parent,
   child,
+  gap = 0,
   className,
-  orientation = "horizontal",
+  onCollapseChange,
   ...rest
 }, ref) {
   const targetWindow = useWindow();
@@ -42,36 +26,44 @@ const ParentChildLayout = forwardRef(function ParentChildLayout2({
     css: css_248z,
     window: targetWindow
   });
-  const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);
-  const parentChildDirection = getDirection(orientation, stackedViewElement);
-  const stackedViewChildren = {
-    parent: /* @__PURE__ */ jsx(ParentChildItem, {
-      disableAnimations,
-      direction: parentChildDirection,
-      isStacked: stackedView,
+  const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);
+  const collapsedViewChildren = {
+    parent: /* @__PURE__ */ jsx(FlexItem, {
+      className: clsx(withBaseName("parent"), {
+        ["saltFlexItem-stacked"]: isCollapsed
+      }),
       children: parent
     }),
-    child: /* @__PURE__ */ jsx(ParentChildItem, {
-      disableAnimations,
-      direction: parentChildDirection,
-      isStacked: stackedView,
+    child: /* @__PURE__ */ jsx(FlexItem, {
+      className: clsx(withBaseName("child"), {
+        ["saltFlexItem-stacked"]: isCollapsed
+      }),
       children: child
     })
   };
+  useEffect(() => {
+    onCollapseChange == null ? void 0 : onCollapseChange(isCollapsed);
+  }, [isCollapsed, onCollapseChange]);
   return /* @__PURE__ */ jsx(FlexLayout, {
-    className: clsx(withBaseName(), className),
     ref,
+    className: clsx(
+      withBaseName(),
+      {
+        [withBaseName(`no-animations`)]: disableAnimations,
+        [withBaseName(`reversed`)]: parentPosition === "right"
+      },
+      className
+    ),
+    gap,
     ...rest,
-    children: stackedView ? stackedViewChildren[stackedViewElement] : /* @__PURE__ */ jsxs(Fragment, {
+    children: isCollapsed ? collapsedViewChildren[collapsedViewElement] : /* @__PURE__ */ jsxs(Fragment, {
       children: [
-        /* @__PURE__ */ jsx(ParentChildItem, {
+        /* @__PURE__ */ jsx(FlexItem, {
           grow: 0,
-          disableAnimations,
           children: parent
         }),
-        /* @__PURE__ */ jsx(ParentChildItem, {
+        /* @__PURE__ */ jsx(FlexItem, {
           grow: 2,
-          disableAnimations,
           children: child
         })
       ]

package/dist-es/parent-child-layout/ParentChildLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n  Breakpoints,\n  FlexLayout,\n  FlexLayoutProps,\n  makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  stackedAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Change element that is displayed when in staked view.\n   */\n  stackedViewElement?: StackedViewElement;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Orientation for slide animations.\n   */\n  orientation?: Orientation;\n  /**\n   * Controls the space between columns.\n   */\n  gap?: FlexLayoutProps<ElementType>[\"gap\"];\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n  orientation: Orientation,\n  stackedViewElement: StackedViewElement\n) => {\n  let direction: SlideDirection = \"right\";\n\n  if (orientation === \"horizontal\") {\n    if (stackedViewElement === \"parent\") {\n      direction = \"left\";\n    } else {\n      direction = \"right\";\n    }\n  } else {\n    if (stackedViewElement === \"parent\") {\n      direction = \"bottom\";\n    } else {\n      direction = \"top\";\n    }\n  }\n\n  return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    stackedAtBreakpoint = \"sm\",\n    stackedViewElement = \"parent\",\n    disableAnimations = false,\n    parent,\n    child,\n    className,\n    orientation = \"horizontal\",\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-parent-child-layout\",\n    css: parentChildLayoutCss,\n    window: targetWindow,\n  });\n\n  const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n  const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n  const stackedViewChildren = {\n    parent: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {parent}\n      </ParentChildItem>\n    ),\n    child: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {child}\n      </ParentChildItem>\n    ),\n  };\n\n  return (\n    <FlexLayout className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n      {stackedView ? (\n        stackedViewChildren[stackedViewElement]\n      ) : (\n        <>\n          <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n            {parent}\n          </ParentChildItem>\n          <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n            {child}\n          </ParentChildItem>\n        </>\n      )}\n    </FlexLayout>\n  );\n});\n"],"names":["ParentChildLayout","parentChildLayoutCss"],"mappings":";;;;;;;;;;AAoDA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,kCAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACG,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACG,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n  Breakpoints,\n  FlexLayout,\n  FlexItem,\n  FlexLayoutProps,\n  makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { forwardRef, ReactNode, useEffect } from \"react\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\nexport interface ParentChildLayoutProps extends FlexLayoutProps<\"div\"> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  collapseAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Change element that is displayed when in staked view.\n   */\n  collapsedViewElement?: StackedViewElement;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Position of the parent component within the layout.\n   */\n  parentPosition?: \"left\" | \"right\";\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n  onCollapseChange?: (isCollapsed: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    collapseAtBreakpoint = \"sm\",\n    collapsedViewElement = \"parent\",\n    disableAnimations = false,\n    parentPosition = \"left\",\n    parent,\n    child,\n    gap = 0,\n    className,\n    onCollapseChange,\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-parent-child-layout\",\n    css: parentChildLayoutCss,\n    window: targetWindow,\n  });\n\n  const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);\n\n  const collapsedViewChildren = {\n    parent: (\n      <FlexItem\n        className={clsx(withBaseName(\"parent\"), {\n          [\"saltFlexItem-stacked\"]: isCollapsed,\n        })}\n      >\n        {parent}\n      </FlexItem>\n    ),\n    child: (\n      <FlexItem\n        className={clsx(withBaseName(\"child\"), {\n          [\"saltFlexItem-stacked\"]: isCollapsed,\n        })}\n      >\n        {child}\n      </FlexItem>\n    ),\n  };\n\n  useEffect(() => {\n    onCollapseChange?.(isCollapsed);\n  }, [isCollapsed, onCollapseChange]);\n\n  return (\n    <FlexLayout\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(`no-animations`)]: disableAnimations,\n          [withBaseName(`reversed`)]: parentPosition === \"right\",\n        },\n        className\n      )}\n      gap={gap}\n      {...rest}\n    >\n      {isCollapsed ? (\n        collapsedViewChildren[collapsedViewElement]\n      ) : (\n        <>\n          <FlexItem grow={0}>{parent}</FlexItem>\n          <FlexItem grow={2}>{child}</FlexItem>\n        </>\n      )}\n    </FlexLayout>\n  );\n});\n"],"names":["ParentChildLayout","parentChildLayoutCss"],"mappings":";;;;;;;;;AA+CA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAE5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA;AAAA,EACE,oBAAuB,GAAA,IAAA;AAAA,EACvB,oBAAuB,GAAA,QAAA;AAAA,EACvB,iBAAoB,GAAA,KAAA;AAAA,EACpB,cAAiB,GAAA,MAAA;AAAA,EACjB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,SAAA;AAAA,EACA,gBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,kCAAkC,oBAAoB,CAAA,CAAA;AAE1E,EAAA,MAAM,qBAAwB,GAAA;AAAA,IAC5B,wBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,QAAQ,CAAG,EAAA;AAAA,QACtC,CAAC,sBAAyB,GAAA,WAAA;AAAA,OAC3B,CAAA;AAAA,MAEA,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,QACrC,CAAC,sBAAyB,GAAA,WAAA;AAAA,OAC3B,CAAA;AAAA,MAEA,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAmB,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,WAAA,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,WAAa,EAAA,gBAAgB,CAAC,CAAA,CAAA;AAElC,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,CAAA,aAAA,CAAe,CAAI,GAAA,iBAAA;AAAA,QACjC,CAAC,YAAA,CAAa,CAAU,QAAA,CAAA,CAAA,GAAI,cAAmB,KAAA,OAAA;AAAA,OACjD;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA,WAAA,GACC,sBAAsB,oBAEtB,CAAA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,UAAS,IAAM,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,MAAA;AAAA,SAAO,CAAA;AAAA,wBAC1B,GAAA,CAAA,QAAA,EAAA;AAAA,UAAS,IAAM,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/slider/Slider.css.js

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

package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTrackerConnector {\n  --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));\n  --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));\n  --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-palette-neutral-secondary-border));\n  --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong));\n  --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n  --trackerConnector-style-border: var(--trackerConnector-style-default);\n}\n\n.saltTrackerConnector {\n  position: absolute;\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerConnector {\n  border-top-width: var(--trackerConnector-thickness);\n  border-top-style: var(--trackerConnector-style-border);\n  border-top-color: var(--trackerConnector-color);\n  width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n  left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n  top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));\n  height: 0;\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerConnector {\n  top: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n  left: calc((var(--saltIcon-size) / 2) - (var(--trackerConnector-thickness) / 2));\n  height: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n  border-left-width: var(--trackerConnector-thickness);\n  border-left-style: var(--trackerConnector-style-border);\n  border-left-color: var(--trackerConnector-color);\n}\n\n.saltTrackerConnector.saltTrackerConnector-active {\n  --trackerConnector-style-border: var(--trackerConnector-style-active);\n}\n";
+var css_248z = ".saltTrackerConnector {\n  --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));\n  --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));\n  --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor));\n  --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong));\n  --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n  --trackerConnector-style-border: var(--trackerConnector-style-default);\n}\n\n.saltTrackerConnector {\n  position: absolute;\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerConnector {\n  border-top-width: var(--trackerConnector-thickness);\n  border-top-style: var(--trackerConnector-style-border);\n  border-top-color: var(--trackerConnector-color);\n  width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n  left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n  top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));\n  height: 0;\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerConnector {\n  top: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n  left: calc((var(--saltIcon-size) / 2) - (var(--trackerConnector-thickness) / 2));\n  height: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n  border-left-width: var(--trackerConnector-thickness);\n  border-left-style: var(--trackerConnector-style-border);\n  border-left-color: var(--trackerConnector-color);\n}\n\n.saltTrackerConnector.saltTrackerConnector-active {\n  --trackerConnector-style-border: var(--trackerConnector-style-active);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TrackerConnector.css.js.map

package/dist-es/tabs-next/TabNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TabNext.css.js.map

package/dist-es/tabs-next/TabstripNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  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.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  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.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TabstripNext.css.js.map