npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.17 → 1.0.0-alpha.18 - Mend

@salt-ds/lab 1.0.0-alpha.17 → 1.0.0-alpha.18

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

Files changed (138) hide show

package/dist-cjs/dropdown-next/DropdownNext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport {\n makePrefixer,\n useId,\n useForkRef,\n UseFloatingUIProps,\n SaltProvider,\n} from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n useRef,\n forwardRef,\n HTMLAttributes,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n Ref,\n ForwardedRef,\n SyntheticEvent,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport dropdownNextCss from \"./DropdownNext.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { FloatingPortal, Placement } from \"@floating-ui/react\";\nimport { useDropdownNext } from \"./useDropdownNext\";\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport interface DropdownNextProps\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"onSelect\"> {\n /*\n If `true`, dropdown will be disabled.\n /\n disabled?: boolean;\n /\n Initially selected value for the dropdown, for use only in uncontrolled component.\n /\n defaultSelected?: string;\n /\n List of options when using a dropdown.\n /\n source: string[];\n /\n If `true`, dropdown is read only.\n /\n readOnly?: boolean;\n /\n Background styling variant. Defaults to `primary` .\n /\n variant?: \"primary\" \| \"secondary\";\n /\n Placement of dropdown list. Defaults to `bottom` .\n /\n placement?: Placement;\n /\n Optional ref for the list component.\n /\n listRef?: Ref<HTMLUListElement>;\n /\n Additional props for dropdown list.\n /\n ListProps?: ListNextProps;\n / Status open or close for use in controlled component. /\n open?: boolean;\n /\n Callback for list selection event\n /\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n /\n / Selected prop for use in controlled component. /\n selected?: string;\n / Highlighted item prop for use in controlled component. */\n highlightedItem?: string;\n}\n\nexport const DropdownNext = forwardRef(function DropdownNext(\n props: DropdownNextProps,\n ref: ForwardedRef<HTMLButtonElement>\n) {\n const {\n className,\n disabled,\n variant = \"primary\",\n id: dropdownIdProp,\n defaultSelected,\n readOnly,\n source,\n placement = \"bottom\",\n open: openControlProp,\n selected: selectedControlProp,\n highlightedItem: highlightedItemControlProp,\n onFocus,\n onKeyDown,\n onBlur,\n onMouseOver,\n onMouseDown,\n onSelect,\n listRef: listRefProp,\n ListProps,\n ...restProps\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown-next\",\n css: dropdownNextCss,\n window: targetWindow,\n });\n\n const listId = useId(ListProps?.id);\n const dropdownId = useId(dropdownIdProp);\n const listRef = useRef<HTMLUListElement>(null);\n\n const setListRef = useForkRef(listRefProp, listRef);\n const listProps = {\n defaultSelected,\n disabled,\n ref: listRef,\n id: listId,\n onSelect: onSelect,\n selected: selectedControlProp,\n highlightedItem: highlightedItemControlProp,\n };\n\n const {\n handlers,\n activeDescendant,\n selectedItem,\n highlightedItem,\n getListItems,\n portalProps,\n } = useDropdownNext({\n listProps,\n placement,\n openControlProp,\n });\n\n const { open, floating, reference, getDropdownNextProps } = portalProps;\n const {\n focusHandler,\n keyDownHandler,\n blurHandler,\n mouseOverHandler,\n mouseDownHandler,\n } = handlers;\n\n const triggerRef = useForkRef<HTMLButtonElement>(ref, reference);\n\n const getIcon = () => {\n if (readOnly) return;\n\n const iconClassName = clsx(withBaseName(\"icon\"), {\n [withBaseName(\"disabled\")]: disabled,\n });\n\n return open ? (\n <ChevronUpIcon className={iconClassName} />\n ) : (\n <ChevronDownIcon className={iconClassName} />\n );\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n if (disabled) return;\n focusHandler(event);\n onFocus?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (disabled \|\| readOnly) return;\n keyDownHandler(event);\n onKeyDown?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n blurHandler();\n onBlur?.(event);\n };\n\n const handleMouseOver = (event: MouseEvent<HTMLButtonElement>) => {\n mouseOverHandler();\n onMouseOver?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n if (disabled \|\| readOnly) return;\n mouseDownHandler();\n onMouseDown?.(event);\n };\n\n return (\n <div className={clsx(withBaseName())}>\n <button\n id={dropdownId}\n disabled={disabled}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onMouseOver={handleMouseOver}\n onMouseDown={handleMouseDown}\n onBlur={handleBlur}\n value={selectedItem}\n className={clsx(\n withBaseName(\"button\"),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className\n )}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-activedescendant={activeDescendant}\n tabIndex={disabled ? -1 : 0}\n aria-owns={listId}\n aria-controls={listId}\n aria-disabled={disabled}\n {...restProps}\n ref={triggerRef}\n >\n <span className={clsx(withBaseName(\"buttonText\"))}>{selectedItem}</span>\n {getIcon()}\n </button>\n {open && (\n <FloatingPortal>\n <SaltProvider>\n <div ref={floating} {...getDropdownNextProps()}>\n <ListNext\n id={listId}\n className={clsx(withBaseName(\"list\"), ListProps?.className)}\n disableFocus\n disabled={disabled \|\| ListProps?.disabled}\n selected={selectedItem}\n highlightedItem={highlightedItem}\n {...ListProps}\n ref={setListRef}\n >\n {getListItems(source)}\n </ListNext>\n </div>\n </SaltProvider>\n </FloatingPortal>\n )}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","DropdownNext","useWindow","useComponentCssInjection","dropdownNextCss","useId","useRef","useForkRef","useDropdownNext","clsx","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","FloatingPortal","SaltProvider","ListNext"],"mappings":"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"}
1	+ {"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport {\n makePrefixer,\n useId,\n useForkRef,\n useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n useRef,\n forwardRef,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n Ref,\n ForwardedRef,\n SyntheticEvent,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport dropdownNextCss from \"./DropdownNext.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Placement } from \"@floating-ui/react\";\nimport { useDropdownNext } from \"./useDropdownNext\";\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport interface DropdownNextProps\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"onSelect\"> {\n /*\n If `true`, dropdown will be disabled.\n /\n disabled?: boolean;\n /\n Initially selected value for the dropdown, for use only in uncontrolled component.\n /\n defaultSelected?: string;\n /\n List of options when using a dropdown.\n /\n source: string[];\n /\n If `true`, dropdown is read only.\n /\n readOnly?: boolean;\n /\n Background styling variant. Defaults to `primary` .\n /\n variant?: \"primary\" \| \"secondary\";\n /\n Placement of dropdown list. Defaults to `bottom` .\n /\n placement?: Placement;\n /\n Optional ref for the list component.\n /\n listRef?: Ref<HTMLUListElement>;\n /\n Additional props for dropdown list.\n /\n ListProps?: ListNextProps;\n / Status open or close for use in controlled component. /\n open?: boolean;\n /\n Callback for list selection event\n /\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n /\n / Selected prop for use in controlled component. /\n selected?: string;\n / Highlighted item prop for use in controlled component. */\n highlightedItem?: string;\n}\n\nexport const DropdownNext = forwardRef(function DropdownNext(\n props: DropdownNextProps,\n ref: ForwardedRef<HTMLButtonElement>\n) {\n const {\n className,\n disabled,\n variant = \"primary\",\n id: dropdownIdProp,\n defaultSelected,\n readOnly,\n source,\n placement = \"bottom\",\n open: openControlProp,\n selected: selectedControlProp,\n highlightedItem: highlightedItemControlProp,\n onFocus,\n onKeyDown,\n onBlur,\n onMouseOver,\n onMouseDown,\n onSelect,\n listRef: listRefProp,\n ListProps,\n ...restProps\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown-next\",\n css: dropdownNextCss,\n window: targetWindow,\n });\n\n const listId = useId(ListProps?.id);\n const dropdownId = useId(dropdownIdProp);\n const listRef = useRef<HTMLUListElement>(null);\n\n const setListRef = useForkRef(listRefProp, listRef);\n const listProps = {\n defaultSelected,\n disabled,\n ref: listRef,\n id: listId,\n onSelect: onSelect,\n selected: selectedControlProp,\n highlightedItem: highlightedItemControlProp,\n };\n\n const {\n handlers,\n activeDescendant,\n selectedItem,\n highlightedItem,\n getListItems,\n portalProps,\n } = useDropdownNext({\n listProps,\n placement,\n openControlProp,\n });\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { open, floating, reference, getDropdownNextProps, getPosition } =\n portalProps;\n const {\n focusHandler,\n keyDownHandler,\n blurHandler,\n mouseOverHandler,\n mouseDownHandler,\n } = handlers;\n\n const triggerRef = useForkRef<HTMLButtonElement>(ref, reference);\n\n const getIcon = () => {\n if (readOnly) return;\n\n const iconClassName = clsx(withBaseName(\"icon\"), {\n [withBaseName(\"disabled\")]: disabled,\n });\n\n return open ? (\n <ChevronUpIcon className={iconClassName} />\n ) : (\n <ChevronDownIcon className={iconClassName} />\n );\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n if (disabled) return;\n focusHandler(event);\n onFocus?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (disabled \|\| readOnly) return;\n keyDownHandler(event);\n onKeyDown?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n blurHandler();\n onBlur?.(event);\n };\n\n const handleMouseOver = (event: MouseEvent<HTMLButtonElement>) => {\n mouseOverHandler();\n onMouseOver?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n if (disabled \|\| readOnly) return;\n mouseDownHandler();\n onMouseDown?.(event);\n };\n\n return (\n <div className={clsx(withBaseName())}>\n <button\n id={dropdownId}\n disabled={disabled}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onMouseOver={handleMouseOver}\n onMouseDown={handleMouseDown}\n onBlur={handleBlur}\n value={selectedItem}\n className={clsx(\n withBaseName(\"button\"),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className\n )}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-activedescendant={activeDescendant}\n tabIndex={disabled ? -1 : 0}\n aria-owns={listId}\n aria-controls={listId}\n aria-disabled={disabled}\n {...restProps}\n ref={triggerRef}\n >\n <span className={clsx(withBaseName(\"buttonText\"))}>{selectedItem}</span>\n {getIcon()}\n </button>\n <FloatingComponent\n open={open && !disabled}\n ref={floating}\n {...getDropdownNextProps()}\n {...getPosition()}\n >\n <ListNext\n id={listId}\n className={clsx(withBaseName(\"list\"), ListProps?.className)}\n disableFocus\n disabled={disabled \|\| ListProps?.disabled}\n selected={selectedItem}\n highlightedItem={highlightedItem}\n {...ListProps}\n ref={setListRef}\n >\n {getListItems(source)}\n </ListNext>\n </FloatingComponent>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","DropdownNext","useWindow","useComponentCssInjection","dropdownNextCss","useId","useRef","useForkRef","useDropdownNext","useFloatingComponent","clsx","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","ListNext"],"mappings":"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"}

