npm - @fremtind/jokul - Versions diffs - 2.1.3 → 2.1.4 - Mend

@fremtind/jokul 2.1.3 → 2.1.4

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

Files changed (42) hide show

package/build/cjs/components/menu/Menu.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),r=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs"),require("../../hooks/useId/useId.cjs");const o=require("../../utilities/getThemeAndDensity.cjs"),i=require("./useMenuWideEvents.cjs"),l=require("../../utilities/polymorphism/SlotComponent.cjs");function a(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const u=s.forwardRef(((u,c)=>{const{children:d,className:p,initialPlacement:m,openOnHover:f=!1,keepOpenOnClickOutside:g=!1,triggerElement:h,isOpen:x,onToggle:y,...j}=u,v=`"jkl-menu"${s.useId()}`,{prefersReducedMotion:k}=r.useBrowserPreferences(),P=t.useFloatingTree(),F=t.useFloatingNodeId(),w=t.useFloatingParentNodeId(),I=null!=w,C=s.useRef([]),[M,q]=s.useState(null),{allowHover:S,isOpen:E,setIsOpen:N}=i.useMenuWideEvents(P,F,w),b=void 0!==x?x:E;s.useEffect((()=>y?.(b)),[b,y]);const{refs:O,placement:R,context:T,floatingStyles:D}=t.useFloating({nodeId:F,open:b,onOpenChange:N,placement:m||(I?"right-start":"bottom-start"),middleware:[t.offset(2),t.flip({fallbackAxisSideDirection:"end",crossAxis:!1}),t.shift({padding:8})],whileElementsMounted:t.autoUpdate}),{getReferenceProps:A,getFloatingProps:$,getItemProps:B}=t.useInteractions([t.useHover(T,{enabled:f&&S,delay:{open:75},handleClose:t.safePolygon({requireIntent:!0,blockPointerEvents:!0})}),t.useClick(T,{event:"mousedown"}),t.useDismiss(T,{outsidePress:!g}),t.useRole(T,{role:"menu"}),t.useListNavigation(T,{listRef:C,activeIndex:M,nested:I,onNavigate:q})]),H=t.useMergeRefs([O.setReference,c]),{theme:K,density:V}=o.getThemeAndDensity(O.reference.current),{isMounted:W,styles:L}=t.useTransitionStyles(T,{duration:{open:k?0:250,close:k?0:150},initial:({side:e})=>({opacity:0,translate:a(e,5)}),open:({side:e})=>({opacity:1,translate:a(e,0)}),close:({side:e})=>({opacity:0,translate:a(e,5)})});return e.jsxs(t.FloatingNode,{id:F,children:[s.isValidElement(h)&&e.jsx(l.SlotComponent,{...A({...j,ref:H,role:I?"menuitem":void 0,"aria-controls":v,onClick(e){e.stopPropagation()}}),children:h}),W&&e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:T,modal:!1,initialFocus:I?-1:0,returnFocus:!I,children:e.jsx("div",{className:n.clsx("jkl jkl-menu",p),"data-theme":K,"data-layout-density":V,role:"menu","data-placement":R,"aria-live":"assertive","aria-hidden":!b,ref:O.setFloating,...$({id:v,style:{...D,...L}}),children:s.Children.map(d,((t,n)=>s.isValidElement(t)?e.jsx(l.SlotComponent,{...B({...t.props,tabIndex:M===n?0:-1,role:"menuitem",ref(e){C.current[n]=e},onClick(e){t.props.onClick?.(e),!e.defaultPrevented&&P?.events.emit("click")},onKeyDown(e){t.props.onKeyDown?.(e),!e.defaultPrevented&&(P?.events.emit("keydown"),"menuitemcheckbox"===e.currentTarget.role&&"Enter"===e.key&&N(!1))},onMouseEnter(){S&&b&&q(n)}}),children:t}):t))})})})]})}));u.displayName="MenuComponent";const c=s.forwardRef(((n,s)=>null===t.useFloatingParentNodeId()?e.jsx(t.FloatingTree,{children:e.jsx(u,{ref:s,...n})}):e.jsx(u,{ref:s,...n})));c.displayName="Menu",exports.Menu=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),r=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs"),require("../../hooks/useId/useId.cjs");const o=require("../../utilities/getThemeAndDensity.cjs"),i=require("../../utilities/polymorphism/SlotComponent.cjs"),l=require("./useMenuWideEvents.cjs");function a(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const u=s.forwardRef(((u,c)=>{const{children:d,className:p,initialPlacement:m,openOnHover:f=!1,keepOpenOnClickOutside:g=!1,triggerElement:h,isOpen:x,onToggle:y,...j}=u,v=`"jkl-menu"${s.useId()}`,{prefersReducedMotion:k}=r.useBrowserPreferences(),P=t.useFloatingTree(),F=t.useFloatingNodeId(),w=t.useFloatingParentNodeId(),I=null!=w,M=s.useRef([]),[q,C]=s.useState(null),{allowHover:S,isOpen:E,setIsOpen:N}=l.useMenuWideEvents(P,F,w),b=void 0!==x?x:E;s.useEffect((()=>y?.(b)),[b,y]);const{refs:O,placement:R,context:T,floatingStyles:D}=t.useFloating({nodeId:F,open:b,onOpenChange:N,placement:m||(I?"right-start":"bottom-start"),middleware:[t.offset(2),t.flip({fallbackAxisSideDirection:"end",crossAxis:!1}),t.shift({padding:8})],whileElementsMounted:t.autoUpdate}),{getReferenceProps:A,getFloatingProps:$,getItemProps:B}=t.useInteractions([t.useHover(T,{enabled:f&&S,delay:{open:75},handleClose:t.safePolygon({requireIntent:!0,blockPointerEvents:!0})}),t.useClick(T,{event:"mousedown"}),t.useDismiss(T,{outsidePress:!g}),t.useRole(T,{role:"menu"}),t.useListNavigation(T,{listRef:M,activeIndex:q,nested:I,onNavigate:C})]),H=t.useMergeRefs([O.setReference,c]),{theme:K,density:V}=o.getThemeAndDensity(O.reference.current),{isMounted:W,styles:L}=t.useTransitionStyles(T,{duration:{open:k?0:250,close:k?0:150},initial:({side:e})=>({opacity:0,translate:a(e,5)}),open:({side:e})=>({opacity:1,translate:a(e,0)}),close:({side:e})=>({opacity:0,translate:a(e,5)})});return e.jsxs(t.FloatingNode,{id:F,children:[s.isValidElement(h)&&e.jsx(i.SlotComponent,{...A({...j,ref:H,role:I?"menuitem":void 0,"aria-controls":v,onClick(e){e.stopPropagation()}}),children:h}),W&&e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:T,modal:!1,initialFocus:I?-1:0,returnFocus:!I,children:e.jsx("div",{className:n.clsx("jkl jkl-menu",p),"data-theme":K,"data-layout-density":V,role:"menu","data-placement":R,"aria-live":"assertive","aria-hidden":!b,ref:O.setFloating,...$({id:v,style:{...D,...L}}),children:s.Children.map(d,((t,n)=>s.isValidElement(t)?e.jsx(i.SlotComponent,{...B({...t.props,tabIndex:q===n?0:-1,role:"menuitem",ref(e){M.current[n]=e},onClick(e){e.defaultPrevented||P?.events.emit("click")},onKeyDown(e){t.props.onKeyDown?.(e),!e.defaultPrevented&&(P?.events.emit("keydown"),"menuitemcheckbox"===e.currentTarget.role&&"Enter"===e.key&&N(!1))},onMouseEnter(){S&&b&&C(n)}}),children:t}):t))})})})]})}));u.displayName="MenuComponent";const c=s.forwardRef(((n,s)=>null===t.useFloatingParentNodeId()?e.jsx(t.FloatingTree,{children:e.jsx(u,{ref:s,...n})}):e.jsx(u,{ref:s,...n})));c.displayName="Menu",exports.Menu=c;
 //# sourceMappingURL=Menu.cjs.map

