@salt-ds/core 1.71.0 → 1.73.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +204 -0
- package/css/salt-core.css +432 -175
- package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
- package/dist-cjs/avatar/Avatar.css.js +1 -1
- package/dist-cjs/badge/Badge.css.js +1 -1
- package/dist-cjs/banner/Banner.css.js +1 -1
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/breadcrumbs/Breadcrumb.css.js +1 -1
- package/dist-cjs/breadcrumbs/Breadcrumb.js +5 -6
- package/dist-cjs/breadcrumbs/Breadcrumb.js.map +1 -1
- package/dist-cjs/breadcrumbs/Breadcrumbs.css.js +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/card/CardContent.css.js +1 -1
- package/dist-cjs/card/hasCardSection.js +11 -3
- package/dist-cjs/card/hasCardSection.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.css.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/collapsible/CollapsiblePanel.css.js +1 -1
- package/dist-cjs/collapsible/CollapsiblePanel.js +15 -15
- package/dist-cjs/collapsible/CollapsiblePanel.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +18 -36
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +21 -21
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +2 -0
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/DrawerHeader.js +2 -0
- package/dist-cjs/drawer/DrawerHeader.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.css.js +1 -1
- package/dist-cjs/dropdown/Dropdown.js +30 -31
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/form-field/FormField.css.js +1 -1
- package/dist-cjs/form-field/FormField.js +2 -2
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.css.js +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +2 -0
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +3 -1
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/index.js +13 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js +18 -7
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +71 -39
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/interactable-card/useInteractableCard.js +2 -3
- package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -1
- package/dist-cjs/kbd/Kbd.css.js +1 -1
- package/dist-cjs/link/Link.css.js +1 -1
- package/dist-cjs/link/Link.js +2 -0
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link/LinkAction.js +3 -2
- package/dist-cjs/link/LinkAction.js.map +1 -1
- package/dist-cjs/link-button/LinkButton.js +3 -2
- package/dist-cjs/link-button/LinkButton.js.map +1 -1
- package/dist-cjs/list-box/ListBox.js +20 -27
- package/dist-cjs/list-box/ListBox.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlNavigationKeys.js +74 -0
- package/dist-cjs/list-control/ListControlNavigationKeys.js.map +1 -0
- package/dist-cjs/list-control/ListControlOptionContext.js +47 -0
- package/dist-cjs/list-control/ListControlOptionContext.js.map +1 -0
- package/dist-cjs/list-control/ListControlOptionStore.js +159 -0
- package/dist-cjs/list-control/ListControlOptionStore.js.map +1 -0
- package/dist-cjs/list-control/ListControlProvider.js +39 -0
- package/dist-cjs/list-control/ListControlProvider.js.map +1 -0
- package/dist-cjs/list-control/ListControlRegistry.js +161 -0
- package/dist-cjs/list-control/ListControlRegistry.js.map +1 -0
- package/dist-cjs/list-control/ListControlState.js +137 -109
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js +1 -1
- package/dist-cjs/mega-menu/MegaMenuListItem.css.js +1 -1
- package/dist-cjs/menu/MenuGroup.css.js +1 -1
- package/dist-cjs/menu/MenuItem.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
- package/dist-cjs/number-input/NumberInput.css.js +1 -1
- package/dist-cjs/number-input/NumberInput.js +2 -2
- package/dist-cjs/number-input/NumberInput.js.map +1 -1
- package/dist-cjs/on-solid-button/OnSolidButton.css.js +6 -0
- package/dist-cjs/on-solid-button/OnSolidButton.css.js.map +1 -0
- package/dist-cjs/on-solid-button/OnSolidButton.js +68 -0
- package/dist-cjs/on-solid-button/OnSolidButton.js.map +1 -0
- package/dist-cjs/option/Option.css.js +1 -1
- package/dist-cjs/option/Option.js +64 -39
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.css.js +1 -1
- package/dist-cjs/overlay/Overlay.js +12 -2
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js +6 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -1
- package/dist-cjs/overlay/OverlayFooter.css.js +6 -0
- package/dist-cjs/overlay/OverlayFooter.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayFooter.js +30 -0
- package/dist-cjs/overlay/OverlayFooter.js.map +1 -0
- package/dist-cjs/overlay/OverlayHeader.css.js +1 -1
- package/dist-cjs/overlay/OverlayHeader.js +53 -11
- package/dist-cjs/overlay/OverlayHeader.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.css.js +1 -1
- package/dist-cjs/overlay/OverlayPanel.js +20 -7
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.css.js +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js +11 -13
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/hasOverlaySection.js +24 -0
- package/dist-cjs/overlay/hasOverlaySection.js.map +1 -0
- package/dist-cjs/pagination/CompactPaginator.js +2 -0
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +2 -0
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pill/PillCheckIcon.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +1 -1
- package/dist-cjs/pill-input/PillInput.js +2 -2
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +2 -0
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +2 -0
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.css.js +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-cjs/rating/Rating.css.js +1 -1
- package/dist-cjs/salt-provider/ThemeApplicator.js +10 -6
- package/dist-cjs/salt-provider/ThemeApplicator.js.map +1 -1
- package/dist-cjs/side-panel/SidePanelTitle.js +2 -0
- package/dist-cjs/side-panel/SidePanelTitle.js.map +1 -1
- package/dist-cjs/side-panel/SidePanelTrigger.js.map +1 -1
- package/dist-cjs/side-panel/internal/useIsScrollable.js.map +1 -1
- package/dist-cjs/side-panel/useSidePanel.js +4 -9
- package/dist-cjs/side-panel/useSidePanel.js.map +1 -1
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +2 -2
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/SliderTooltip.js +2 -0
- package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -1
- package/dist-cjs/slider/internal/SliderTrack.css.js +1 -1
- package/dist-cjs/slider/internal/SliderTrack.js +2 -0
- package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
- package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/utils.js.map +1 -1
- package/dist-cjs/stepper/Stepper.js +1 -1
- package/dist-cjs/stepper/Stepper.js.map +1 -1
- package/dist-cjs/stepper/internal/StepText.css.js +1 -1
- package/dist-cjs/stepper/internal/StepText.js +2 -0
- package/dist-cjs/stepper/internal/StepText.js.map +1 -1
- package/dist-cjs/switch/Switch.css.js +1 -1
- package/dist-cjs/table/Table.css.js +1 -1
- package/dist-cjs/tabs/Tabs.js +1 -1
- package/dist-cjs/tabs/Tabs.js.map +1 -1
- package/dist-cjs/tabs/internal/overflow/useOverflow.js.map +1 -1
- package/dist-cjs/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
- package/dist-cjs/tag/Tag.css.js +1 -1
- package/dist-cjs/text/Code.js +1 -1
- package/dist-cjs/text/Code.js.map +1 -1
- package/dist-cjs/text/Editorial.js +32 -0
- package/dist-cjs/text/Editorial.js.map +1 -0
- package/dist-cjs/text/Eyebrow.js +12 -0
- package/dist-cjs/text/Eyebrow.js.map +1 -0
- package/dist-cjs/text/Text.css.js +1 -1
- package/dist-cjs/text/Text.js +6 -2
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.css.js +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +8 -2
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +71 -8
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/toggletip/ToggletipPanel.css.js +1 -1
- package/dist-cjs/toolbar/ToolbarOverflow.js +8 -4
- package/dist-cjs/toolbar/ToolbarOverflow.js.map +1 -1
- package/dist-cjs/toolbar/toolbarUtils.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +4 -2
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/tree/TreeContext.js.map +1 -1
- package/dist-cjs/utils/forkRef.js +34 -0
- package/dist-cjs/utils/forkRef.js.map +1 -0
- package/dist-cjs/utils/getRefFromChildren.js.map +1 -1
- package/dist-cjs/utils/marginMiddleware.js.map +1 -1
- package/dist-cjs/utils/setRef.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-cjs/utils/useForkRef.js +3 -6
- package/dist-cjs/utils/useForkRef.js.map +1 -1
- package/dist-cjs/utils/useResizeObserver.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
- package/dist-es/accordion/AccordionHeader.css.js +1 -1
- package/dist-es/avatar/Avatar.css.js +1 -1
- package/dist-es/badge/Badge.css.js +1 -1
- package/dist-es/banner/Banner.css.js +1 -1
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/breadcrumbs/Breadcrumb.css.js +1 -1
- package/dist-es/breadcrumbs/Breadcrumb.js +5 -6
- package/dist-es/breadcrumbs/Breadcrumb.js.map +1 -1
- package/dist-es/breadcrumbs/Breadcrumbs.css.js +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/card/CardContent.css.js +1 -1
- package/dist-es/card/hasCardSection.js +11 -3
- package/dist-es/card/hasCardSection.js.map +1 -1
- package/dist-es/checkbox/Checkbox.css.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/collapsible/CollapsiblePanel.css.js +1 -1
- package/dist-es/collapsible/CollapsiblePanel.js +16 -16
- package/dist-es/collapsible/CollapsiblePanel.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +18 -36
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +21 -21
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +2 -0
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/DrawerHeader.js +2 -0
- package/dist-es/drawer/DrawerHeader.js.map +1 -1
- package/dist-es/dropdown/Dropdown.css.js +1 -1
- package/dist-es/dropdown/Dropdown.js +30 -31
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/form-field/FormField.css.js +1 -1
- package/dist-es/form-field/FormField.js +2 -2
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.css.js +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +2 -0
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.css.js +1 -1
- package/dist-es/form-field/FormFieldLabel.js +3 -1
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/index.js +4 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.js +18 -7
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +72 -40
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/interactable-card/useInteractableCard.js +2 -3
- package/dist-es/interactable-card/useInteractableCard.js.map +1 -1
- package/dist-es/kbd/Kbd.css.js +1 -1
- package/dist-es/link/Link.css.js +1 -1
- package/dist-es/link/Link.js +2 -0
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link/LinkAction.js +3 -2
- package/dist-es/link/LinkAction.js.map +1 -1
- package/dist-es/link-button/LinkButton.js +3 -2
- package/dist-es/link-button/LinkButton.js.map +1 -1
- package/dist-es/list-box/ListBox.js +20 -27
- package/dist-es/list-box/ListBox.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlNavigationKeys.js +69 -0
- package/dist-es/list-control/ListControlNavigationKeys.js.map +1 -0
- package/dist-es/list-control/ListControlOptionContext.js +44 -0
- package/dist-es/list-control/ListControlOptionContext.js.map +1 -0
- package/dist-es/list-control/ListControlOptionStore.js +153 -0
- package/dist-es/list-control/ListControlOptionStore.js.map +1 -0
- package/dist-es/list-control/ListControlProvider.js +37 -0
- package/dist-es/list-control/ListControlProvider.js.map +1 -0
- package/dist-es/list-control/ListControlRegistry.js +158 -0
- package/dist-es/list-control/ListControlRegistry.js.map +1 -0
- package/dist-es/list-control/ListControlState.js +137 -110
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/mega-menu/MegaMenuGroupHeading.css.js +1 -1
- package/dist-es/mega-menu/MegaMenuListItem.css.js +1 -1
- package/dist-es/menu/MenuGroup.css.js +1 -1
- package/dist-es/menu/MenuItem.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/navigation-item/NavigationItem.css.js +1 -1
- package/dist-es/number-input/NumberInput.css.js +1 -1
- package/dist-es/number-input/NumberInput.js +2 -2
- package/dist-es/number-input/NumberInput.js.map +1 -1
- package/dist-es/on-solid-button/OnSolidButton.css.js +4 -0
- package/dist-es/on-solid-button/OnSolidButton.css.js.map +1 -0
- package/dist-es/on-solid-button/OnSolidButton.js +66 -0
- package/dist-es/on-solid-button/OnSolidButton.js.map +1 -0
- package/dist-es/option/Option.css.js +1 -1
- package/dist-es/option/Option.js +65 -40
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.css.js +1 -1
- package/dist-es/overlay/Overlay.js +13 -3
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js +6 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -1
- package/dist-es/overlay/OverlayFooter.css.js +4 -0
- package/dist-es/overlay/OverlayFooter.css.js.map +1 -0
- package/dist-es/overlay/OverlayFooter.js +28 -0
- package/dist-es/overlay/OverlayFooter.js.map +1 -0
- package/dist-es/overlay/OverlayHeader.css.js +1 -1
- package/dist-es/overlay/OverlayHeader.js +53 -11
- package/dist-es/overlay/OverlayHeader.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.css.js +1 -1
- package/dist-es/overlay/OverlayPanel.js +20 -7
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-es/overlay/OverlayPanelContent.css.js +1 -1
- package/dist-es/overlay/OverlayPanelContent.js +11 -13
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/hasOverlaySection.js +22 -0
- package/dist-es/overlay/hasOverlaySection.js.map +1 -0
- package/dist-es/pagination/CompactPaginator.js +2 -0
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +2 -0
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pill/PillCheckIcon.js.map +1 -1
- package/dist-es/pill-input/PillInput.css.js +1 -1
- package/dist-es/pill-input/PillInput.js +2 -2
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +2 -0
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +2 -0
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.css.js +1 -1
- package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-es/rating/Rating.css.js +1 -1
- package/dist-es/salt-provider/ThemeApplicator.js +10 -6
- package/dist-es/salt-provider/ThemeApplicator.js.map +1 -1
- package/dist-es/side-panel/SidePanelTitle.js +2 -0
- package/dist-es/side-panel/SidePanelTitle.js.map +1 -1
- package/dist-es/side-panel/SidePanelTrigger.js.map +1 -1
- package/dist-es/side-panel/internal/useIsScrollable.js.map +1 -1
- package/dist-es/side-panel/useSidePanel.js +4 -9
- package/dist-es/side-panel/useSidePanel.js.map +1 -1
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js +2 -2
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-es/slider/internal/SliderThumb.js.map +1 -1
- package/dist-es/slider/internal/SliderTooltip.js +2 -0
- package/dist-es/slider/internal/SliderTooltip.js.map +1 -1
- package/dist-es/slider/internal/SliderTrack.css.js +1 -1
- package/dist-es/slider/internal/SliderTrack.js +2 -0
- package/dist-es/slider/internal/SliderTrack.js.map +1 -1
- package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-es/slider/internal/utils.js.map +1 -1
- package/dist-es/stepper/Stepper.js +1 -1
- package/dist-es/stepper/Stepper.js.map +1 -1
- package/dist-es/stepper/internal/StepText.css.js +1 -1
- package/dist-es/stepper/internal/StepText.js +2 -0
- package/dist-es/stepper/internal/StepText.js.map +1 -1
- package/dist-es/switch/Switch.css.js +1 -1
- package/dist-es/table/Table.css.js +1 -1
- package/dist-es/tabs/Tabs.js +1 -1
- package/dist-es/tabs/Tabs.js.map +1 -1
- package/dist-es/tabs/internal/overflow/useOverflow.js.map +1 -1
- package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
- package/dist-es/tag/Tag.css.js +1 -1
- package/dist-es/text/Code.js +1 -1
- package/dist-es/text/Code.js.map +1 -1
- package/dist-es/text/Editorial.js +25 -0
- package/dist-es/text/Editorial.js.map +1 -0
- package/dist-es/text/Eyebrow.js +10 -0
- package/dist-es/text/Eyebrow.js.map +1 -0
- package/dist-es/text/Text.css.js +1 -1
- package/dist-es/text/Text.js +6 -2
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.css.js +1 -1
- package/dist-es/toggle-button/ToggleButton.js +8 -2
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +71 -8
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/toggletip/ToggletipPanel.css.js +1 -1
- package/dist-es/toolbar/ToolbarOverflow.js +8 -4
- package/dist-es/toolbar/ToolbarOverflow.js.map +1 -1
- package/dist-es/toolbar/toolbarUtils.js.map +1 -1
- package/dist-es/tooltip/Tooltip.css.js +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +4 -2
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/tree/TreeContext.js.map +1 -1
- package/dist-es/utils/forkRef.js +32 -0
- package/dist-es/utils/forkRef.js.map +1 -0
- package/dist-es/utils/getRefFromChildren.js.map +1 -1
- package/dist-es/utils/marginMiddleware.js.map +1 -1
- package/dist-es/utils/setRef.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/utils/useForkRef.js +3 -6
- package/dist-es/utils/useForkRef.js.map +1 -1
- package/dist-es/utils/useResizeObserver.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
- package/dist-types/checkbox/CheckboxIcon.d.ts +2 -1
- package/dist-types/collapsible/CollapsiblePanel.d.ts +8 -1
- package/dist-types/combo-box/ComboBox.d.ts +2 -2
- package/dist-types/combo-box/useComboBox.d.ts +3 -6
- package/dist-types/dropdown/Dropdown.d.ts +2 -2
- package/dist-types/form-field/FormFieldHelperText.d.ts +1 -1
- package/dist-types/form-field/FormFieldLabel.d.ts +1 -1
- package/dist-types/form-field-context/FormFieldContext.d.ts +1 -1
- package/dist-types/index.d.ts +1 -0
- package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +2 -0
- package/dist-types/interactable-card/useInteractableCard.d.ts +1 -2
- package/dist-types/list-box/ListBox.d.ts +2 -2
- package/dist-types/list-control/ListControlContext.d.ts +1 -1
- package/dist-types/list-control/ListControlNavigationKeys.d.ts +30 -0
- package/dist-types/list-control/ListControlOptionContext.d.ts +18 -0
- package/dist-types/list-control/ListControlOptionStore.d.ts +17 -0
- package/dist-types/list-control/ListControlProvider.d.ts +11 -0
- package/dist-types/list-control/ListControlRegistry.d.ts +22 -0
- package/dist-types/list-control/ListControlState.d.ts +6 -6
- package/dist-types/on-solid-button/OnSolidButton.d.ts +12 -0
- package/dist-types/on-solid-button/index.d.ts +1 -0
- package/dist-types/option/Option.d.ts +3 -1
- package/dist-types/overlay/Overlay.d.ts +2 -1
- package/dist-types/overlay/OverlayContext.d.ts +4 -0
- package/dist-types/overlay/OverlayFooter.d.ts +4 -0
- package/dist-types/overlay/hasOverlaySection.d.ts +2 -0
- package/dist-types/overlay/index.d.ts +1 -0
- package/dist-types/pill/PillCheckIcon.d.ts +2 -1
- package/dist-types/registerClassNameInjection.d.ts +0 -2
- package/dist-types/salt-provider/SaltProvider.d.ts +1 -1
- package/dist-types/side-panel/internal/useIsScrollable.d.ts +1 -1
- package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +1 -1
- package/dist-types/slider/internal/SliderThumb.d.ts +2 -2
- package/dist-types/slider/internal/SliderTrack.d.ts +2 -2
- package/dist-types/slider/internal/useRangeSliderThumb.d.ts +1 -1
- package/dist-types/slider/internal/useSliderThumb.d.ts +1 -1
- package/dist-types/slider/internal/utils.d.ts +1 -1
- package/dist-types/tabs/internal/overflow/useOverflow.d.ts +2 -2
- package/dist-types/tabs/internal/overflow/useRenderedTabWidth.d.ts +1 -1
- package/dist-types/text/Editorial.d.ts +7 -0
- package/dist-types/text/Eyebrow.d.ts +2 -0
- package/dist-types/text/Text.d.ts +9 -2
- package/dist-types/text/index.d.ts +2 -0
- package/dist-types/toggle-button/ToggleButton.d.ts +1 -1
- package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +2 -1
- package/dist-types/tooltip/useTooltip.d.ts +12 -26
- package/dist-types/tree/TreeContext.d.ts +1 -1
- package/dist-types/utils/forkRef.d.ts +11 -0
- package/dist-types/utils/inferElementType.d.ts +1 -2
- package/dist-types/utils/marginMiddleware.d.ts +1 -1
- package/dist-types/utils/setRef.d.ts +4 -0
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +1 -5
- package/dist-types/utils/useResizeObserver.d.ts +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"forkRef.js","sources":["../src/utils/forkRef.ts"],"sourcesContent":["import type { Ref, RefCallback } from \"react\";\n\ntype RefCleanup = () => void;\n\nfunction attachRef<Instance>(\n ref: Ref<Instance> | null | undefined,\n instance: Instance,\n): RefCleanup | undefined {\n if (typeof ref === \"function\") {\n // From React 19, a callback ref can return a cleanup function, which React\n // calls instead of calling the ref with `null`.\n const cleanup = ref(instance);\n return typeof cleanup === \"function\" ? cleanup : () => ref(null);\n }\n\n if (ref) {\n // `current` is read-only in the React 18 types.\n const objectRef: { current: Instance | null } = ref;\n objectRef.current = instance;\n return () => {\n objectRef.current = null;\n };\n }\n\n return undefined;\n}\n\n/**\n * Merges two refs into a callback ref. Components and hooks should use\n * `useForkRef`, so the merged ref only changes when one of the refs changes.\n * This is for places that can't call a hook, such as a props getter.\n *\n * The returned ref never returns a cleanup itself, so every React version\n * detaches it by calling it with `null`; that is when the cleanups collected\n * from refA and refB are run.\n */\nexport function forkRef<Instance>(\n refA: Ref<Instance> | null | undefined,\n refB: Ref<Instance> | null | undefined,\n): RefCallback<Instance> {\n let cleanup: RefCleanup | undefined;\n\n return (instance: Instance | null) => {\n cleanup?.();\n cleanup = undefined;\n\n if (instance != null) {\n const cleanupA = attachRef(refA, instance);\n const cleanupB = attachRef(refB, instance);\n cleanup = () => {\n cleanupA?.();\n cleanupB?.();\n };\n }\n };\n}\n"],"names":[],"mappings":";;AAIA,SAAS,SAAA,CACP,KACA,QAAA,EACwB;AACxB,EAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAG7B,IAAA,MAAM,OAAA,GAAU,IAAI,QAAQ,CAAA;AAC5B,IAAA,OAAO,OAAO,OAAA,KAAY,UAAA,GAAa,OAAA,GAAU,MAAM,IAAI,IAAI,CAAA;AAAA,EACjE;AAEA,EAAA,IAAI,GAAA,EAAK;AAEP,IAAA,MAAM,SAAA,GAA0C,GAAA;AAChD,IAAA,SAAA,CAAU,OAAA,GAAU,QAAA;AACpB,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,IACtB,CAAA;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;AAWO,SAAS,OAAA,CACd,MACA,IAAA,EACuB;AACvB,EAAA,IAAI,OAAA;AAEJ,EAAA,OAAO,CAAC,QAAA,KAA8B;AACpC,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,EAAA;AACA,IAAA,OAAA,GAAU,MAAA;AAEV,IAAA,IAAI,YAAY,IAAA,EAAM;AACpB,MAAA,MAAM,QAAA,GAAW,SAAA,CAAU,IAAA,EAAM,QAAQ,CAAA;AACzC,MAAA,MAAM,QAAA,GAAW,SAAA,CAAU,IAAA,EAAM,QAAQ,CAAA;AACzC,MAAA,OAAA,GAAU,MAAM;AACd,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,EAAA;AACA,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,EAAA;AAAA,MACF,CAAA;AAAA,IACF;AAAA,EACF,CAAA;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getRefFromChildren.js","sources":["../src/utils/getRefFromChildren.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\n\nexport function getRefFromChildren(child: ReactNode) {\n if (!child || !isValidElement(child)) {\n return null;\n }\n\n return Object.prototype.propertyIsEnumerable.call(child.props, \"ref\")\n ? child.props.ref\n : // @ts-expect-error - ref is not defined on ReactNode\n child.ref;\n}\n"],"names":["isValidElement"],"mappings":";;;;AAEO,SAAS,mBAAmB,KAAA,EAAkB;AACnD,EAAA,IAAI,CAAC,KAAA,IAAS,CAACA,oBAAA,
|
|
1
|
+
{"version":3,"file":"getRefFromChildren.js","sources":["../src/utils/getRefFromChildren.ts"],"sourcesContent":["import { isValidElement, type ReactNode, type Ref } from \"react\";\n\nexport function getRefFromChildren(child: ReactNode) {\n if (!child || !isValidElement<{ ref?: Ref<unknown> }>(child)) {\n return null;\n }\n\n return Object.prototype.propertyIsEnumerable.call(child.props, \"ref\")\n ? child.props.ref\n : // @ts-expect-error - ref is not defined on ReactNode\n child.ref;\n}\n"],"names":["isValidElement"],"mappings":";;;;AAEO,SAAS,mBAAmB,KAAA,EAAkB;AACnD,EAAA,IAAI,CAAC,KAAA,IAAS,CAACA,oBAAA,CAAuC,KAAK,CAAA,EAAG;AAC5D,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,OAAO,MAAA,CAAO,UAAU,oBAAA,CAAqB,IAAA,CAAK,MAAM,KAAA,EAAO,KAAK,CAAA,GAChE,KAAA,CAAM,KAAA,CAAM,GAAA;AAAA;AAAA,IAEZ,KAAA,CAAM;AAAA,GAAA;AACZ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import type { Middleware } from \"@floating-ui/
|
|
1
|
+
{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import type { Middleware } from \"@floating-ui/react\";\n\nexport const margin = (value = 0): Middleware => ({\n name: \"margin\",\n options: value,\n fn(middlewareState) {\n const { x, y, elements } = middlewareState;\n\n if (elements.floating.children.length > 0) {\n const rootChildElement = elements.floating.children[0] as HTMLElement;\n rootChildElement.style.setProperty(\"margin\", value.toString());\n }\n return {\n x: x,\n y: y,\n };\n },\n});\n"],"names":[],"mappings":";;AAEO,MAAM,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAA,MAAmB;AAAA,EAChD,IAAA,EAAM,QAAA;AAAA,EACN,OAAA,EAAS,KAAA;AAAA,EACT,GAAG,eAAA,EAAiB;AAClB,IAAA,MAAM,EAAE,CAAA,EAAG,CAAA,EAAG,QAAA,EAAS,GAAI,eAAA;AAE3B,IAAA,IAAI,QAAA,CAAS,QAAA,CAAS,QAAA,CAAS,MAAA,GAAS,CAAA,EAAG;AACzC,MAAA,MAAM,gBAAA,GAAmB,QAAA,CAAS,QAAA,CAAS,QAAA,CAAS,CAAC,CAAA;AACrD,MAAA,gBAAA,CAAiB,KAAA,CAAM,WAAA,CAAY,QAAA,EAAU,KAAA,CAAM,UAAU,CAAA;AAAA,IAC/D;AACA,IAAA,OAAO;AAAA,MACL,CAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF;AACF,CAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"setRef.js","sources":["../src/utils/setRef.ts"],"sourcesContent":["import type { MutableRefObject } from \"react\";\n\nexport function setRef<T>(\n ref:\n | MutableRefObject<T | null>\n | ((instance: T | null) => void)\n | null\n | undefined,\n value: T | null,\n): void {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref) {\n ref.current = value;\n }\n}\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"setRef.js","sources":["../src/utils/setRef.ts"],"sourcesContent":["import type { MutableRefObject } from \"react\";\n\n/**\n * @deprecated since 1.73.0. Use `useForkRef` to merge refs instead, which also\n * runs the cleanup functions that callback refs can return from React 19.\n */\nexport function setRef<T>(\n ref:\n | MutableRefObject<T | null>\n | ((instance: T | null) => void)\n | null\n | undefined,\n value: T | null,\n): void {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref) {\n ref.current = value;\n }\n}\n"],"names":[],"mappings":";;AAMO,SAAS,MAAA,CACd,KAKA,KAAA,EACM;AACN,EAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,IAAA,GAAA,CAAI,KAAK,CAAA;AAAA,EACX,WAAW,GAAA,EAAK;AACd,IAAA,GAAA,CAAI,OAAA,GAAU,KAAA;AAAA,EAChB;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n autoUpdate,\n FloatingFocusManager,\n type FloatingFocusManagerProps,\n FloatingPortal,\n flip,\n limitShift,\n type Middleware,\n type Platform,\n platform,\n type Strategy,\n shift,\n type UseFloatingOptions,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n type ComponentPropsWithoutRef,\n createContext,\n forwardRef,\n type ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determining whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Use this prop when `FloatingFocusManager` is needed for floating component\n */\n focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n /**\n * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n * `width` and `height` are used to define the size of the floating element.\n *\n */\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n position?: Strategy;\n /**\n * Makes the page unscrollable when the floating component is open.\n */\n lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n width: _width,\n height: _height,\n focusManagerProps,\n lockScroll,\n style: styleProp,\n ...rest\n } = props;\n const style = {\n ...styleProp,\n top,\n left,\n position,\n };\n\n const { themeNext } = useTheme();\n usePreventScroll({ isDisabled: !lockScroll || !open });\n\n const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n if (focusManagerProps && open) {\n return (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </ChosenSaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <div style={style} {...rest} ref={ref} />\n </ChosenSaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps,\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n extends Pick<\n UseFloatingOptions,\n | \"placement\"\n | \"strategy\"\n | \"open\"\n | \"onOpenChange\"\n | \"nodeId\"\n | \"rootContext\"\n > {\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame || false,\n }),\n [platformProp, middleware, animationFrame],\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n ...other\n } = props;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n open,\n boolean,\n reason,\n ) => {\n update();\n onOpenChange?.(open, boolean, reason);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n ...other,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlatform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","useTheme","usePreventScroll","SaltProviderNext","SaltProvider","FloatingPortal","jsx","FloatingFocusManager","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n autoUpdate,\n FloatingFocusManager,\n type FloatingFocusManagerProps,\n FloatingPortal,\n flip,\n limitShift,\n type Middleware,\n type Platform,\n platform,\n type Strategy,\n shift,\n type UseFloatingOptions,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n type ComponentPropsWithoutRef,\n createContext,\n forwardRef,\n type ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determining whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Use this prop when `FloatingFocusManager` is needed for floating component\n */\n focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n /**\n * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n * `width` and `height` are used to define the size of the floating element.\n *\n */\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n position?: Strategy;\n /**\n * Makes the page unscrollable when the floating component is open.\n */\n lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n width: _width,\n height: _height,\n focusManagerProps,\n lockScroll,\n style: styleProp,\n ...rest\n } = props;\n const style = {\n ...styleProp,\n top,\n left,\n position,\n };\n\n const { themeNext } = useTheme();\n usePreventScroll({ isDisabled: !lockScroll || !open });\n\n const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n if (focusManagerProps && open) {\n return (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </ChosenSaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <div style={style} {...rest} ref={ref} />\n </ChosenSaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps,\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n extends Pick<\n UseFloatingOptions,\n | \"placement\"\n | \"strategy\"\n | \"open\"\n | \"onOpenChange\"\n | \"nodeId\"\n | \"rootContext\"\n > {\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame || false,\n }),\n [platformProp, middleware, animationFrame],\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE: Middleware[] = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n ...other\n } = props;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n open,\n boolean,\n reason,\n ) => {\n update();\n onOpenChange?.(open, boolean, reason);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n ...other,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlatform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","useTheme","usePreventScroll","SaltProviderNext","SaltProvider","FloatingPortal","jsx","FloatingFocusManager","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}
|
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var forkRef = require('./forkRef.js');
|
|
5
5
|
|
|
6
6
|
function useForkRef(refA, refB) {
|
|
7
7
|
return React.useMemo(() => {
|
|
8
8
|
if (refA == null && refB == null) {
|
|
9
|
-
return
|
|
9
|
+
return null;
|
|
10
10
|
}
|
|
11
|
-
return (
|
|
12
|
-
setRef.setRef(refA, refValue);
|
|
13
|
-
setRef.setRef(refB, refValue);
|
|
14
|
-
};
|
|
11
|
+
return forkRef.forkRef(refA, refB);
|
|
15
12
|
}, [refA, refB]);
|
|
16
13
|
}
|
|
17
14
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForkRef.js","sources":["../src/utils/useForkRef.ts"],"sourcesContent":["import { type Ref, useMemo } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"useForkRef.js","sources":["../src/utils/useForkRef.ts"],"sourcesContent":["import { type Ref, useMemo } from \"react\";\nimport { forkRef } from \"./forkRef\";\n\nexport function useForkRef<Instance>(\n refA: Ref<Instance> | null | undefined,\n refB: Ref<Instance> | null | undefined,\n): Ref<Instance> | null {\n /**\n * This creates a new function when either ref changes, so React detaches the\n * old forkRef, which runs the cleanups of the old refs, and attaches the new\n * one.\n */\n return useMemo(() => {\n if (refA == null && refB == null) {\n return null;\n }\n\n return forkRef(refA, refB);\n }, [refA, refB]);\n}\n"],"names":["useMemo","forkRef"],"mappings":";;;;;AAGO,SAAS,UAAA,CACd,MACA,IAAA,EACsB;AAMtB,EAAA,OAAOA,cAAQ,MAAM;AACnB,IAAA,IAAI,IAAA,IAAQ,IAAA,IAAQ,IAAA,IAAQ,IAAA,EAAM;AAChC,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAOC,eAAA,CAAQ,MAAM,IAAI,CAAA;AAAA,EAC3B,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AACjB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResizeObserver.js","sources":["../src/utils/useResizeObserver.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\nimport { ownerWindow } from \"./ownerWindow\";\n\nexport interface UseResizeObserverProps {\n ref: RefObject<HTMLElement>;\n onResize: () => void;\n}\n\nexport function useResizeObserver({ ref, onResize }: UseResizeObserverProps) {\n useEffect(() => {\n const element = ref?.current;\n if (!element) return;\n\n const win = ownerWindow(element);\n\n const resizeObserver = new win.ResizeObserver((entries) => {\n requestAnimationFrame(() => {\n if (entries.length === 0) return;\n\n onResize();\n });\n });\n resizeObserver.observe(element);\n\n return () => {\n if (element) {\n resizeObserver.unobserve(element);\n }\n };\n }, [ref, onResize]);\n}\n"],"names":["useEffect","ownerWindow"],"mappings":";;;;;AAQO,SAAS,iBAAA,CAAkB,EAAE,GAAA,EAAK,QAAA,EAAS,EAA2B;AAC3E,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,OAAA;AACrB,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,GAAA,GAAMC,wBAAY,OAAO,CAAA;AAE/B,IAAA,MAAM,cAAA,GAAiB,IAAI,GAAA,CAAI,cAAA,CAAe,CAAC,OAAA,KAAY;AACzD,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AAE1B,QAAA,QAAA,EAAS;AAAA,MACX,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AACD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,cAAA,CAAe,UAAU,OAAO,CAAA;AAAA,MAClC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,QAAQ,CAAC,CAAA;AACpB;;;;"}
|
|
1
|
+
{"version":3,"file":"useResizeObserver.js","sources":["../src/utils/useResizeObserver.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\nimport { ownerWindow } from \"./ownerWindow\";\n\nexport interface UseResizeObserverProps {\n ref: RefObject<HTMLElement | null>;\n onResize: () => void;\n}\n\nexport function useResizeObserver({ ref, onResize }: UseResizeObserverProps) {\n useEffect(() => {\n const element = ref?.current;\n if (!element) return;\n\n const win = ownerWindow(element);\n\n const resizeObserver = new win.ResizeObserver((entries) => {\n requestAnimationFrame(() => {\n if (entries.length === 0) return;\n\n onResize();\n });\n });\n resizeObserver.observe(element);\n\n return () => {\n if (element) {\n resizeObserver.unobserve(element);\n }\n };\n }, [ref, onResize]);\n}\n"],"names":["useEffect","ownerWindow"],"mappings":";;;;;AAQO,SAAS,iBAAA,CAAkB,EAAE,GAAA,EAAK,QAAA,EAAS,EAA2B;AAC3E,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,OAAA;AACrB,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,GAAA,GAAMC,wBAAY,OAAO,CAAA;AAE/B,IAAA,MAAM,cAAA,GAAiB,IAAI,GAAA,CAAI,cAAA,CAAe,CAAC,OAAA,KAAY;AACzD,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AAE1B,QAAA,QAAA,EAAS;AAAA,MACX,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AACD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,cAAA,CAAe,UAAU,OAAO,CAAA;AAAA,MAClC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,QAAQ,CAAC,CAAA;AACpB;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltVerticalNavigationItemContent {\n --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n appearance: none;\n -webkit-appearance: none;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n min-width: 4em;\n padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weak, 0);\n overflow: hidden;\n\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-
|
|
3
|
+
var css_248z = ".saltVerticalNavigationItemContent {\n --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n appearance: none;\n -webkit-appearance: none;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n min-width: 4em;\n padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weak, 0);\n overflow: hidden;\n\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-heading-fontWeight);\n font-family: var(--salt-text-heading-fontFamily);\n text-align: var(--salt-text-textAlign);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-h4-lineHeight);\n font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n left: var(--salt-spacing-50);\n content: \"\";\n position: absolute;\n top: var(--salt-spacing-50);\n bottom: var(--salt-spacing-50);\n border-radius: var(--salt-palette-corner-strongest);\n width: var(--salt-size-indicator);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {\n background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n border-color: var(--salt-navigable-accent-borderColor-active);\n}\n\n.saltVerticalNavigationItemContent .saltIcon,\n.saltVerticalNavigationItemContent .saltBadge {\n min-height: var(--salt-text-lineHeight);\n}\n\n.saltVerticalNavigationItemContent-focused {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n z-index: 1;\n}\n\n.saltVerticalNavigationItemContent:hover {\n background: var(--salt-overlayable-background-hover);\n}\n\n.saltVerticalNavigation .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {\n font-weight: var(--salt-text-heading-fontWeight);\n}\n\n@supports selector(:has(*)) {\n .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {\n background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=VerticalNavigationItemContent.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltVerticalNavigationSubMenu {\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-fixed-100);\n list-style: none;\n padding: var(--salt-spacing-fixed-100) 0 0;\n margin: 0;\n}\n\n.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {\n font-weight: var(--salt-text-
|
|
3
|
+
var css_248z = ".saltVerticalNavigationSubMenu {\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-fixed-100);\n list-style: none;\n padding: var(--salt-spacing-fixed-100) 0 0;\n margin: 0;\n}\n\n.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {\n font-weight: var(--salt-text-heading-fontWeight-lighter);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=VerticalNavigationSubMenu.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: transparent;\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-
|
|
1
|
+
var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: transparent;\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-bolder);\n letter-spacing: var(--salt-text-letterSpacing);\n text-align: left;\n cursor: var(--salt-cursor-hover);\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltAccordionHeader:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader-content {\n padding: var(--salt-spacing-75) 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n outline-color: var(--salt-status-success-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n height: var(--salt-size-base);\n margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n background: transparent;\n opacity: 0.4;\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-cursor-disabled);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=AccordionHeader.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* TODO: Remove hardcoded values - unitless notation-fontSize / size-base because Firefox can't do unit division */\n.salt-density-high {\n --avatar-fontSize-ratio: calc(8 / 20);\n}\n\n.salt-density-medium {\n --avatar-fontSize-ratio: calc(10 / 28);\n}\n\n.salt-density-low {\n --avatar-fontSize-ratio: calc(12 / 36);\n}\n\n.salt-density-touch {\n --avatar-fontSize-ratio: calc(14 / 44);\n}\n\n.salt-density-mobile {\n --avatar-fontSize-ratio: calc(12 / 44);\n}\n\n/* Default variables applied to the root element */\n.saltAvatar {\n --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n --avatar-base-size: var(--salt-size-base);\n --avatar-direct-fontSize: calc(var(--saltAvatar-size) * var(--avatar-fontSize-ratio) / var(--avatar-size-multiplier));\n --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--avatar-direct-fontSize, var(--salt-text-notation-fontSize)));\n --avatar-container-size: var(--saltAvatar-size, calc(var(--avatar-base-size) * var(--avatar-size-multiplier)));\n --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n /* Icon styling */\n --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n background: var(--saltAvatar-background, var(--avatar-background));\n font-size: var(--avatar-fontSize);\n line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n font-family: var(--salt-text-
|
|
1
|
+
var css_248z = "/* TODO: Remove hardcoded values - unitless notation-fontSize / size-base because Firefox can't do unit division */\n.salt-density-high {\n --avatar-fontSize-ratio: calc(8 / 20);\n}\n\n.salt-density-medium {\n --avatar-fontSize-ratio: calc(10 / 28);\n}\n\n.salt-density-low {\n --avatar-fontSize-ratio: calc(12 / 36);\n}\n\n.salt-density-touch {\n --avatar-fontSize-ratio: calc(14 / 44);\n}\n\n.salt-density-mobile {\n --avatar-fontSize-ratio: calc(12 / 44);\n}\n\n/* Default variables applied to the root element */\n.saltAvatar {\n --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n --avatar-base-size: var(--salt-size-base);\n --avatar-direct-fontSize: calc(var(--saltAvatar-size) * var(--avatar-fontSize-ratio) / var(--avatar-size-multiplier));\n --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--avatar-direct-fontSize, var(--salt-text-notation-fontSize)));\n --avatar-container-size: var(--saltAvatar-size, calc(var(--avatar-base-size) * var(--avatar-size-multiplier)));\n --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n /* Icon styling */\n --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n background: var(--saltAvatar-background, var(--avatar-background));\n font-size: var(--avatar-fontSize);\n line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-notation-fontWeight);\n letter-spacing: var(--salt-text-letterSpacing);\n width: var(--avatar-container-size);\n min-width: var(--avatar-container-size);\n height: var(--avatar-container-size);\n min-height: var(--avatar-container-size);\n border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n border: none;\n padding: 0;\n appearance: none;\n -webkit-appearance: none;\n text-decoration: none;\n position: relative;\n\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n user-select: none;\n}\n\n.saltAvatar-entity {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltAvatar-accent {\n --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n width: 100%;\n height: 100%;\n}\n\n.saltAvatar:focus-visible {\n outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n button.saltAvatar:hover::after,\n a.saltAvatar:hover::after {\n background: var(--salt-overlayable-background-hover);\n }\n\n button.saltAvatar:disabled:hover::after {\n background: transparent;\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Avatar.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n --badge-size: var(--salt-text-notation-lineHeight);\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--badge-size);\n min-width: var(--badge-size);\n border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n box-sizing: border-box;\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-text-notation-fontSize);\n font-weight: var(--salt-text-notation-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-notation-lineHeight);\n background: var(--salt-sentiment-accent-background);\n color: var(--salt-content-bold-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));\n}\n\n.saltBadge-dotBadge {\n height: var(--salt-size-adornment);\n min-width: var(--salt-size-adornment);\n padding: 0;\n --badge-size: var(--salt-size-adornment);\n}\n\n.saltBadge-dotBadge.saltBadge-topRight {\n right: calc((var(--salt-size-adornment) / 2));\n}\n";
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n --badge-size: var(--salt-text-notation-lineHeight);\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--badge-size);\n min-width: var(--badge-size);\n border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n box-sizing: border-box;\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-text-notation-fontSize);\n font-weight: var(--salt-text-notation-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-notation-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n background: var(--salt-sentiment-accent-background);\n color: var(--salt-content-bold-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));\n}\n\n.saltBadge-dotBadge {\n height: var(--salt-size-adornment);\n min-width: var(--salt-size-adornment);\n padding: 0;\n --badge-size: var(--salt-size-adornment);\n}\n\n.saltBadge-dotBadge.saltBadge-topRight {\n right: calc((var(--salt-size-adornment) / 2));\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Badge.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to root component */\n.saltBanner {\n --banner-background: var(--salt-container-primary-background);\n\n background: var(--saltBanner-background, var(--banner-background));\n border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n box-sizing: border-box;\n display: inline-flex;\n gap: var(--salt-spacing-75);\n padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-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 color: var(--salt-content-primary-foreground);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n --banner-background: var(--salt-status-success-background);\n}\n";
|
|
1
|
+
var css_248z = "/* Styles applied to root component */\n.saltBanner {\n --banner-background: var(--salt-container-primary-background);\n\n background: var(--saltBanner-background, var(--banner-background));\n border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n box-sizing: border-box;\n display: inline-flex;\n gap: var(--salt-spacing-75);\n padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n color: var(--salt-content-primary-foreground);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n --banner-background: var(--salt-status-success-background);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Banner.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Children,\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n isValidElement,\n type ReactNode,\n useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactNode;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n function BorderLayout<T extends ElementType>(\n props: unknown,\n ref?: ForwardedRef<unknown>,\n ) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const { as, children, className, gap, style, ...rest } =\n props as BorderLayoutProps<T>;\n\n const borderAreas = Children.map(\n children,\n (child)
|
|
1
|
+
{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Children,\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n isValidElement,\n type ReactNode,\n useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactNode;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n function BorderLayout<T extends ElementType>(\n props: unknown,\n ref?: ForwardedRef<unknown>,\n ) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const { as, children, className, gap, style, ...rest } =\n props as BorderLayoutProps<T>;\n\n const borderAreas = Children.map(\n children,\n (child) =>\n isValidElement<{ position?: BorderPosition }>(child) &&\n child.props.position,\n ) as BorderPosition[];\n\n const hasNorth = borderAreas.includes(\"north\");\n const hasWest = borderAreas.includes(\"west\");\n const hasEast = borderAreas.includes(\"east\");\n const hasSouth = borderAreas.includes(\"south\");\n\n const middleColumns = [\n hasWest ? \"west\" : undefined,\n \"center\",\n hasEast ? \"east\" : undefined,\n ].filter(Boolean) as BorderPosition[];\n\n const gridTemplateColumns = [\n hasWest ? \"min-content\" : undefined,\n \"1fr\",\n hasEast ? \"min-content\" : undefined,\n ]\n .filter(Boolean)\n .join(\" \");\n\n const gridTemplateRows = [\n hasNorth ? \"min-content\" : undefined,\n \"1fr\",\n hasSouth ? \"min-content\" : undefined,\n ]\n .filter(Boolean)\n .join(\" \");\n\n const gridTemplateSections = [\n hasNorth\n ? `\"${\"north \".repeat(middleColumns.length).trimEnd()}\"`\n : undefined,\n `\"${middleColumns.join(\" \")}\"`,\n hasSouth\n ? `\"${\"south \".repeat(middleColumns.length).trimEnd()}\"`\n : undefined,\n ].filter(Boolean);\n\n const gridTemplateAreas = gridTemplateSections.join(\" \");\n\n const hasMainSection = borderAreas.includes(\"center\");\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!hasMainSection) {\n console.warn(\n \"No main section has been found. A main section should be provided.\",\n );\n }\n }\n }, [hasMainSection]);\n\n const borderLayoutStyles = {\n ...style,\n \"--gridLayout-gridTemplate\": gridTemplateAreas,\n \"--gridLayout-areaColumns\": gridTemplateColumns,\n \"--gridLayout-areaRows\": gridTemplateRows,\n };\n\n return (\n <GridLayout\n as={as as ElementType}\n className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n columns={numberOfColumns}\n gap={gap || 0}\n style={borderLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </GridLayout>\n );\n },\n);\n"],"names":["BorderLayout"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltBreadcrumb {\n align-items: center;\n display: inline-flex;\n flex: 0 1 auto;\n gap: var(--salt-spacing-100);\n list-style: none;\n min-width: 0;\n}\n\n.saltBreadcrumb-current,\n.saltBreadcrumb-label,\n.saltBreadcrumb-link,\n.saltBreadcrumb-trigger {\n min-width: 0;\n}\n\n.saltBreadcrumb-trigger {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-
|
|
1
|
+
var css_248z = ".saltBreadcrumb {\n align-items: center;\n display: inline-flex;\n flex: 0 1 auto;\n gap: var(--salt-spacing-100);\n list-style: none;\n min-width: 0;\n}\n\n.saltBreadcrumb-current,\n.saltBreadcrumb-label,\n.saltBreadcrumb-link,\n.saltBreadcrumb-trigger {\n min-width: 0;\n}\n\n.saltBreadcrumb-trigger {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight);\n gap: var(--salt-spacing-50);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-label-lineHeight);\n max-width: 100%;\n text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current) {\n text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):hover {\n text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):active {\n text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-trigger:focus {\n outline: var(--salt-focused-outline);\n text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-current {\n cursor: var(--salt-cursor-text);\n}\n\n.saltBreadcrumb-separator {\n --saltIcon-color: var(--salt-content-secondary-foreground);\n --saltIcon-size: var(--salt-size-icon);\n\n flex: 0 0 auto;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Breadcrumb.css.js.map
|
|
@@ -27,13 +27,12 @@ function isMissingBreadcrumbContent(children) {
|
|
|
27
27
|
}
|
|
28
28
|
let missingBreadcrumbContentWarningShown = false;
|
|
29
29
|
function warnIfMissingBreadcrumbContent() {
|
|
30
|
-
if (process.env.NODE_ENV
|
|
31
|
-
|
|
30
|
+
if (process.env.NODE_ENV !== "production" && !missingBreadcrumbContentWarningShown) {
|
|
31
|
+
missingBreadcrumbContentWarningShown = true;
|
|
32
|
+
console.warn(
|
|
33
|
+
"Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items."
|
|
34
|
+
);
|
|
32
35
|
}
|
|
33
|
-
missingBreadcrumbContentWarningShown = true;
|
|
34
|
-
console.warn(
|
|
35
|
-
"Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items."
|
|
36
|
-
);
|
|
37
36
|
}
|
|
38
37
|
const Breadcrumb = forwardRef(
|
|
39
38
|
function Breadcrumb2(props, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType } from \"../utils\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { BreadcrumbLabel } from \"./BreadcrumbLabel\";\nimport { BreadcrumbTrigger } from \"./BreadcrumbTrigger\";\nimport {\n BreadcrumbContext,\n useBreadcrumbContext,\n} from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n return (\n (typeof children === \"string\" && children.trim() !== \"\") ||\n typeof children === \"number\"\n );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n const childArray = Children.toArray(children);\n\n return (\n childArray.length === 0 ||\n childArray.every(\n (child) => typeof child === \"string\" && child.trim() === \"\",\n )\n );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n if (\n process.env.NODE_ENV
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType } from \"../utils\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { BreadcrumbLabel } from \"./BreadcrumbLabel\";\nimport { BreadcrumbTrigger } from \"./BreadcrumbTrigger\";\nimport {\n BreadcrumbContext,\n useBreadcrumbContext,\n} from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n return (\n (typeof children === \"string\" && children.trim() !== \"\") ||\n typeof children === \"number\"\n );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n const childArray = Children.toArray(children);\n\n return (\n childArray.length === 0 ||\n childArray.every(\n (child) => typeof child === \"string\" && child.trim() === \"\",\n )\n );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n if (\n process.env.NODE_ENV !== \"production\" &&\n !missingBreadcrumbContentWarningShown\n ) {\n missingBreadcrumbContentWarningShown = true;\n console.warn(\n \"Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items.\",\n );\n }\n}\n\nexport interface BreadcrumbProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n /**\n * Custom breadcrumb content. Use this for advanced composition with\n * `BreadcrumbTrigger` and `BreadcrumbLabel`.\n */\n children?: ReactNode;\n /**\n * If `true`, the breadcrumb represents the current page.\n */\n current?: boolean;\n /**\n * The URL for the breadcrumb. Provide this for the current breadcrumb so it\n * renders as a focusable link with `aria-current=\"page\"`.\n */\n href?: string;\n /**\n * Render prop to enable customization of the underlying link element.\n */\n render?: RenderPropsType[\"render\"];\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n function Breadcrumb(props, ref) {\n const {\n children,\n className,\n current: currentProp,\n href,\n render,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-breadcrumb\",\n css: breadcrumbCss,\n window: targetWindow,\n });\n\n const parentContext = useBreadcrumbContext();\n const current = parentContext?.current ?? Boolean(currentProp);\n const onNavigate = parentContext?.onNavigate;\n const placement = parentContext?.placement ?? \"trail\";\n const showSeparator = parentContext?.showSeparator ?? false;\n const triggerRef = parentContext?.triggerRef;\n const resolvedRender = render ?? parentContext?.render;\n const { LevelSeparatorIcon } = useIcon();\n const missingContent = isMissingBreadcrumbContent(children);\n\n if (missingContent) {\n warnIfMissingBreadcrumbContent();\n }\n\n const primitiveChildren = isPrimitiveBreadcrumbLabel(children)\n ? children\n : undefined;\n const content = missingContent ? null : primitiveChildren !== undefined ? (\n <BreadcrumbTrigger>\n <BreadcrumbLabel>{primitiveChildren}</BreadcrumbLabel>\n </BreadcrumbTrigger>\n ) : (\n children\n );\n const context = {\n current,\n href,\n onNavigate,\n placement,\n render: resolvedRender,\n showSeparator,\n triggerRef,\n };\n\n return (\n <li\n ref={ref}\n className={clsx(\n placement === \"disclosure\"\n ? withBreadcrumbsBaseName(\"disclosureListItem\")\n : withBaseName(),\n className,\n )}\n {...rest}\n >\n <BreadcrumbContext.Provider value={context}>\n {content}\n {placement === \"trail\" && showSeparator ? (\n <LevelSeparatorIcon\n aria-hidden\n className={withBaseName(\"separator\")}\n />\n ) : null}\n </BreadcrumbContext.Provider>\n </li>\n );\n },\n);\n"],"names":["Breadcrumb","breadcrumbCss"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltBreadcrumbs {\n display: block;\n margin-block: var(--salt-spacing-25);\n}\n\n.saltBreadcrumbs-ol {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--salt-spacing-100);\n justify-content: flex-start;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltBreadcrumbs-ol-wrap {\n flex-wrap: wrap;\n}\n\n.saltBreadcrumbs-collapseItem {\n align-items: center;\n display: inline-flex;\n flex: 0 1 auto;\n gap: var(--salt-spacing-100);\n list-style: none;\n min-width: 0;\n}\n\n.saltBreadcrumbs-collapseButton[aria-expanded=\"true\"] {\n --saltButton-background: var(--salt-actionable-subtle-background-active);\n --saltButton-background-hover: var(--salt-actionable-subtle-background-active);\n --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);\n --saltButton-text-color-hover: var(--salt-actionable-subtle-foreground-active);\n --saltButton-borderColor: var(--salt-actionable-subtle-borderColor-active);\n --saltButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-active);\n cursor: var(--salt-cursor-active);\n}\n\n.saltBreadcrumbs-disclosure {\n background: var(--salt-container-primary-background);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n overflow: hidden;\n overflow-y: auto;\n min-width: 10em;\n position: relative;\n z-index: var(--salt-zIndex-flyover);\n box-shadow: var(--salt-overlayable-shadow-popout);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltBreadcrumbs-disclosureList {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltBreadcrumbs-disclosureListItem {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltBreadcrumbs-disclosureItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n text-decoration: none;\n width: 100%;\n}\n\n.saltBreadcrumbs-disclosureItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltBreadcrumbs-disclosureItem:hover {\n outline: none;\n}\n\n.saltBreadcrumbs-disclosureItem:hover,\n.saltBreadcrumbs-disclosureItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltBreadcrumbs-disclosureItem:active {\n background: var(--salt-selectable-background-selected);\n box-shadow:\n 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"],\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background
|
|
1
|
+
var css_248z = ".saltBreadcrumbs {\n display: block;\n margin-block: var(--salt-spacing-25);\n}\n\n.saltBreadcrumbs-ol {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--salt-spacing-100);\n justify-content: flex-start;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltBreadcrumbs-ol-wrap {\n flex-wrap: wrap;\n}\n\n.saltBreadcrumbs-collapseItem {\n align-items: center;\n display: inline-flex;\n flex: 0 1 auto;\n gap: var(--salt-spacing-100);\n list-style: none;\n min-width: 0;\n}\n\n.saltBreadcrumbs-collapseButton[aria-expanded=\"true\"] {\n --saltButton-background: var(--salt-actionable-subtle-background-active);\n --saltButton-background-hover: var(--salt-actionable-subtle-background-active);\n --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);\n --saltButton-text-color-hover: var(--salt-actionable-subtle-foreground-active);\n --saltButton-borderColor: var(--salt-actionable-subtle-borderColor-active);\n --saltButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-active);\n cursor: var(--salt-cursor-active);\n}\n\n.saltBreadcrumbs-disclosure {\n background: var(--salt-container-primary-background);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n overflow: hidden;\n overflow-y: auto;\n min-width: 10em;\n position: relative;\n z-index: var(--salt-zIndex-flyover);\n box-shadow: var(--salt-overlayable-shadow-popout);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltBreadcrumbs-disclosureList {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltBreadcrumbs-disclosureListItem {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltBreadcrumbs-disclosureItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n text-decoration: none;\n width: 100%;\n}\n\n.saltBreadcrumbs-disclosureItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltBreadcrumbs-disclosureItem:hover {\n outline: none;\n}\n\n.saltBreadcrumbs-disclosureItem:hover,\n.saltBreadcrumbs-disclosureItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltBreadcrumbs-disclosureItem:active {\n background: var(--salt-selectable-background-selected);\n box-shadow:\n 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"],\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"]:active {\n opacity: 0.4;\n background: var(--salt-selectable-background);\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-cursor-disabled);\n box-shadow: none;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Breadcrumbs.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n@media (hover: hover) {\n /* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n .saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active,\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton.saltButton-disabled,\n.saltButton.saltButton-disabled:active,\n.saltButton.saltButton-disabled:focus-visible,\n.saltButton.saltButton-disabled:focus-visible:active,\n.saltButton.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background));\n color: var(--saltButton-text-color-disabled, var(--button-text-color));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
|
|
1
|
+
var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n@media (hover: hover) {\n /* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n .saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active,\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton.saltButton-disabled,\n.saltButton.saltButton-disabled:active,\n.saltButton.saltButton-disabled:focus-visible,\n.saltButton.saltButton-disabled:focus-visible:active,\n.saltButton.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background));\n color: var(--saltButton-text-color-disabled, var(--button-text-color));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n/* Lets a nested Text with styleAs=\"inherit\" use the action weights */\n.saltButton {\n --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);\n --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltButton strong,\n.saltButton b {\n font-weight: var(--salt-text-action-fontWeight-bolder);\n}\n\n/* Deprecated, use a nested Text with styleAs=\"inherit\" and fontWeight=\"lighter\" instead */\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Button.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltCardContent {\n padding: var(--saltCardContent-padding, var(--salt-spacing-200));\n box-sizing: border-box;\n}\n\n.saltCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltCard-sectioned > .saltCardContent + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent + .saltCardContent {\n padding-top: 0;\n}\n\n.saltCard-sectioned > .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent {\n flex: 1 1 auto;\n}\n\n@supports selector(:has(*)) {\n .saltCard > .saltCardHeader + .saltCardContent,\n .saltCard > .saltCardContent + .saltCardContent,\n .saltLinkCard > .saltCardHeader + .saltCardContent,\n .saltLinkCard > .saltCardContent + .saltCardContent,\n .saltInteractableCard > .saltCardHeader + .saltCardContent,\n .saltInteractableCard > .saltCardContent + .saltCardContent {\n padding-top: 0;\n }\n\n .saltCard > .saltCardContent,\n .saltLinkCard > .saltCardContent,\n .saltInteractableCard > .saltCardContent {\n flex: 1 1 auto;\n }\n}\n";
|
|
1
|
+
var css_248z = ".saltCardContent {\n padding: var(--saltCardContent-padding, var(--salt-spacing-200));\n box-sizing: border-box;\n}\n\n/* Collapse vertical padding when rendered as a closed CollapsiblePanel */\n.saltCardContent.saltCollapsiblePanel[aria-hidden=\"true\"] {\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.saltCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltCard-sectioned > .saltCardContent + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent + .saltCardContent {\n padding-top: 0;\n}\n\n.saltCard-sectioned > .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent {\n flex: 1 1 auto;\n}\n\n@supports selector(:has(*)) {\n .saltCard > .saltCardHeader + .saltCardContent,\n .saltCard > .saltCardContent + .saltCardContent,\n .saltLinkCard > .saltCardHeader + .saltCardContent,\n .saltLinkCard > .saltCardContent + .saltCardContent,\n .saltInteractableCard > .saltCardHeader + .saltCardContent,\n .saltInteractableCard > .saltCardContent + .saltCardContent {\n padding-top: 0;\n }\n\n .saltCard > .saltCardContent,\n .saltLinkCard > .saltCardContent,\n .saltInteractableCard > .saltCardContent {\n flex: 1 1 auto;\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CardContent.css.js.map
|
|
@@ -4,11 +4,19 @@ import { CardFooter } from './CardFooter.js';
|
|
|
4
4
|
import { CardHeader } from './CardHeader.js';
|
|
5
5
|
|
|
6
6
|
const cardSectionTypes = [CardHeader, CardContent, CardFooter];
|
|
7
|
-
function
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
function isCardSection(child) {
|
|
8
|
+
if (!isValidElement(child)) {
|
|
9
|
+
return false;
|
|
10
|
+
}
|
|
11
|
+
const render = child.props.render;
|
|
12
|
+
const renderedChild = isValidElement(render) ? render : child;
|
|
13
|
+
return cardSectionTypes.some(
|
|
14
|
+
(sectionType) => renderedChild.type === sectionType
|
|
10
15
|
);
|
|
11
16
|
}
|
|
17
|
+
function hasCardSection(children) {
|
|
18
|
+
return Children.toArray(children).some(isCardSection);
|
|
19
|
+
}
|
|
12
20
|
|
|
13
21
|
export { hasCardSection };
|
|
14
22
|
//# sourceMappingURL=hasCardSection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hasCardSection.js","sources":["../src/card/hasCardSection.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { CardContent } from \"./CardContent\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardHeader } from \"./CardHeader\";\n\nconst cardSectionTypes = [CardHeader, CardContent, CardFooter];\n\
|
|
1
|
+
{"version":3,"file":"hasCardSection.js","sources":["../src/card/hasCardSection.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { CardContent } from \"./CardContent\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardHeader } from \"./CardHeader\";\n\nconst cardSectionTypes = [CardHeader, CardContent, CardFooter];\n\nfunction isCardSection(child: ReactNode): boolean {\n if (!isValidElement(child)) {\n return false;\n }\n\n // Salt's render prop replaces a component's root without adding a wrapper.\n const render = (child.props as { render?: ReactNode }).render;\n const renderedChild = isValidElement(render) ? render : child;\n\n return cardSectionTypes.some(\n (sectionType) => renderedChild.type === sectionType,\n );\n}\n\nexport function hasCardSection(children: ReactNode): boolean {\n return Children.toArray(children).some(isCardSection);\n}\n"],"names":[],"mappings":";;;;;AAKA,MAAM,gBAAA,GAAmB,CAAC,UAAA,EAAY,WAAA,EAAa,UAAU,CAAA;AAE7D,SAAS,cAAc,KAAA,EAA2B;AAChD,EAAA,IAAI,CAAC,cAAA,CAAe,KAAK,CAAA,EAAG;AAC1B,IAAA,OAAO,KAAA;AAAA,EACT;AAGA,EAAA,MAAM,MAAA,GAAU,MAAM,KAAA,CAAiC,MAAA;AACvD,EAAA,MAAM,aAAA,GAAgB,cAAA,CAAe,MAAM,CAAA,GAAI,MAAA,GAAS,KAAA;AAExD,EAAA,OAAO,gBAAA,CAAiB,IAAA;AAAA,IACtB,CAAC,WAAA,KAAgB,aAAA,CAAc,IAAA,KAAS;AAAA,GAC1C;AACF;AAEO,SAAS,eAAe,QAAA,EAA8B;AAC3D,EAAA,OAAO,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,KAAK,aAAa,CAAA;AACtD;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: inline-flex;\n width: fit-content;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground);\n\n cursor: var(--salt-cursor-disabled);\n opacity: 0.4;\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-spacing-fixed-100);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground-decorative);\n border-color: var(--salt-status-error-borderColor);\n color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground-decorative);\n border-color: var(--salt-status-warning-borderColor);\n color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
|
|
1
|
+
var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: inline-flex;\n width: fit-content;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground);\n\n cursor: var(--salt-cursor-disabled);\n opacity: 0.4;\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-spacing-fixed-100);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground-decorative);\n border-color: var(--salt-status-error-borderColor);\n color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground-decorative);\n border-color: var(--salt-status-warning-borderColor);\n color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Checkbox.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n border-radius: var(--salt-palette-corner-weaker, 0);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n /* Using overflow:hidden here causes a thin white line */\n clip-path: border-box;\n box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n opacity: 0.4;\n\n border-color: var(--salt-selectable-borderColor);\n background: var(--salt-container-primary-background);\n color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground-decorative);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground-decorative);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly,\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n border-style: var(--salt-borderStyle-dashed);\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n position: absolute;\n /* Ensure a gap doesn't appear when device scaling is used */\n transform: scale(1.01);\n}\n";
|
|
1
|
+
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n border-radius: var(--salt-palette-corner-weaker, 0);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n /* Using overflow:hidden here causes a thin white line */\n clip-path: border-box;\n box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n}\n\n.saltCheckbox-disabled:hover .saltCheckboxIcon,\n.saltCheckbox-disabled:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n}\n\n.saltCheckbox-disabled:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-disabled:hover .saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n opacity: 0.4;\n\n border-color: var(--salt-selectable-borderColor);\n background: var(--salt-container-primary-background);\n color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground-decorative);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground-decorative);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly,\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n border-style: var(--salt-borderStyle-dashed);\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n position: absolute;\n /* Ensure a gap doesn't appear when device scaling is used */\n transform: scale(1.01);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CheckboxIcon.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n checked?: boolean;\n className?: string;\n disabled?: boolean;\n /**\n * @deprecated since 1.8.0-rc.2. Use `validationStatus` instead.\n */\n error?: boolean;\n indeterminate?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n checked = false,\n className,\n disabled,\n error,\n indeterminate,\n validationStatus,\n readOnly,\n}: CheckboxIconProps):
|
|
1
|
+
{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n checked?: boolean;\n className?: string;\n disabled?: boolean;\n /**\n * @deprecated since 1.8.0-rc.2. Use `validationStatus` instead.\n */\n error?: boolean;\n indeterminate?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n checked = false,\n className,\n disabled,\n error,\n indeterminate,\n validationStatus,\n readOnly,\n}: CheckboxIconProps): ReactElement => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-icon\",\n css: checkboxIconCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"error\")]: error,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"indeterminate\")]: indeterminate,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className,\n )}\n >\n {checked && !indeterminate && !readOnly && (\n <CheckmarkSolidIcon className={withBaseName(\"icon\")} />\n )}\n {checked && !indeterminate && readOnly && (\n <CheckmarkIcon className={withBaseName(\"icon\")} />\n )}\n </div>\n );\n};\n"],"names":["checkboxIconCss"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,KAAuC;AACrC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,oBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA;AAAA,UACjC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,CAAC,iBAAiB,CAAC,QAAA,wBAC5B,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QAEtD,OAAA,IAAW,CAAC,aAAA,IAAiB,QAAA,wBAC3B,aAAA,EAAA,EAAc,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA;AAAA;AAAA,GAEpD;AAEJ;;;;"}
|