package/dist-cjs/dropdown-next/useDropdownNext.js CHANGED Viewed

@@ -57,15 +57,15 @@ const useDropdownNext = ({
     setOpen(open2);
     onOpenChangeProp == null ? void 0 : onOpenChangeProp(open2);
   };
-  const { floating, reference, x, y, strategy, placement, context } = core.useFloatingUI({
+  const { floating, reference, x, y, strategy, placement, context, elements } = core.useFloatingUI({
     open,
     onOpenChange,
     placement: placementProp,
     middleware: [
       react.offset(0),
       react.size({
-        apply({ rects, elements }) {
-          Object.assign(elements.floating.style, {
+        apply({ rects, elements: elements2 }) {
+          Object.assign(elements2.floating.style, {
             width: `${rects.reference.width}px`
           });
         }
@@ -81,14 +81,19 @@ const useDropdownNext = ({
   const getDropdownNextProps = () => {
     return getFloatingProps({
       "data-placement": placement,
-      ref: floating,
-      style: {
-        top: y != null ? y : 0,
-        left: x != null ? x : 0,
-        position: strategy
-      }
+      ref: floating
     });
   };
+  const getPosition = () => {
+    var _a, _b;
+    return {
+      top: y != null ? y : 0,
+      left: x != null ? x : 0,
+      position: strategy,
+      width: (_a = elements.floating) == null ? void 0 : _a.clientWidth,
+      height: (_b = elements.floating) == null ? void 0 : _b.clientHeight
+    };
+  };
   const blurHandler = () => {
     listBlurHandler();
     setOpen(false);
@@ -160,7 +165,8 @@ const useDropdownNext = ({
       setOpen,
       floating,
       reference,
-      getDropdownNextProps
+      getDropdownNextProps,
+      getPosition
     }
   };
 };

package/dist-cjs/dropdown-next/useDropdownNext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDropdownNext.js","sources":["../src/dropdown-next/useDropdownNext.tsx"],"sourcesContent":["import {\n useInteractions,\n useDismiss,\n useRole,\n flip,\n shift,\n limitShift,\n offset,\n size,\n} from \"@floating-ui/react\";\nimport {\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport { ListItemNext } from \"../list-next\";\nimport { HTMLProps, KeyboardEvent, FocusEvent } from \"react\";\nimport { useList, UseListProps } from \"../list-next/useList\";\n\ninterface UseDropdownNextProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" \| \"open\" \| \"placement\">\n > {\n listProps: UseListProps;\n // props for controlled dropdown\n openControlProp?: boolean;\n}\n\nexport const useDropdownNext = ({\n listProps,\n openControlProp,\n onOpenChange: onOpenChangeProp,\n placement: placementProp,\n}: UseDropdownNextProps) => {\n const [open, setOpen] = useControlled({\n controlled: openControlProp,\n default: false,\n name: \"DropdownNext\",\n state: \"open\",\n });\n\n // USELIST HOOK\n const {\n focusHandler: listFocusHandler,\n keyDownHandler: listKeyDownHandler,\n blurHandler: listBlurHandler,\n mouseOverHandler: listMouseOverHandler,\n activeDescendant,\n selectedItem,\n setSelectedItem,\n highlightedItem,\n setHighlightedItem,\n contextValue: listContextValue,\n focusVisibleRef,\n } = useList({\n ...listProps,\n });\n\n const { select, highlight } = listContextValue;\n\n // LIST SOURCE\n const getListItems = (source: string[]) => {\n if (!source) return;\n\n return source.map((item, index) => {\n return (\n <ListItemNext\n key={index}\n value={item}\n onMouseDown={(event) => {\n select(event);\n }}\n onMouseMove={(event) => {\n highlight(event);\n }}\n >\n {item}\n </ListItemNext>\n );\n });\n };\n\n // FLOATING PORTAL\n const onOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChangeProp?.(open);\n };\n\n const { floating, reference, x, y, strategy, placement, context } =\n useFloatingUI({\n open,\n onOpenChange,\n placement: placementProp,\n middleware: [\n offset(0),\n size({\n apply({ rects, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n });\n },\n }),\n flip(),\n shift({ limiter: limitShift() }),\n ],\n });\n\n const { getFloatingProps } = useInteractions([\n useDismiss(context),\n useRole(context, { role: \"listbox\" }),\n ]);\n\n const getDropdownNextProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n ~~style:~~ {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n },\n ~~});\~~n };\n\n // HANDLERS\n const blurHandler = () => {\n listBlurHandler();\n setOpen(false);\n };\n\n // handles focus on mouse and keyboard\n const focusHandler = (event: FocusEvent<HTMLElement>) => {\n if (selectedItem) {\n listFocusHandler(event as FocusEvent<HTMLUListElement>);\n }\n };\n\n // handles mouse click on dropdown button\n const mouseDownHandler = () => {\n setOpen(!open);\n };\n\n // handles mouse hover on dropdown button\n const mouseOverHandler = () => {\n listMouseOverHandler();\n };\n\n const keyDownHandler = (event: KeyboardEvent<HTMLElement>) => {\n const { key } = event;\n switch (key) {\n case \"ArrowUp\":\n listKeyDownHandler(event);\n break;\n case \"ArrowDown\":\n setOpen(true);\n listKeyDownHandler(event);\n break;\n case \" \":\n case \"Enter\":\n if (!open) {\n setOpen(true);\n break;\n }\n if (open) {\n listKeyDownHandler(event);\n setOpen(false);\n break;\n }\n break;\n case \"Escape\":\n setOpen(false);\n break;\n case \"PageUp\":\n case \"PageDown\":\n case \"Home\":\n case \"End\":\n if (open) {\n listKeyDownHandler(event);\n break;\n }\n break;\n default:\n break;\n }\n };\n\n return {\n handlers: {\n focusHandler,\n keyDownHandler,\n blurHandler,\n mouseOverHandler,\n mouseDownHandler,\n },\n activeDescendant,\n selectedItem,\n setSelectedItem,\n highlightedItem,\n setHighlightedItem,\n focusVisibleRef,\n getListItems,\n portalProps: {\n open,\n setOpen,\n floating,\n reference,\n getDropdownNextProps,\n },\n };\n};\n"],"names":["useControlled","useList","jsx","ListItemNext","open","useFloatingUI","offset","size","flip","shift","limitShift","useInteractions","useDismiss","useRole"],"mappings":";;;;;;;;;;;AA4BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAc,EAAA,gBAAA;AAAA,EACd,SAAW,EAAA,aAAA;AACb,CAA4B,KAAA;AAC1B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,kBAAc,CAAA;AAAA,IACpC,UAAY,EAAA,eAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,cAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AAGD,EAAM,MAAA;AAAA,IACJ,YAAc,EAAA,gBAAA;AAAA,IACd,cAAgB,EAAA,kBAAA;AAAA,IAChB,WAAa,EAAA,eAAA;AAAA,IACb,gBAAkB,EAAA,oBAAA;AAAA,IAClB,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,eAAA;AAAA,MACEC,eAAQ,CAAA;AAAA,IACV,GAAG,SAAA;AAAA,GACJ,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAc,GAAA,gBAAA,CAAA;AAG9B,EAAM,MAAA,YAAA,GAAe,CAAC,MAAqB,KAAA;AACzC,IAAA,IAAI,CAAC,MAAA;AAAQ,MAAA,OAAA;AAEb,IAAA,OAAO,MAAO,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AACjC,MAAA,uBACGC,cAAA,CAAAC,yBAAA,EAAA;AAAA,QAEC,KAAO,EAAA,IAAA;AAAA,QACP,WAAA,EAAa,CAAC,KAAU,KAAA;AACtB,UAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AAAA,SACd;AAAA,QACA,WAAA,EAAa,CAAC,KAAU,KAAA;AACtB,UAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACjB;AAAA,QAEC,QAAA,EAAA,IAAA;AAAA,OAAA,EATI,KAUP,CAAA,CAAA;AAAA,KAEH,CAAA,CAAA;AAAA,GACH,CAAA;AAGA,EAAM,MAAA,YAAA,GAAe,CAACC,KAAkB,KAAA;AACtC,IAAA,OAAA,CAAQA,KAAI,CAAA,CAAA;AACZ,IAAmBA,gBAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAAA,CAAAA,KAAAA,CAAAA,CAAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,EAAE,~~UAAU~~,~~SAAW~~,EAAA,CAAA,EAAG,~~GAAG~~,~~QAAU~~,EAAA,~~SAAA~~,~~EAAW~~,~~OAAQ~~,EAAA,~~GAC9DC~~,kBAAc,CAAA;AAAA,IACZ,IAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,aAAO,CAAC,CAAA;AAAA,MACRC,UAAK,CAAA;AAAA,QACH,KAAM,CAAA,EAAE,KAAO,EAAA,QAAA,~~EAAY~~,EAAA;AACzB,UAAO,MAAA,CAAA,MAAA,~~CAAO~~,~~QAAS~~,CAAA,QAAA,CAAS,KAAO,EAAA;AAAA,YACrC,KAAA,EAAO,CAAG,EAAA,KAAA,CAAM,SAAU,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,WAC3B,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA;AAAA,MACDC,UAAK,EAAA;AAAA,MACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AAAA,KACjC;AAAA,GACD,CAAA,CAAA;AAEH,EAAM,MAAA,EAAE,gBAAiB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC3CC,iBAAW,OAAO,CAAA;AAAA,IAClBC,aAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,GACrC,CAAA,CAAA;AAED,EAAA,MAAM,uBAAuB,MAAiC;AAC5D,IAAA,OAAO,gBAAiB,CAAA;AAAA,MAEtB,gBAAkB,EAAA,SAAA;AAAA,MAClB,GAAK,EAAA,QAAA;AAAA,~~MACL~~,~~KAAO~~,EAAA;AAAA,~~QACL~~,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,~~QACV~~,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,~~QACX~~,QAAU,EAAA,QAAA;AAAA,~~OACZ~~;AAAA,~~KACD~~,CAAA,CAAA;AAAA,~~GACH~~,CAAA;AAGA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAgB,eAAA,EAAA,CAAA;AAChB,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,GACf,CAAA;AAGA,EAAM,MAAA,YAAA,GAAe,CAAC,KAAmC,KAAA;AACvD,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,gBAAA,CAAiB,KAAqC,CAAA,CAAA;AAAA,KACxD;AAAA,GACF,CAAA;AAGA,EAAA,MAAM,mBAAmB,MAAM;AAC7B,IAAA,OAAA,CAAQ,CAAC,IAAI,CAAA,CAAA;AAAA,GACf,CAAA;AAGA,EAAA,MAAM,mBAAmB,MAAM;AAC7B,IAAqB,oBAAA,EAAA,CAAA;AAAA,GACvB,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,KAAsC,KAAA;AAC5D,IAAM,MAAA,EAAE,KAAQ,GAAA,KAAA,CAAA;AAChB,IAAQ,QAAA,GAAA;AAAA,MACD,KAAA,SAAA;AACH,QAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AACxB,QAAA,MAAA;AAAA,MACG,KAAA,WAAA;AACH,QAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AACZ,QAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AACxB,QAAA,MAAA;AAAA,MACG,KAAA,GAAA,CAAA;AAAA,MACA,KAAA,OAAA;AACH,QAAA,IAAI,CAAC,IAAM,EAAA;AACT,UAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AACZ,UAAA,MAAA;AAAA,SACF;AACA,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AACxB,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACb,UAAA,MAAA;AAAA,SACF;AACA,QAAA,MAAA;AAAA,MACG,KAAA,QAAA;AACH,QAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,QAAA,CAAA;AAAA,MACA,KAAA,UAAA,CAAA;AAAA,MACA,KAAA,MAAA,CAAA;AAAA,MACA,KAAA,KAAA;AACH,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AACxB,UAAA,MAAA;AAAA,SACF;AACA,QAAA,MAAA;AAEA,KAAA;AAAA,GAEN,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,QAAU,EAAA;AAAA,MACR,YAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,KACF;AAAA,IACA,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAa,EAAA;AAAA,MACX,IAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,oBAAA;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}
1	+ {"version":3,"file":"useDropdownNext.js","sources":["../src/dropdown-next/useDropdownNext.tsx"],"sourcesContent":["import {\n useInteractions,\n useDismiss,\n useRole,\n flip,\n shift,\n limitShift,\n offset,\n size,\n} from \"@floating-ui/react\";\nimport {\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport { ListItemNext } from \"../list-next\";\nimport { HTMLProps, KeyboardEvent, FocusEvent } from \"react\";\nimport { useList, UseListProps } from \"../list-next/useList\";\n\ninterface UseDropdownNextProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" \| \"open\" \| \"placement\">\n > {\n listProps: UseListProps;\n // props for controlled dropdown\n openControlProp?: boolean;\n}\n\nexport const useDropdownNext = ({\n listProps,\n openControlProp,\n onOpenChange: onOpenChangeProp,\n placement: placementProp,\n}: UseDropdownNextProps) => {\n const [open, setOpen] = useControlled({\n controlled: openControlProp,\n default: false,\n name: \"DropdownNext\",\n state: \"open\",\n });\n\n // USELIST HOOK\n const {\n focusHandler: listFocusHandler,\n keyDownHandler: listKeyDownHandler,\n blurHandler: listBlurHandler,\n mouseOverHandler: listMouseOverHandler,\n activeDescendant,\n selectedItem,\n setSelectedItem,\n highlightedItem,\n setHighlightedItem,\n contextValue: listContextValue,\n focusVisibleRef,\n } = useList({\n ...listProps,\n });\n\n const { select, highlight } = listContextValue;\n\n // LIST SOURCE\n const getListItems = (source: string[]) => {\n if (!source) return;\n\n return source.map((item, index) => {\n return (\n <ListItemNext\n key={index}\n value={item}\n onMouseDown={(event) => {\n select(event);\n }}\n onMouseMove={(event) => {\n highlight(event);\n }}\n >\n {item}\n </ListItemNext>\n );\n });\n };\n\n // FLOATING PORTAL\n const onOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChangeProp?.(open);\n };\n\n const { floating, reference, x, y, strategy, placement, context, elements } =\n useFloatingUI({\n open,\n onOpenChange,\n placement: placementProp,\n middleware: [\n offset(0),\n size({\n apply({ rects, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n });\n },\n }),\n flip(),\n shift({ limiter: limitShift() }),\n ],\n });\n\n const { getFloatingProps } = useInteractions([\n useDismiss(context),\n useRole(context, { role: \"listbox\" }),\n ]);\n\n const getDropdownNextProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n });\n };\n\n const getPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.clientWidth,\n height: elements.floating?.clientHeight,\n });\n\n // HANDLERS\n const blurHandler = () => {\n listBlurHandler();\n setOpen(false);\n };\n\n // handles focus on mouse and keyboard\n const focusHandler = (event: FocusEvent<HTMLElement>) => {\n if (selectedItem) {\n listFocusHandler(event as FocusEvent<HTMLUListElement>);\n }\n };\n\n // handles mouse click on dropdown button\n const mouseDownHandler = () => {\n setOpen(!open);\n };\n\n // handles mouse hover on dropdown button\n const mouseOverHandler = () => {\n listMouseOverHandler();\n };\n\n const keyDownHandler = (event: KeyboardEvent<HTMLElement>) => {\n const { key } = event;\n switch (key) {\n case \"ArrowUp\":\n listKeyDownHandler(event);\n break;\n case \"ArrowDown\":\n setOpen(true);\n listKeyDownHandler(event);\n break;\n case \" \":\n case \"Enter\":\n if (!open) {\n setOpen(true);\n break;\n }\n if (open) {\n listKeyDownHandler(event);\n setOpen(false);\n break;\n }\n break;\n case \"Escape\":\n setOpen(false);\n break;\n case \"PageUp\":\n case \"PageDown\":\n case \"Home\":\n case \"End\":\n if (open) {\n listKeyDownHandler(event);\n break;\n }\n break;\n default:\n break;\n }\n };\n\n return {\n handlers: {\n focusHandler,\n keyDownHandler,\n blurHandler,\n mouseOverHandler,\n mouseDownHandler,\n },\n activeDescendant,\n selectedItem,\n setSelectedItem,\n highlightedItem,\n setHighlightedItem,\n focusVisibleRef,\n getListItems,\n portalProps: {\n open,\n setOpen,\n floating,\n reference,\n getDropdownNextProps,\n getPosition,\n },\n };\n};\n"],"names":["useControlled","useList","jsx","ListItemNext","open","useFloatingUI","offset","size","elements","flip","shift","limitShift","useInteractions","useDismiss","useRole"],"mappings":"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"}

package/dist-cjs/layer-layout/LayerLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = typeof LAYER_POSITIONS[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Disable the scrim.\n /\n disableScrim?: boolean;\n /\n Defines the layer position within the screen.\n /\n position?: LayerPositions;\n /\n Breakpoint at which the layer will become fullscreen.\n /\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Display or hide the component.\n /\n isOpen?: boolean;\n /\n Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-layer-layout\",\n css: layerLayoutCss,\n window: targetWindow,\n });\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) \|\| (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","LayerLayout","useWindow","useComponentCssInjection","layerLayoutCss","usePrevious","useState","useEffect","useIsViewportLargerThanBreakpoint","jsx","clsx","Scrim"],"mappings":"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"}
1	+ {"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Disable the scrim.\n /\n disableScrim?: boolean;\n /\n Defines the layer position within the screen.\n /\n position?: LayerPositions;\n /\n Breakpoint at which the layer will become fullscreen.\n /\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Display or hide the component.\n /\n isOpen?: boolean;\n /\n Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-layer-layout\",\n css: layerLayoutCss,\n window: targetWindow,\n });\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) \|\| (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","LayerLayout","useWindow","useComponentCssInjection","layerLayoutCss","usePrevious","useState","useEffect","useIsViewportLargerThanBreakpoint","jsx","clsx","Scrim"],"mappings":";;;;;;;;;;;;;;;AAYO,MAAM,eAAkB,GAAA;AAAA,EAC7B,QAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AACF,EAAA;AA+BA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAEnD,MAAM,cAAiB,GAAA,EAAE,IAAM,EAAA,QAAA,EAAU,cAAc,IAAK,EAAA,CAAA;AAErD,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAe,GAAA,KAAA;AAAA,MACf,QAAW,GAAA,QAAA;AAAA,MACX,sBAAyB,GAAA,IAAA;AAAA,MACzB,iBAAoB,GAAA,KAAA;AAAA,MACpB,UAAA;AAAA,MACA,MAAS,GAAA,IAAA;AAAA,MACN,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,6BAAgC,GAAAC,gBAAA;AAAA,MACpC,iBAAA;AAAA,MACA,CAAC,iBAAiB,CAAA;AAAA,MAClB,KAAA;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAExD,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAEpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAK,CAAC,MAAU,IAAA,iBAAA,IAAuB,CAAC,MAAA,IAAU,CAAC,WAAc,EAAA;AAC/D,QAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,OACxB;AAEA,MAAI,IAAA,MAAA,IAAU,CAAC,aAAe,EAAA;AAC5B,QAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,OACvB;AAAA,OACC,CAAC,MAAA,EAAQ,aAAe,EAAA,iBAAA,EAAmB,WAAW,CAAC,CAAA,CAAA;AAE1D,IAAA,MAAM,UAAa,GAAAC,mEAAA;AAAA,MACjB,sBAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,QAAA,GAAW,QAAa,KAAA,QAAA,IAAY,CAAC,UAAA,CAAA;AAE3C,IAAA,MAAM,cACJ,GAAA,CAAC,iBAAqB,IAAA,MAAA,IAAU,CAAC,6BAAA,CAAA;AAEnC,IAAM,MAAA,aAAA,GAAgB,CAAC,iBAAA,IAAqB,CAAC,MAAA,CAAA;AAE7C,IAAM,MAAA,WAAA,GAAc,gCACjBC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,QACzC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,QAC1B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,UAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,cAAA;AAAA,QACnC,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,aAAA;AAAA,OACnC,CAAA;AAAA,MACD,gBAAA,EAAkB,MAAM,cAAA,CAAe,IAAI,CAAA;AAAA,MAC3C,gBAAgB,MAAM;AACpB,QAAI,IAAA,CAAC,UAAU,aAAe,EAAA;AAC5B,UAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,SACxB;AAAA,OACF;AAAA,MACC,GAAI,YAAgB,IAAA,cAAA;AAAA,MACpB,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CACE,GAAA,IAAA,CAAA;AAEJ,IAAO,OAAA,YAAA,GACL,8BAECD,cAAA,CAAAE,WAAA,EAAA;AAAA,MACC,IAAM,EAAA,aAAA;AAAA,MACN,WAAWD,SAAK,CAAA;AAAA,QACd,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,cAAA;AAAA,QACnC,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,aAAA;AAAA,OACnC,CAAA;AAAA,MACA,GAAG,UAAA;AAAA,MAEH,QAAA,EAAA,WAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

package/dist-cjs/metric/MetricHeader.js CHANGED Viewed

@@ -28,6 +28,7 @@ const MetricHeader = React.forwardRef(
         id: subtitleId,
         className: withBaseName("subtitle"),
         "data-testid": "metric-subtitle",
+        variant: "secondary",
         children: subtitle
       });
       if (SubtitleLinkProps) {

package/dist-cjs/metric/MetricHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n /*\n If provided, subtitle will be rendered as a `Link` element with these props.\n \n @see `Link` for a list of valid props.\n /\n SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n /\n Subtitle of the Metric Header\n /\n subtitle?: string;\n /\n Title of the Metric Header\n */\n title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n function MetricHeader(\n { SubtitleLinkProps, className, title, subtitle, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-metric-header\",\n css: metricHeaderCss,\n window: targetWindow,\n });\n\n const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n const renderSubtitle = useCallback(() => {\n if (!subtitle) return null;\n\n const subtitleComponent = (\n <Text\n id={subtitleId}\n className={withBaseName(\"subtitle\")}\n data-testid=\"metric-subtitle\"\n >\n {subtitle}\n </Text>\n );\n\n if (SubtitleLinkProps) {\n const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n return (\n <Link href={href} {...restLinkProps}>\n {subtitleComponent}\n </Link>\n );\n }\n\n return subtitleComponent;\n }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n return (\n <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n <Text\n styleAs=\"h4\"\n className={withBaseName(\"title\")}\n data-testid=\"metric-title\"\n id={titleId}\n role=\"heading\"\n aria-level={headingAriaLevel}\n >\n {title}\n </Text>\n {renderSubtitle()}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","MetricHeader","useWindow","useComponentCssInjection","metricHeaderCss","useMetricContext","useCallback","jsx","Text","Link","jsxs","clsx"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqBC,8BAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACHC,cAAA,CAAAC,SAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,~~QAEX~~,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACGD,cAAA,CAAAE,SAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAACJ,cAAA,CAAAC,SAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n /*\n If provided, subtitle will be rendered as a `Link` element with these props.\n \n @see `Link` for a list of valid props.\n /\n SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n /\n Subtitle of the Metric Header\n /\n subtitle?: string;\n /\n Title of the Metric Header\n */\n title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n function MetricHeader(\n { SubtitleLinkProps, className, title, subtitle, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-metric-header\",\n css: metricHeaderCss,\n window: targetWindow,\n });\n\n const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n const renderSubtitle = useCallback(() => {\n if (!subtitle) return null;\n\n const subtitleComponent = (\n <Text\n id={subtitleId}\n className={withBaseName(\"subtitle\")}\n data-testid=\"metric-subtitle\"\n variant=\"secondary\"\n >\n {subtitle}\n </Text>\n );\n\n if (SubtitleLinkProps) {\n const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n return (\n <Link href={href} {...restLinkProps}>\n {subtitleComponent}\n </Link>\n );\n }\n\n return subtitleComponent;\n }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n return (\n <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n <Text\n styleAs=\"h4\"\n className={withBaseName(\"title\")}\n data-testid=\"metric-title\"\n id={titleId}\n role=\"heading\"\n aria-level={headingAriaLevel}\n >\n {title}\n </Text>\n {renderSubtitle()}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","MetricHeader","useWindow","useComponentCssInjection","metricHeaderCss","useMetricContext","useCallback","jsx","Text","Link","jsxs","clsx"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqBC,8BAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACHC,cAAA,CAAAC,SAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,QACZ,OAAQ,EAAA,WAAA;AAAA,QAEP,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACGD,cAAA,CAAAE,SAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAACJ,cAAA,CAAAC,SAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/navigation-item/NavigationItem.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-text-secondary-foreground);\n  --navigationItem-fill: var(--salt-text-secondary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: var(--salt-size-indicator);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active or selected */\n.saltNavigationItem-active,\n.saltNavigationItem-blurActive {\n  --navigationItem-color: var(--salt-text-primary-foreground);\n  --navigationItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n  top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  font-weight: var(--salt-text-fontWeight);\n  padding-left: calc(var(--salt-spacing-250) + (var(--saltNavigationItem-level, 0) * var(--navigationItem-gap)));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item has active children */\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:focus::after {\n  --navigationItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
+var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-text-secondary-foreground);\n  --navigationItem-fill: var(--salt-text-secondary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: var(--salt-size-indicator);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active or selected */\n.saltNavigationItem-active,\n.saltNavigationItem-blurActive {\n  --navigationItem-color: var(--salt-text-primary-foreground);\n  --navigationItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n  top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  font-weight: var(--salt-text-fontWeight);\n  padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item has active children */\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:focus::after {\n  --navigationItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=NavigationItem.css.js.map

package/dist-cjs/pill/Pill.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
+var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n  --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  --saltButton-background: var(--pill-background);\n  --saltButton-color: var(--pill-text-color);\n  --saltButton-fontSize: var(--pill-fontSize);\n  --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0);\n  --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  --saltButton-minWidth: var(--saltPill-minWidth, 40px);\n}\n\n.saltPill {\n  align-items: center;\n  border-radius: var(--saltPill-borderRadius, 0);\n  display: inline-flex;\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=Pill.css.js.map

package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport ~~type~~ StepLabelProps = ComponentPropsWithoutRef<\"label\"~~>;\~~n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n function StepLabel({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-step-label\",\n css: stepLabelCss,\n window: targetWindow,\n });\n\n return (\n <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n <strong>{children}</strong>\n </Label>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","StepLabel","useWindow","useComponentCssInjection","stepLabelCss","jsx","Label","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;~~AAI1C~~,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,UAAA,EAAA;AAAA,MAAM,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC/D,QAAC,kBAAAF,cAAA,CAAA,QAAA,EAAA;AAAA,QAAQ,QAAA;AAAA,OAAS,CAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport interface StepLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n /*\n The content of Step Label\n */\n children?: ReactNode;\n}\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n function StepLabel({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-step-label\",\n css: stepLabelCss,\n window: targetWindow,\n });\n\n return (\n <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n <strong>{children}</strong>\n </Label>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","StepLabel","useWindow","useComponentCssInjection","stepLabelCss","jsx","Label","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAS1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,UAAA,EAAA;AAAA,MAAM,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC/D,QAAC,kBAAAF,cAAA,CAAA,QAAA,EAAA;AAAA,QAAQ,QAAA;AAAA,OAAS,CAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/stepper-input/StepperInput.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".salt-density-medium {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 24px;\n  --stepperInput-input-maxHeight: 28px;\n  --stepperInput-secondary-button-height: 26px;\n  --stepperInput-secondary-button-width: 26px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n.salt-density-touch {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 16px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 36px;\n  --stepperInput-secondary-button-height: 36px;\n  --stepperInput-secondary-button-width: 36px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-low {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 28px;\n  --stepperInput-secondary-button-height: 28px;\n  --stepperInput-secondary-button-width: 28px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-high {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 8px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 16px;\n  --stepperInput-input-maxHeight: 20px;\n  --stepperInput-secondary-button-height: 18px;\n  --stepperInput-secondary-button-width: 18px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n/* Styles applied to adornment container */\n.saltStepperInput-adornmentContainer {\n  display: flex;\n  position: relative;\n  top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));\n}\n\n/* Styles applied to refresh button */\n.saltStepperInput-secondaryButton {\n  --saltButton-height: var(--stepperInput-secondary-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-secondary-button-width);\n}\n\n.saltStepperInput-hideSecondaryButton {\n  visibility: hidden;\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: var(--stepperInput-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-button-width);\n}\n\n/* Styles applied to increment button */\n.saltStepperInput-increment {\n}\n\n/* Styles applied to decrement button */\n.saltStepperInput-decrement {\n  margin-top: 0;\n}\n\n/* Styles applied to stepper button icon */\n.saltStepperInput-stepperButtonIcon {\n}\n\n/* Styles applied to input component */\n.saltStepperInput-input {\n  max-height: var(--saltStepperInput-maxHeight, unset);\n}\n";
+var css_248z = ".salt-density-medium {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 24px;\n  --stepperInput-input-maxHeight: 28px;\n  --stepperInput-secondary-button-height: 26px;\n  --stepperInput-secondary-button-width: 26px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n.salt-density-touch {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 16px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 36px;\n  --stepperInput-secondary-button-height: 36px;\n  --stepperInput-secondary-button-width: 36px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-low {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 28px;\n  --stepperInput-secondary-button-height: 28px;\n  --stepperInput-secondary-button-width: 28px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-high {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 8px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 16px;\n  --stepperInput-input-maxHeight: 20px;\n  --stepperInput-secondary-button-height: 18px;\n  --stepperInput-secondary-button-width: 18px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n/* Styles applied to adornment container */\n.saltStepperInput-adornmentContainer {\n  display: flex;\n  position: relative;\n  top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));\n}\n\n/* Styles applied to refresh button */\n.saltStepperInput-secondaryButton {\n  --saltButton-height: var(--stepperInput-secondary-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-secondary-button-width);\n}\n\n.saltStepperInput-hideSecondaryButton {\n  visibility: hidden;\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: var(--stepperInput-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-button-width);\n}\n\n/* Styles applied to increment button */\n.saltStepperInput-increment {\n}\n\n/* Styles applied to decrement button */\n.saltStepperInput-decrement {\n  --saltButton-margin: 0 var(--stepperInput-button-margin) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n}\n\n/* Styles applied to stepper button icon */\n.saltStepperInput-stepperButtonIcon {\n}\n\n/* Styles applied to input component */\n.saltStepperInput-input {\n  max-height: var(--saltStepperInput-maxHeight, unset);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=StepperInput.css.js.map

package/dist-cjs/tabs/Tab.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .saltTab-close-icon,\n.salt-density-low .saltTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .saltTab-close-icon-small,\n.salt-density-low .saltTab-close-icon-small {\n  display: none;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=Tab.css.js.map

package/dist-cjs/tabs/Tab.js CHANGED Viewed

@@ -5,32 +5,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
 var EditableLabel = require('../editable-label/EditableLabel.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var Tab$1 = require('./Tab.css.js');
 const noop = () => void 0;
 const withBaseName = core.makePrefixer("saltTab");
-const CloseTabButton = (props) => /* @__PURE__ */ jsxRuntime.jsxs(core.Button, {
+const CloseTabButton = (props) => /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
   ...props,
   "aria-label": "Close Tab (Delete or Backspace)",
   className: withBaseName("closeButton"),
   tabIndex: void 0,
   title: "Close Tab (Delete or Backspace)",
   variant: "secondary",
-  children: [
-    /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
-      "aria-label": "Close Tab (Delete or Backspace)",
-      className: withBaseName("close-icon")
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx(icons.CloseSmallIcon, {
-      "aria-label": "Close Tab (Delete or Backspace)",
-      className: withBaseName("close-icon-small")
-    })
-  ]
+  children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
+    "aria-label": "Close Tab (Delete or Backspace)",
+    className: withBaseName("close-icon")
+  })
 });
 const Tab = React.forwardRef(function Tab2({
   ariaControls,

package/dist-cjs/tabs/Tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon, CloseSmallIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { TabProps } from \"./TabsTypes\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\n//TODO not ideal - duplicating the Icon then hiding one in css based on density - is there a nicer way ?\nconst CloseTabButton = (props: ButtonProps) => (\n // FIXME: use polymorphic button\n <Button\n {...props}\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"closeButton\")}\n tabIndex={undefined}\n title=\"Close Tab (Delete or Backspace)\"\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"close-icon\")}\n />\n <CloseSmallIcon\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"close-icon-small\")}\n />\n </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable,\n dragging,\n editable,\n editing,\n focusVisible,\n index,\n label,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n orientation,\n selected,\n tabChildIndex = 0,\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n if (index === undefined \|\| onClick === undefined \|\| onKeyDown === undefined) {\n throw Error(\n \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\"\n );\n }\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, root);\n const [closeHover, setCloseHover] = useState(false);\n const handleClick = useCallback(\n (e: MouseEvent) => {\n if (!editing) {\n e.preventDefault();\n onClick(e, index);\n }\n },\n [editing, index, onClick]\n );\n const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n onKeyDown(e);\n };\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable) {\n e.stopPropagation();\n onClose && onClose(index);\n }\n break;\n default:\n onKeyUp && onKeyUp(e, index);\n }\n };\n\n const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClose && onClose(index);\n };\n\n const handleCloseButtonEnter = () => {\n setCloseHover(true);\n };\n\n const handleCloseButtonLeave = () => {\n setCloseHover(false);\n };\n\n const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n onMouseDown?.(e);\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n } else {\n return label;\n }\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".saltEditableLabel-input\"\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-selected={selected}\n className={clsx(withBaseName(), {\n [withBaseName(\"closeable\")]: closeable,\n [withBaseName(\"closeHover\")]: closeHover,\n [withBaseName(\"dragAway\")]: dragging,\n [withBaseName(\"editing\")]: editing,\n [withBaseName(\"vertical\")]: orientation === \"vertical\",\n [`saltFocusVisible`]: focusVisible,\n })}\n data-editable={editable \|\| undefined}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyDown={handleKeyDownMain}\n onKeyUp={handleKeyUp}\n onMouseDown={handleMouseDown}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={withBaseName(\"main\")}>\n <span\n className={withBaseName(\"text\")}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {closeable ? (\n <CloseTabButton\n onClick={handleCloseButtonClick}\n onMouseEnter={handleCloseButtonEnter}\n onMouseLeave={handleCloseButtonLeave}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["makePrefixer","jsxs","Button","jsx","CloseIcon","CloseSmallIcon","forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useState","useCallback","EditableLabel","editable","clsx"],"mappings":"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"}
1	+ {"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n FocusEvent,\n ForwardedRef,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => (\n // FIXME: use polymorphic button\n <Button\n {...props}\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"closeButton\")}\n tabIndex={undefined}\n title=\"Close Tab (Delete or Backspace)\"\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"Close Tab (Delete or Backspace)\"\n className={withBaseName(\"close-icon\")}\n />\n </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n {\n ariaControls,\n children,\n className,\n closeable,\n dragging,\n editable,\n editing,\n focusVisible,\n index,\n label,\n onClick,\n onClose,\n onEnterEditMode = noop,\n onExitEditMode = noop,\n onFocus: onFocusProp,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n orientation,\n selected,\n tabChildIndex = 0,\n tabIndex,\n ...props\n }: TabProps,\n ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n if (index === undefined \|\| onClick === undefined \|\| onKeyDown === undefined) {\n throw Error(\n \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\"\n );\n }\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab\",\n css: tabCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n const editableRef = useRef<HTMLDivElement>(null);\n const setForkRef = useForkRef(ref, root);\n const [closeHover, setCloseHover] = useState(false);\n const handleClick = useCallback(\n (e: MouseEvent) => {\n if (!editing) {\n e.preventDefault();\n onClick(e, index);\n }\n },\n [editing, index, onClick]\n );\n const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n onKeyDown(e);\n };\n\n const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n originalValue = \"\",\n editedValue = \"\",\n allowDeactivation = true\n ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n const handleKeyUp = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"Backspace\":\n case \"Delete\":\n if (closeable) {\n e.stopPropagation();\n onClose && onClose(index);\n }\n break;\n default:\n onKeyUp && onKeyUp(e, index);\n }\n };\n\n const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClose && onClose(index);\n };\n\n const handleCloseButtonEnter = () => {\n setCloseHover(true);\n };\n\n const handleCloseButtonLeave = () => {\n setCloseHover(false);\n };\n\n const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n onMouseDown?.(e);\n };\n\n const getLabel = () => {\n if (editable) {\n return (\n <EditableLabel\n editing={editing}\n defaultValue={label}\n // Create a fresh instance after each edit, so it can be uncontrolled ...\n key={label}\n onEnterEditMode={onEnterEditMode}\n onExitEditMode={handleOnExitEditMode}\n ref={editableRef}\n />\n );\n } else {\n return label;\n }\n };\n\n const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n if (editableRef.current) {\n const editable = editableRef.current as HTMLElement;\n const input = editable.querySelector(\n \".saltEditableLabel-input\"\n ) as HTMLInputElement;\n input?.focus();\n }\n onFocusProp?.(evt);\n };\n\n return (\n <div\n {...props}\n aria-controls={ariaControls}\n aria-selected={selected}\n className={clsx(withBaseName(), {\n [withBaseName(\"closeable\")]: closeable,\n [withBaseName(\"closeHover\")]: closeHover,\n [withBaseName(\"dragAway\")]: dragging,\n [withBaseName(\"editing\")]: editing,\n [withBaseName(\"vertical\")]: orientation === \"vertical\",\n [`saltFocusVisible`]: focusVisible,\n })}\n data-editable={editable \|\| undefined}\n onClick={handleClick}\n onFocus={handleFocus}\n onKeyDown={handleKeyDownMain}\n onKeyUp={handleKeyUp}\n onMouseDown={handleMouseDown}\n ref={setForkRef}\n role=\"tab\"\n tabIndex={tabIndex}\n >\n <div className={withBaseName(\"main\")}>\n <span\n className={withBaseName(\"text\")}\n // data-text is important, it determines the width of the tab. A pseudo\n // element assigns data-text as content. This is styled as selected tab\n // text. That means width of tab always corresponds to its selected state,\n // so tabs do not change size when selected (ie when the text is bolded).\n // Do not include if we have editable content, EditableLabel will determine\n // the width\n data-text={editable ? undefined : label}\n >\n {children ?? getLabel()}\n </span>\n </div>\n {closeable ? (\n <CloseTabButton\n onClick={handleCloseButtonClick}\n onMouseEnter={handleCloseButtonEnter}\n onMouseLeave={handleCloseButtonLeave}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["makePrefixer","jsx","Button","CloseIcon","forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useState","useCallback","EditableLabel","editable","jsxs","clsx"],"mappings":"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"}

package/dist-cjs/tokenized-input/TokenizedInput.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltTokenizedInput-expandButton,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
+var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton.saltButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n  --saltButton-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n  --saltButton-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=TokenizedInput.css.js.map

package/dist-es/color-chooser/Swatch.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  ) !important;\n}\n";
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  ) !important;\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=Swatch.css.js.map

package/dist-es/color-chooser/Swatch.js CHANGED Viewed

@@ -1,8 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { Color } from './Color.js';
 import { isTransparent } from './color-utils.js';
+import css_248z from './Swatch.css.js';
 const withBaseName = makePrefixer("saltColorChooserSwatch");
 const Swatch = ({
@@ -13,6 +16,12 @@ const Swatch = ({
   onDialogClosed,
   transparent = false
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-swatch",
+    css: css_248z,
+    window: targetWindow
+  });
   const handleClick = () => {
     const newColor = Color.makeColorFromHex(color);
     isTransparent(color) ? newColor == null ? void 0 : newColor.setAlpha(0) : newColor == null ? void 0 : newColor.setAlpha(alpha);

package/dist-es/color-chooser/Swatch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatch\");\n\ninterface SwatchProps {\n active: boolean;\n alpha: number;\n color: string;\n onClick: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n transparent?: boolean;\n}\n\nexport const Swatch = ({\n color,\n onClick,\n active,\n alpha,\n onDialogClosed,\n transparent = false,\n}: SwatchProps): JSX.Element => {\n const handleClick = () => {\n const newColor = Color.makeColorFromHex(color);\n isTransparent(color) ? newColor?.setAlpha(0) : newColor?.setAlpha(alpha);\n\n onClick(newColor, true);\n onDialogClosed();\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {\n const newColor = Color.makeColorFromHex(color)?.setAlpha(alpha);\n e.key === \"ENTER\" && onClick(newColor, true);\n onDialogClosed();\n };\n\n // If it's black/gray/white\n const isBlackOrgray = (color: string): boolean => {\n return (\n color.toLowerCase() === \"black\" \|\|\n color.toUpperCase().startsWith(\"#2F3136\") \|\|\n color.toUpperCase().startsWith(\"#2A2C2F\") \|\|\n color.toUpperCase().startsWith(\"#242526\") \|\|\n color.toUpperCase().startsWith(\"#161616\")\n );\n };\n const isWhite = (color: string): boolean => color === \"white\";\n\n const getBackgroundColor = () => {\n const backgroundColor = Color.makeColorFromHex(color);\n return backgroundColor?.setAlpha(alpha).hex;\n };\n\n return (\n <div\n data-testid={`swatch-${color}`}\n style={{\n background: getBackgroundColor(),\n }}\n className={clsx({\n [withBaseName(\"active\")]: active,\n [withBaseName(\"transparent\")]: transparent,\n [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n [withBaseName(\"whiteSwatch\")]: isWhite(color),\n [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n })}\n onClick={handleClick}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n />\n );\n};\n"],"names":["color"],"mappings":"~~;;;;;;AAMA~~,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAenD,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAChB,CAAgC,KAAA;AAC9B,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAC7C,IAAA,aAAA,CAAc,KAAK,CAAI,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,QAAS,CAAA,CAAA,CAAA,GAAK,qCAAU,QAAS,CAAA,KAAA,CAAA,CAAA;AAElE,IAAA,OAAA,CAAQ,UAAU,IAAI,CAAA,CAAA;AACtB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,CAA2C,KAAA;~~AArCpE~~,IAAA,IAAA,EAAA,CAAA;~~AAsCI~~,IAAA,MAAM,YAAW,EAAM,GAAA,KAAA,CAAA,gBAAA,CAAiB,KAAK,CAAA,KAA5B,mBAA+B,QAAS,CAAA,KAAA,CAAA,CAAA;AACzD,IAAA,CAAA,CAAE,GAAQ,KAAA,OAAA,IAAW,OAAQ,CAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAC3C,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAGA,EAAM,MAAA,aAAA,GAAgB,~~CAACA~~,MAA2B,KAAA;AAChD,IACEA,OAAAA,MAAAA,CAAM,WAAY,EAAA,KAAM,OACxBA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,UAAW,CAAA,SAAS,CACxCA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,WAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,CAAA;AAAA,GAE5C,CAAA;AACA,EAAM,MAAA,OAAA,GAAU,CAACA,MAAAA,KAA2BA,MAAU,KAAA,OAAA,CAAA;AAEtD,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAM,MAAA,eAAA,GAAkB,KAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AACpD,IAAO,OAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,SAAS,KAAO,CAAA,CAAA,GAAA,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,eAAa,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACL,YAAY,kBAAmB,EAAA;AAAA,KACjC;AAAA,IACA,WAAW,IAAK,CAAA;AAAA,MACd,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,MAC1B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,MAC/B,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAK,CAAA;AAAA,MACjD,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,QAAQ,KAAK,CAAA;AAAA,MAC5C,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,CAAC,QAAQ,KAAK,CAAA,IAAK,CAAC,aAAA,CAAc,KAAK,CAAA;AAAA,KAClE,CAAA;AAAA,IACD,OAAS,EAAA,WAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport swatchCss from \"./Swatch.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatch\");\n\ninterface SwatchProps {\n active: boolean;\n alpha: number;\n color: string;\n onClick: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n transparent?: boolean;\n}\n\nexport const Swatch = ({\n color,\n onClick,\n active,\n alpha,\n onDialogClosed,\n transparent = false,\n}: SwatchProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-swatch\",\n css: swatchCss,\n window: targetWindow,\n });\n\n const handleClick = () => {\n const newColor = Color.makeColorFromHex(color);\n isTransparent(color) ? newColor?.setAlpha(0) : newColor?.setAlpha(alpha);\n\n onClick(newColor, true);\n onDialogClosed();\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {\n const newColor = Color.makeColorFromHex(color)?.setAlpha(alpha);\n e.key === \"ENTER\" && onClick(newColor, true);\n onDialogClosed();\n };\n\n // If it's black/gray/white\n const isBlackOrgray = (color: string): boolean => {\n return (\n color.toLowerCase() === \"black\" \|\|\n color.toUpperCase().startsWith(\"#2F3136\") \|\|\n color.toUpperCase().startsWith(\"#2A2C2F\") \|\|\n color.toUpperCase().startsWith(\"#242526\") \|\|\n color.toUpperCase().startsWith(\"#161616\")\n );\n };\n const isWhite = (color: string): boolean => color === \"white\";\n\n const getBackgroundColor = () => {\n const backgroundColor = Color.makeColorFromHex(color);\n return backgroundColor?.setAlpha(alpha).hex;\n };\n\n return (\n <div\n data-testid={`swatch-${color}`}\n style={{\n background: getBackgroundColor(),\n }}\n className={clsx({\n [withBaseName(\"active\")]: active,\n [withBaseName(\"transparent\")]: transparent,\n [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n [withBaseName(\"whiteSwatch\")]: isWhite(color),\n [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n })}\n onClick={handleClick}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n />\n );\n};\n"],"names":["swatchCss","color"],"mappings":"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"}