package/build/cjs/components/menu/Menu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.cjs","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n type Side,\n autoUpdate,\n flip,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState, useId } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\nimport { SlotComponent } from \"../../utilities/index.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = `\"jkl-menu\"${useId()}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { refs, placement, context, floatingStyles } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement \|\| (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(2),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { theme, density } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n },\n );\n\n return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) && (\n <SlotComponent\n {...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n })}\n >\n {triggerElement}\n </SlotComponent>\n )}\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-layout-density={density}\n role=\"menu\"\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n ...floatingStyles,\n ...animationStyles,\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (React.isValidElement(child)) {\n return (\n <SlotComponent\n {...getItemProps({\n ...child.props,\n tabIndex:\n activeIndex ===\n index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n child.props.onClick?.(\n event as React.MouseEvent<HTMLButtonElement>,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event\n .currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(\n false,\n );\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n })}\n >\n {child}\n </SlotComponent>\n );\n }\n\n return child;\n },\n )}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\n\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","jsx","SlotComponent","ref","onClick","stopPropagation","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","tabIndex","node","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"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"}
1	+ {"version":3,"file":"Menu.cjs","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n type Side,\n autoUpdate,\n flip,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState, useId } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { SlotComponent } from \"../../utilities/index.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = `\"jkl-menu\"${useId()}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { refs, placement, context, floatingStyles } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement \|\| (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(2),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { theme, density } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n },\n );\n\n return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) && (\n <SlotComponent\n {...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n })}\n >\n {triggerElement}\n </SlotComponent>\n )}\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-layout-density={density}\n role=\"menu\"\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n ...floatingStyles,\n ...animationStyles,\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (React.isValidElement(child)) {\n return (\n <SlotComponent\n {...getItemProps({\n ...child.props,\n tabIndex:\n activeIndex ===\n index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event\n .currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(\n false,\n );\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n })}\n >\n {child}\n </SlotComponent>\n );\n }\n\n return child;\n },\n )}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\n\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","jsx","SlotComponent","ref","onClick","stopPropagation","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","tabIndex","node","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"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"}

package/build/cjs/components/text-input/BaseTextInput.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),i=require("../icon-button/IconButton.cjs");function a(t,e){return t?{width:t}:e?{width:`calc(${Math.min(e,40)}ch + 24px)`}:void 0}const s=n.forwardRef(((s,l)=>{const{action:c,align:o="left","aria-invalid":r,className:u="",density:p,maxLength:x,style:d,type:m="text",unit:j,width:h,actionButton:y,...N}=s;return t.jsxs("div",{className:"jkl-text-input-wrapper","data-invalid":r,style:{...d,...a(h,x)},children:[t.jsx("input",{"aria-invalid":r,ref:l,className:e.clsx("jkl-text-input__input",u,{"jkl-text-input__input--align-right":"right"===o}),maxLength:x,type:m,...N}),j&&t.jsx("span",{className:"jkl-text-input__unit",children:j}),!c&&y&&n.cloneElement(y,{className:e.clsx("jkl-text-input-action-button",y.props.className)}),c&&!y&&t.jsx(i.IconButton,{density:p,className:e.clsx("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));s.displayName="BaseInputField",exports.BaseTextInput=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),i=require("../icon-button/IconButton.cjs");function a(t,e){return t?{width:t}:e?{width:`calc(${Math.min(e,15)}em + 24px)`}:void 0}const s=n.forwardRef(((s,l)=>{const{action:c,align:o="left","aria-invalid":r,className:u="",density:p,maxLength:x,style:d,type:m="text",unit:j,width:h,actionButton:y,...N}=s;return t.jsxs("div",{className:"jkl-text-input-wrapper","data-invalid":r,style:{...d,...a(h,x)},children:[t.jsx("input",{"aria-invalid":r,ref:l,className:e.clsx("jkl-text-input__input",u,{"jkl-text-input__input--align-right":"right"===o}),maxLength:x,type:m,...N}),j&&t.jsx("span",{className:"jkl-text-input__unit",children:j}),!c&&y&&n.cloneElement(y,{className:e.clsx("jkl-text-input-action-button",y.props.className)}),c&&!y&&t.jsx(i.IconButton,{density:p,className:e.clsx("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));s.displayName="BaseInputField",exports.BaseTextInput=s;
 //# sourceMappingURL=BaseTextInput.cjs.map

package/build/cjs/components/text-input/BaseTextInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextInput.cjs","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { BaseTextInputProps } from \"./types.js\";\n\nfunction getWidthAsStyle(\n width?: string,\n maxLength?: number,\n): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at ~~40ch~~\n const length = `${Math.min(maxLength, 40)}ch`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n (props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action &&\n actionButton &&\n React.cloneElement(actionButton, {\n className: clsx(\n \"jkl-text-input-action-button\",\n actionButton.props.className,\n ),\n })}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\n \"jkl-text-input-action-button\",\n action.className,\n )}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"2NAKA,SAASA,EACLC,EACAC,GAEA,OAAID,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAF1C,CAQJ,CAEO,MAAMG,EAAgBC,EAAAA,YACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAAA,KAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAAA,KAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAAA,IAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EAAAA,KACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAAAA,IAACI,EAAAA,WAAA,CACGZ,QAAAA,EACAD,UAAWU,EAAAA,KACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SAGpB,IAKZ3B,EAAc4B,YAAc"}
1	+ {"version":3,"file":"BaseTextInput.cjs","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { BaseTextInputProps } from \"./types.js\";\n\nfunction getWidthAsStyle(\n width?: string,\n maxLength?: number,\n): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at 15em\n const length = `${Math.min(maxLength, 15)}em`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n (props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action &&\n actionButton &&\n React.cloneElement(actionButton, {\n className: clsx(\n \"jkl-text-input-action-button\",\n actionButton.props.className,\n ),\n })}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\n \"jkl-text-input-action-button\",\n action.className,\n )}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"2NAKA,SAASA,EACLC,EACAC,GAEA,OAAID,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAF1C,CAQJ,CAEO,MAAMG,EAAgBC,EAAAA,YACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAAA,KAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAAA,KAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAAA,IAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EAAAA,KACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAAAA,IAACI,EAAAA,WAAA,CACGZ,QAAAA,EACAD,UAAWU,EAAAA,KACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SAGpB,IAKZ3B,EAAc4B,YAAc"}

package/build/es/components/menu/Menu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as s}from"react/jsx-runtime";import{useFloatingTree as t,useFloatingNodeId as n,useFloatingParentNodeId as o,useFloating as a,autoUpdate as r,offset as i,flip as l,shift as d,useInteractions as u,useHover as c,useClick as m,useDismiss as p,useRole as f,useListNavigation as g,safePolygon as h,useMergeRefs as y,useTransitionStyles as v,FloatingNode as k,FloatingPortal as x,FloatingFocusManager as P,FloatingTree as j}from"@floating-ui/react";import{c as F}from"../../../clsx-BeLtu-UY.js";import w,{forwardRef as I,useId as C,useRef as M,useState as E,useEffect as N}from"react";import{useBrowserPreferences as O}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import{getThemeAndDensity as R}from"../../utilities/getThemeAndDensity.js";import{useMenuWideEvents as S}from"./useMenuWideEvents.js";import{SlotComponent as b}from"../../utilities/polymorphism/SlotComponent.js";function T(e,s=0){switch(e){case"top":default:return`0 ${s}px`;case"left":return`${s}px 0`;case"bottom":return`0 ${-s}px`;case"right":return-s+"px 0"}}const D=I(((j,I)=>{const{children:D,className:A,initialPlacement:$,openOnHover:B=!1,keepOpenOnClickOutside:H=!1,triggerElement:K,isOpen:V,onToggle:W,...q}=j,L=`"jkl-menu"${C()}`,{prefersReducedMotion:U}=O(),z=t(),G=n(),J=o(),Q=null!=J,X=M([]),[Y,Z]=E(null),{allowHover:_,isOpen:ee,setIsOpen:se}=S(z,G,J),te=void 0!==V?V:ee;N((()=>W?.(te)),[te,W]);const{refs:ne,placement:oe,context:ae,floatingStyles:re}=a({nodeId:G,open:te,onOpenChange:se,placement:$||(Q?"right-start":"bottom-start"),middleware:[i(2),l({fallbackAxisSideDirection:"end",crossAxis:!1}),d({padding:8})],whileElementsMounted:r}),{getReferenceProps:ie,getFloatingProps:le,getItemProps:de}=u([c(ae,{enabled:B&&_,delay:{open:75},handleClose:h({requireIntent:!0,blockPointerEvents:!0})}),m(ae,{event:"mousedown"}),p(ae,{outsidePress:!H}),f(ae,{role:"menu"}),g(ae,{listRef:X,activeIndex:Y,nested:Q,onNavigate:Z})]),ue=y([ne.setReference,I]),{theme:ce,density:me}=R(ne.reference.current),{isMounted:pe,styles:fe}=v(ae,{duration:{open:U?0:250,close:U?0:150},initial:({side:e})=>({opacity:0,translate:T(e,5)}),open:({side:e})=>({opacity:1,translate:T(e,0)}),close:({side:e})=>({opacity:0,translate:T(e,5)})});return e(k,{id:G,children:[w.isValidElement(K)&&s(b,{...ie({...q,ref:ue,role:Q?"menuitem":void 0,"aria-controls":L,onClick(e){e.stopPropagation()}}),children:K}),pe&&s(x,{children:s(P,{context:ae,modal:!1,initialFocus:Q?-1:0,returnFocus:!Q,children:s("div",{className:F("jkl jkl-menu",A),"data-theme":ce,"data-layout-density":me,role:"menu","data-placement":oe,"aria-live":"assertive","aria-hidden":!te,ref:ne.setFloating,...le({id:L,style:{...re,...fe}}),children:w.Children.map(D,((e,t)=>w.isValidElement(e)?s(b,{...de({...e.props,tabIndex:Y===t?0:-1,role:"menuitem",ref(e){X.current[t]=e},onClick(s){e.props.onClick?.(s),!s.defaultPrevented&&z?.events.emit("click")},onKeyDown(s){e.props.onKeyDown?.(s),!s.defaultPrevented&&(z?.events.emit("keydown"),"menuitemcheckbox"===s.currentTarget.role&&"Enter"===s.key&&se(!1))},onMouseEnter(){_&&te&&Z(t)}}),children:e}):e))})})})]})}));D.displayName="MenuComponent";const A=I(((e,t)=>null===o()?s(j,{children:s(D,{ref:t,...e})}):s(D,{ref:t,...e})));A.displayName="Menu";export{A as Menu};
+import{jsxs as e,jsx as s}from"react/jsx-runtime";import{useFloatingTree as t,useFloatingNodeId as n,useFloatingParentNodeId as o,useFloating as a,autoUpdate as r,offset as i,flip as l,shift as d,useInteractions as u,useHover as c,useClick as m,useDismiss as p,useRole as f,useListNavigation as g,safePolygon as h,useMergeRefs as y,useTransitionStyles as v,FloatingNode as k,FloatingPortal as x,FloatingFocusManager as P,FloatingTree as j}from"@floating-ui/react";import{c as F}from"../../../clsx-BeLtu-UY.js";import w,{forwardRef as I,useId as M,useRef as C,useState as E,useEffect as N}from"react";import{useBrowserPreferences as O}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import{getThemeAndDensity as R}from"../../utilities/getThemeAndDensity.js";import{SlotComponent as S}from"../../utilities/polymorphism/SlotComponent.js";import{useMenuWideEvents as b}from"./useMenuWideEvents.js";function T(e,s=0){switch(e){case"top":default:return`0 ${s}px`;case"left":return`${s}px 0`;case"bottom":return`0 ${-s}px`;case"right":return-s+"px 0"}}const D=I(((j,I)=>{const{children:D,className:A,initialPlacement:$,openOnHover:B=!1,keepOpenOnClickOutside:H=!1,triggerElement:K,isOpen:V,onToggle:W,...q}=j,L=`"jkl-menu"${M()}`,{prefersReducedMotion:U}=O(),z=t(),G=n(),J=o(),Q=null!=J,X=C([]),[Y,Z]=E(null),{allowHover:_,isOpen:ee,setIsOpen:se}=b(z,G,J),te=void 0!==V?V:ee;N((()=>W?.(te)),[te,W]);const{refs:ne,placement:oe,context:ae,floatingStyles:re}=a({nodeId:G,open:te,onOpenChange:se,placement:$||(Q?"right-start":"bottom-start"),middleware:[i(2),l({fallbackAxisSideDirection:"end",crossAxis:!1}),d({padding:8})],whileElementsMounted:r}),{getReferenceProps:ie,getFloatingProps:le,getItemProps:de}=u([c(ae,{enabled:B&&_,delay:{open:75},handleClose:h({requireIntent:!0,blockPointerEvents:!0})}),m(ae,{event:"mousedown"}),p(ae,{outsidePress:!H}),f(ae,{role:"menu"}),g(ae,{listRef:X,activeIndex:Y,nested:Q,onNavigate:Z})]),ue=y([ne.setReference,I]),{theme:ce,density:me}=R(ne.reference.current),{isMounted:pe,styles:fe}=v(ae,{duration:{open:U?0:250,close:U?0:150},initial:({side:e})=>({opacity:0,translate:T(e,5)}),open:({side:e})=>({opacity:1,translate:T(e,0)}),close:({side:e})=>({opacity:0,translate:T(e,5)})});return e(k,{id:G,children:[w.isValidElement(K)&&s(S,{...ie({...q,ref:ue,role:Q?"menuitem":void 0,"aria-controls":L,onClick(e){e.stopPropagation()}}),children:K}),pe&&s(x,{children:s(P,{context:ae,modal:!1,initialFocus:Q?-1:0,returnFocus:!Q,children:s("div",{className:F("jkl jkl-menu",A),"data-theme":ce,"data-layout-density":me,role:"menu","data-placement":oe,"aria-live":"assertive","aria-hidden":!te,ref:ne.setFloating,...le({id:L,style:{...re,...fe}}),children:w.Children.map(D,((e,t)=>w.isValidElement(e)?s(S,{...de({...e.props,tabIndex:Y===t?0:-1,role:"menuitem",ref(e){X.current[t]=e},onClick(e){e.defaultPrevented||z?.events.emit("click")},onKeyDown(s){e.props.onKeyDown?.(s),!s.defaultPrevented&&(z?.events.emit("keydown"),"menuitemcheckbox"===s.currentTarget.role&&"Enter"===s.key&&se(!1))},onMouseEnter(){_&&te&&Z(t)}}),children:e}):e))})})})]})}));D.displayName="MenuComponent";const A=I(((e,t)=>null===o()?s(j,{children:s(D,{ref:t,...e})}):s(D,{ref:t,...e})));A.displayName="Menu";export{A as Menu};
 //# sourceMappingURL=Menu.js.map

package/build/es/components/menu/Menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.js","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n type Side,\n autoUpdate,\n flip,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState, useId } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\nimport { SlotComponent } from \"../../utilities/index.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = `\"jkl-menu\"${useId()}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { refs, placement, context, floatingStyles } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement \|\| (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(2),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { theme, density } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n },\n );\n\n return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) && (\n <SlotComponent\n {...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n })}\n >\n {triggerElement}\n </SlotComponent>\n )}\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-layout-density={density}\n role=\"menu\"\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n ...floatingStyles,\n ...animationStyles,\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (React.isValidElement(child)) {\n return (\n <SlotComponent\n {...getItemProps({\n ...child.props,\n tabIndex:\n activeIndex ===\n index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n child.props.onClick?.(\n event as React.MouseEvent<HTMLButtonElement>,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event\n .currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(\n false,\n );\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n })}\n >\n {child}\n </SlotComponent>\n );\n }\n\n return child;\n },\n )}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\n\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","jsx","SlotComponent","ref","onClick","stopPropagation","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","tabIndex","node","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"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"}
1	+ {"version":3,"file":"Menu.js","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n type Side,\n autoUpdate,\n flip,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState, useId } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { SlotComponent } from \"../../utilities/index.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = `\"jkl-menu\"${useId()}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { refs, placement, context, floatingStyles } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement \|\| (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(2),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { theme, density } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n },\n );\n\n return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) && (\n <SlotComponent\n {...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n })}\n >\n {triggerElement}\n </SlotComponent>\n )}\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-layout-density={density}\n role=\"menu\"\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n ...floatingStyles,\n ...animationStyles,\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (React.isValidElement(child)) {\n return (\n <SlotComponent\n {...getItemProps({\n ...child.props,\n tabIndex:\n activeIndex ===\n index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event\n .currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(\n false,\n );\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n })}\n >\n {child}\n </SlotComponent>\n );\n }\n\n return child;\n },\n )}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\n\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","jsx","SlotComponent","ref","onClick","stopPropagation","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","tabIndex","node","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"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"}

package/build/es/components/text-input/BaseTextInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as e}from"react";import{IconButton as s}from"../icon-button/IconButton.js";function o(t,n){return t?{width:t}:n?{width:`calc(${Math.min(n,40)}ch + 24px)`}:void 0}const l=e(((e,l)=>{const{action:c,align:r="left","aria-invalid":u,className:p="",density:m,maxLength:d,style:x,type:h="text",unit:f,width:j,actionButton:y,...N}=e;return t("div",{className:"jkl-text-input-wrapper","data-invalid":u,style:{...x,...o(j,d)},children:[n("input",{"aria-invalid":u,ref:l,className:a("jkl-text-input__input",p,{"jkl-text-input__input--align-right":"right"===r}),maxLength:d,type:h,...N}),f&&n("span",{className:"jkl-text-input__unit",children:f}),!c&&y&&i.cloneElement(y,{className:a("jkl-text-input-action-button",y.props.className)}),c&&!y&&n(s,{density:m,className:a("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));l.displayName="BaseInputField";export{l as BaseTextInput};
+import{jsxs as t,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import e,{forwardRef as i}from"react";import{IconButton as s}from"../icon-button/IconButton.js";function o(t,n){return t?{width:t}:n?{width:`calc(${Math.min(n,15)}em + 24px)`}:void 0}const l=i(((i,l)=>{const{action:c,align:r="left","aria-invalid":u,className:p="",density:m,maxLength:d,style:x,type:f="text",unit:h,width:j,actionButton:y,...N}=i;return t("div",{className:"jkl-text-input-wrapper","data-invalid":u,style:{...x,...o(j,d)},children:[n("input",{"aria-invalid":u,ref:l,className:a("jkl-text-input__input",p,{"jkl-text-input__input--align-right":"right"===r}),maxLength:d,type:f,...N}),h&&n("span",{className:"jkl-text-input__unit",children:h}),!c&&y&&e.cloneElement(y,{className:a("jkl-text-input-action-button",y.props.className)}),c&&!y&&n(s,{density:m,className:a("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));l.displayName="BaseInputField";export{l as BaseTextInput};
 //# sourceMappingURL=BaseTextInput.js.map

package/build/es/components/text-input/BaseTextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { BaseTextInputProps } from \"./types.js\";\n\nfunction getWidthAsStyle(\n width?: string,\n maxLength?: number,\n): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at ~~40ch~~\n const length = `${Math.min(maxLength, 40)}ch`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n (props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action &&\n actionButton &&\n React.cloneElement(actionButton, {\n className: clsx(\n \"jkl-text-input-action-button\",\n actionButton.props.className,\n ),\n })}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\n \"jkl-text-input-action-button\",\n action.className,\n )}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"gMAKA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CAEO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAACI,EAAA,CACGZ,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SAGpB,IAKZ3B,EAAc4B,YAAc"}
1	+ {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { BaseTextInputProps } from \"./types.js\";\n\nfunction getWidthAsStyle(\n width?: string,\n maxLength?: number,\n): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at 15em\n const length = `${Math.min(maxLength, 15)}em`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n (props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action &&\n actionButton &&\n React.cloneElement(actionButton, {\n className: clsx(\n \"jkl-text-input-action-button\",\n actionButton.props.className,\n ),\n })}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\n \"jkl-text-input-action-button\",\n action.className,\n )}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"gMAKA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CAEO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAACI,EAAA,CACGZ,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SAGpB,IAKZ3B,EAAc4B,YAAc"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/styles/components/checkbox/checkbox.css CHANGED Viewed

@@ -33,7 +33,7 @@
     --jkl-checkbox-box-size: 1.125rem;
     --jkl-checkbox-line-height: 1.5rem;
   }
-  @keyframes jkl-checkbox-checked-u8o0so0 {
+  @keyframes jkl-checkbox-checked-utwbydd {
     0% {
       width: 0;
       height: 0;
@@ -47,7 +47,7 @@
       height: 58%;
     }
   }
-  @keyframes jkl-checkbox-indeterminate-u8o0sot {
+  @keyframes jkl-checkbox-indeterminate-utwbydo {
     0% {
       width: 0;
     }
@@ -76,11 +76,11 @@
     left: calc(-0.5 * var(--jkl-checkbox-box-size));
   }
   .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-    animation: jkl-checkbox-checked-u8o0so0 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-utwbydd 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-    animation: jkl-checkbox-indeterminate-u8o0sot 150ms ease-in-out forwards;
+    animation: jkl-checkbox-indeterminate-utwbydo 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

package/styles/components/checkbox/checkbox.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-~~u8o0so0~~{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-~~u8o0sot~~{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-~~u8o0so0~~ .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-~~u8o0sot~~ .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)).5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)).5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}
1	+ @layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-utwbydd{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-utwbydo{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-utwbydd .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-utwbydo .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)).5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)).5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}

package/styles/components/checkbox-panel/checkbox-panel.css CHANGED Viewed

@@ -93,7 +93,7 @@
     --jkl-checkbox-box-size: 1.125rem;
     --jkl-checkbox-line-height: 1.5rem;
   }
-  @keyframes jkl-checkbox-checked-u20ee1t {
+  @keyframes jkl-checkbox-checked-upcf211 {
     0% {
       width: 0;
       height: 0;
@@ -107,7 +107,7 @@
       height: 58%;
     }
   }
-  @keyframes jkl-checkbox-indeterminate-u20ee2p {
+  @keyframes jkl-checkbox-indeterminate-upcf212 {
     0% {
       width: 0;
     }
@@ -136,11 +136,11 @@
     left: calc(-0.5 * var(--jkl-checkbox-box-size));
   }
   .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-    animation: jkl-checkbox-checked-u20ee1t 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-upcf211 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-    animation: jkl-checkbox-indeterminate-u20ee2p 150ms ease-in-out forwards;
+    animation: jkl-checkbox-indeterminate-upcf212 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -251,7 +251,7 @@
     --check-color: var(--jkl-color-text-on-alert);
   }
 }
-@keyframes jkl-checkbox-checked-u20ee3o {
+@keyframes jkl-checkbox-checked-upcf221 {
   0% {
     width: 0;
     height: 0;
@@ -315,7 +315,7 @@
     }
   }
   .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-    animation: jkl-checkbox-checked-u20ee3o 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-upcf221 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox-panel:has([aria-invalid=true]) {

package/styles/components/checkbox-panel/checkbox-panel.min.css CHANGED Viewed

@@ -1,3 +1,3 @@
-.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-u20ee1t{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u20ee2p{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u20ee1t .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-u20ee2p .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}@keyframes jkl-checkbox-checked-u20ee3o{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@layer jokul.components{.jkl-checkbox-panel{--checkbox-background-color:#0000;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-u20ee3o .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(
+.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-upcf211{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-upcf212{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-upcf211 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-upcf212 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}@keyframes jkl-checkbox-checked-upcf221{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@layer jokul.components{.jkl-checkbox-panel{--checkbox-background-color:#0000;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-upcf221 .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(
         --jkl-color-background-alert-error
     );--checkbox-check-color:var(--jkl-color-text-on-alert)}}

package/styles/components/countdown/countdown.css CHANGED Viewed

@@ -29,10 +29,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uk00o65 var(--duration) linear forwards;
+    animation: jkl-downcount-uwtvl4x var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uk00o65 {
+  @keyframes jkl-downcount-uwtvl4x {
     from {
       width: 100%;
     }

package/styles/components/countdown/countdown.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-~~uk00o65~~ var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-~~uk00o65~~{0%{width:100%}to{width:0}}}
1	+ @layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-uwtvl4x var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uwtvl4x{0%{width:100%}to{width:0}}}

package/styles/components/feedback/feedback.css CHANGED Viewed

@@ -4,7 +4,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-@keyframes jkl-show-ubqbbav {
+@keyframes jkl-show-uep4wks {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -39,7 +39,7 @@
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-ubqbbav 0.25s ease-out;
+  animation: jkl-show-uep4wks 0.25s ease-out;
 }
 .jkl-feedback__buttons {
   display: flex;

package/styles/components/feedback/feedback.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- @keyframes jkl-show-~~ubqbbav~~{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:calc(var(--jkl-unit-10)*2);--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-~~ubqbbav~~ .25s ease-out}.jkl-feedback__buttons{display:flex}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after,input:checked+.jkl-feedback-smiley-option:before{opacity:1}
1	+ @keyframes jkl-show-uep4wks{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:calc(var(--jkl-unit-10)*2);--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-uep4wks .25s ease-out}.jkl-feedback__buttons{display:flex}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after,input:checked+.jkl-feedback-smiley-option:before{opacity:1}

package/styles/components/file-input/file-input.css CHANGED Viewed

@@ -375,15 +375,15 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-ux9pugl;
+    animation-name: jkl-loader-left-spin-uvw1i30;
     margin-right: 1.71em;
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-ux9puh7;
+    animation-name: jkl-loader-middle-spin-uvw1i3w;
     margin-right: 1.9em;
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-ux9puha;
+    animation-name: jkl-loader-right-spin-uvw1i4r;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
@@ -410,7 +410,7 @@
   .jkl-loader--small > .jkl-loader__dot--middle {
     margin-right: 0.3em;
   }
-  @keyframes jkl-loader-left-spin-ux9pugl {
+  @keyframes jkl-loader-left-spin-uvw1i30 {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -424,7 +424,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-ux9puh7 {
+  @keyframes jkl-loader-middle-spin-uvw1i3w {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -441,7 +441,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-ux9puha {
+  @keyframes jkl-loader-right-spin-uvw1i4r {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -489,7 +489,7 @@
     bottom: 0;
     width: 12.5rem;
     background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
-    animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ux9puhb;
+    animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uvw1i5j;
   }
   @media (width >= 0) and (max-width: 679px) {
     .jkl-skeleton-animation {
@@ -519,7 +519,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-ux9puhc;
+      animation: 2s ease infinite jkl-blink-uvw1i5w;
     }
   }
   .jkl-skeleton-input {
@@ -573,10 +573,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-ux9puhc;
+      animation: 2s ease-in-out infinite jkl-blink-uvw1i5w;
     }
   }
-  @keyframes jkl-sweep-ux9puhb {
+  @keyframes jkl-sweep-uvw1i5j {
     0% {
       transform: translateX(calc(0vw - 200px));
     }
@@ -584,7 +584,7 @@
       transform: translateX(calc(100vw + 400px));
     }
   }
-  @keyframes jkl-blink-ux9puhc {
+  @keyframes jkl-blink-uvw1i5w {
     0% {
       opacity: 1;
     }