npm - @fremtind/jokul - Versions diffs - 1.1.0 → 1.1.2 - Mend

@fremtind/jokul 1.1.0 → 1.1.2

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 (571) hide show

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 F,FloatingTree as P}from"@floating-ui/react";import{c as w}from"../../../clsx-BeLtu-UY.js";import j,{forwardRef as E,useRef as I,useState as M,useEffect as R}from"react";import{r as C}from"../../../index-Yq3eaNUM.js";import{useBrowserPreferences as N}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import"../../hooks/useScreen/useScreen.js";import{useId as b}from"../../hooks/useId/useId.js";import{getThemeAndDensity as O}from"../../utilities/getThemeAndDensity.js";import{useMenuWideEvents as T}from"./useMenuWideEvents.js";function D(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 S=E(((P,E)=>{const{children:S,className:A,initialPlacement:B,openOnHover:H=!1,keepOpenOnClickOutside:$=!1,triggerElement:K,isOpen:V,onToggle:W,...q}=P,L=b("jkl-menu"),{prefersReducedMotion:U}=N(),z=t(),G=n(),J=o(),Q=null!=J,X=I([]),[Y,Z]=M(null),{allowHover:_,isOpen:ee,setIsOpen:se}=T(z,G,J),te=void 0!==V?V:ee;R((()=>W?.(te)),[te,W]);const{refs:ne,placement:oe,context:ae,floatingStyles:re}=a({nodeId:G,open:te,onOpenChange:se,placement:B||(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:H&&_,delay:{open:75},handleClose:h({requireIntent:!0,blockPointerEvents:!0})}),m(ae,{event:"mousedown"}),p(ae,{outsidePress:!$}),f(ae,{role:"menu"}),g(ae,{listRef:X,activeIndex:Y,nested:Q,onNavigate:Z})]),ue=y([ne.setReference,E]),{theme:ce,density:me}=O(ne.reference.current),{isMounted:pe,styles:fe}=v(ae,{duration:{open:U?0:250,close:U?0:150},initial:({side:e})=>({opacity:0,translate:D(e,5)}),open:({side:e})=>({opacity:1,translate:D(e,0)}),close:({side:e})=>({opacity:0,translate:D(e,5)})});return e(k,{id:G,children:[j.isValidElement(K)&&("button"===K.type||C.isForwardRef(K))?j.cloneElement(K,{...ie({...q,ref:ue,role:Q?"menuitem":void 0,"aria-controls":L,onClick(e){e.stopPropagation()}})}):K,pe&&s(x,{children:s(F,{context:ae,modal:!1,initialFocus:Q?-1:0,returnFocus:!Q,children:s("div",{className:w("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:j.Children.map(S,((e,s)=>j.isValidElement(e)&&C.isForwardRef(e)?j.cloneElement(e,de({...e.props,tabIndex:Y===s?0:-1,role:"menuitem",ref(e){X.current[s]=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(s)}})):e))})})})]})}));S.displayName="MenuComponent";const A=E(((e,t)=>null===o()?s(P,{children:s(S,{ref:t,...e})}):s(S,{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 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};
 //# 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 } from \"react\";\nimport { isForwardRef } from \"react-is\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.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 = useId(\"jkl-menu\");\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 (triggerElement.type === \"button\" \|\|\n isForwardRef(triggerElement))\n ? // Dersom trigger-elementet er en knapp, sett riktige egenskaper på det\n React.cloneElement(triggerElement, {\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 : // Ellers, rendre elementet as-is, uten interaktivitet. Krev en ferdig brukbar button for å åpne menyen.\n triggerElement}\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 (\n React.isValidElement(child) &&\n isForwardRef(child)\n ) {\n return React.cloneElement(\n child,\n getItemProps({\n ...child.props,\n tabIndex:\n activeIndex === 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.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(false);\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n }),\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});\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","type","isForwardRef","cloneElement","ref","onClick","stopPropagation","FloatingPortal","jsx","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 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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"}

package/build/es/components/tooltip/TooltipContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t,Fragment as s}from"react/jsx-runtime";import{useMergeRefs as r,useTransitionStyles as o,FloatingPortal as a,FloatingFocusManager as n,FloatingArrow as i}from"@floating-ui/react";import{c}from"../../../clsx-BeLtu-UY.js";import{forwardRef as l}from"react";import{useBrowserPreferences as p}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{useId as d}from"../../hooks/useId/useId.js";import{getThemeAndDensity as u}from"../../utilities/getThemeAndDensity.js";import{useTooltipContext as m}from"./Tooltip.js";function f(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 g=l((function({className:l,children:g,"data-ispopup":h,...x},y){const{triggerOn:j,arrowElement:F,getFloatingProps:w,placement:k,floatingStyles:T,refs:P,context:$}=m(),M=r([y,P.setFloating]),A=d("jkl-tooltip-content"),{prefersReducedMotion:B}=p(),{isMounted:D,styles:I}=o($,{duration:{open:B?0:250,close:B?0:150},initial:({side:e})=>({opacity:0,translate:f(e,5)}),open:({side:e})=>({opacity:1,translate:f(e,0)}),close:({side:e})=>({opacity:0,translate:f(e,-5)})}),{density:N,theme:O}=u(P.reference.current);return e(a,{children:e(n,{initialFocus:"click"===j?0:-1,returnFocus:!0,context:$,modal:!1,closeOnFocusOut:!0,children:t(s,{children:["hover"===j&&e("span",{ref:P.setDescription,hidden:!0,children:g},`${A}-trigger`),D&&e("span",{className:"jkl",children:t("span",{ref:M,"data-placement":k,"data-testid":"tooltip-content","data-theme":O,"data-layout-density":N,className:c("jkl-tooltip-content",l),...w({...x,id:A}),style:{...T,...I},children:[g,e(i,{context:$,ref:F,width:24,height:12,fill:"var(--background-color)"})]},A)},`${A}-wrapper`)]})})})}));export{g as TooltipContent};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useMergeRefs as s,useTransitionStyles as o,FloatingPortal as n,FloatingFocusManager as a,FloatingArrow as i}from"@floating-ui/react";import{c}from"../../../clsx-BeLtu-UY.js";import l,{forwardRef as d}from"react";import{useBrowserPreferences as p}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{useId as u}from"../../hooks/useId/useId.js";import{getThemeAndDensity as m}from"../../utilities/getThemeAndDensity.js";import{useTooltipContext as f}from"./Tooltip.js";function g(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 h=d((function({className:d,children:h,"data-ispopup":x,...y},j){const{triggerOn:F,arrowElement:w,getFloatingProps:k,placement:R,floatingStyles:T,refs:P,context:$}=f(),M=s([j,P.setFloating]),b=u("jkl-tooltip-content"),{prefersReducedMotion:A}=p(),{isMounted:B,styles:D}=o($,{duration:{open:A?0:250,close:A?0:150},initial:({side:e})=>({opacity:0,translate:g(e,5)}),open:({side:e})=>({opacity:1,translate:g(e,0)}),close:({side:e})=>({opacity:0,translate:g(e,-5)})}),{density:I,theme:N}=m(P.reference.current),O=l.useRef(null);return l.useEffect((()=>{O.current=$.elements.domReference?.closest("[data-portal]")||document.body}),[$.elements.domReference]),e(n,{root:O.current,children:e(a,{initialFocus:"click"===F?0:-1,returnFocus:!0,context:$,modal:!1,closeOnFocusOut:!0,children:t(r,{children:["hover"===F&&e("span",{ref:P.setDescription,hidden:!0,children:h},`${b}-trigger`),B&&e("span",{className:"jkl",children:t("span",{ref:M,"data-placement":R,"data-testid":"tooltip-content","data-theme":N,"data-layout-density":I,className:c("jkl-tooltip-content",d),...k({...y,id:b}),style:{...T,...D},children:[h,e(i,{context:$,ref:w,width:24,height:12,fill:"var(--background-color)"})]},b)},`${b}-wrapper`)]})})})}));export{h as TooltipContent};
 //# sourceMappingURL=TooltipContent.js.map

package/build/es/components/tooltip/TooltipContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipContent.js","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n type Side,\n useMergeRefs,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { type HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.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\nexport const TooltipContent = forwardRef<\n HTMLDivElement,\n HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n { className, children, [\"data-ispopup\"]: isPopup, ...props },\n forwardedRef,\n) {\n const {\n triggerOn,\n arrowElement,\n getFloatingProps,\n placement,\n floatingStyles,\n refs,\n context,\n } = useTooltipContext();\n const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n const contentId = useId(\"jkl-tooltip-content\");\n const { prefersReducedMotion } = useBrowserPreferences();\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 // Siden tooltipet 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 { density, theme } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n initialFocus={triggerOn === \"click\" ? 0 : -1}\n returnFocus={true}\n context={context}\n modal={false}\n closeOnFocusOut={true}\n >\n <>\n {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n {triggerOn === \"hover\" && (\n <span\n ref={refs.setDescription}\n hidden\n key={`${contentId}-trigger`}\n >\n {children}\n </span>\n )}\n {isMounted && (\n <span className=\"jkl\" key={`${contentId}-wrapper`}>\n <span\n key={contentId}\n ref={ref}\n data-placement={placement}\n data-testid={\"tooltip-content\"}\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\n \"jkl-tooltip-content\",\n className,\n )}\n {...getFloatingProps({\n ...props,\n id: contentId,\n })}\n style={{\n ...floatingStyles,\n ...animationStyles,\n }}\n >\n {children}\n <FloatingArrow\n context={context}\n ref={arrowElement}\n width={24}\n height={12}\n fill=\"var(--background-color)\"\n />\n </span>\n </span>\n )}\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","~~FloatingPortal~~","jsx","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"~~0iBAeA~~,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,GAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,IACEC,EAAMC,EAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,EAAM,wBAChBC,qBAAAA,GAAyBC,KACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,MAAY,CACpBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,MAAY,CACjBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,MAAY,CAClBgC,QAAS,EACTC,UAAWlC,EAAeC,GAAQ,QAOtCkC,QAAAA,EAASC,MAAAA,GAAUC,EACvBtB,EAAKuB,UAAUC,~~SAGnB~~,~~SACKC~~,~~EACG~~,~~CAAAlC~~,~~SAAAmC~~,~~EAACC~~,EAAA,CACGC,aAA4B,~~UAAdjC~~,EAAwB,GAAI,~~EAC1CkC~~,aAAa,~~EACb5B~~,QAAAA,~~EACA6B~~,OAAO,EACPC,iBAAiB,~~EAEjBxC~~,~~SAGKyC~~,EAAAC,EAAA,~~CAAA1C~~,SAAA,CAAc,UAAdI,~~GACG+B~~,EAAC,OAAA,~~CACGvB~~,IAAKH,~~EAAKkC~~,eACVC,QAAM,~~EAGL5C~~,SAAAA,GAFI,GAAGe,aAKfI,~~GACGgB~~,EAAC,OAAK,~~CAAApC~~,UAAU,MACZC,~~SAAAyC~~,EAAC,OAAA,~~CAEG7B~~,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,~~UAAW8C~~,EACP,~~sBACA9C~~,MAEAO,EAAiB,IACdJ,~~EACH4C~~,~~GAAI/B~~,~~IAERgC~~,MAAO,~~IACAvC~~,KACAa,GAGNrB,SAAA,CAAAA,~~EACDmC~~,~~EAACa~~,EAAA,~~CACGtC~~,QAAAA,EACAE,IAAKP,~~EACL4C~~,MAAO,GACPC,OAAQ,GACRC,KAAK,~~8BAzBJpC~~,IAFc,GAAGA,mBAoCtD"}
1	+ {"version":3,"file":"TooltipContent.js","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n type Side,\n useMergeRefs,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { type HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.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\nexport const TooltipContent = forwardRef<\n HTMLDivElement,\n HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n { className, children, [\"data-ispopup\"]: isPopup, ...props },\n forwardedRef,\n) {\n const {\n triggerOn,\n arrowElement,\n getFloatingProps,\n placement,\n floatingStyles,\n refs,\n context,\n } = useTooltipContext();\n const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n const contentId = useId(\"jkl-tooltip-content\");\n const { prefersReducedMotion } = useBrowserPreferences();\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 // Siden tooltipet 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 { density, theme } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n const floatingPortalRef = React.useRef<HTMLElement \| null>(null);\n\n React.useEffect(() => {\n floatingPortalRef.current =\n context.elements.domReference?.closest<HTMLElement>(\n \"[data-portal]\",\n ) \|\| document.body;\n }, [context.elements.domReference]);\n\n return (\n <FloatingPortal root={floatingPortalRef.current}>\n <FloatingFocusManager\n initialFocus={triggerOn === \"click\" ? 0 : -1}\n returnFocus={true}\n context={context}\n modal={false}\n closeOnFocusOut={true}\n >\n <>\n {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n {triggerOn === \"hover\" && (\n <span\n ref={refs.setDescription}\n hidden\n key={`${contentId}-trigger`}\n >\n {children}\n </span>\n )}\n {isMounted && (\n <span className=\"jkl\" key={`${contentId}-wrapper`}>\n <span\n key={contentId}\n ref={ref}\n data-placement={placement}\n data-testid={\"tooltip-content\"}\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\n \"jkl-tooltip-content\",\n className,\n )}\n {...getFloatingProps({\n ...props,\n id: contentId,\n })}\n style={{\n ...floatingStyles,\n ...animationStyles,\n }}\n >\n {children}\n <FloatingArrow\n context={context}\n ref={arrowElement}\n width={24}\n height={12}\n fill=\"var(--background-color)\"\n />\n </span>\n </span>\n )}\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","floatingPortalRef","React","useRef","useEffect","elements","domReference","closest","document","body","jsx","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"6iBAeA,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,GAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,IACEC,EAAMC,EAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,EAAM,wBAChBC,qBAAAA,GAAyBC,KACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,MAAY,CACpBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,MAAY,CACjBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,MAAY,CAClBgC,QAAS,EACTC,UAAWlC,EAAeC,GAAQ,QAOtCkC,QAAAA,EAASC,MAAAA,GAAUC,EACvBtB,EAAKuB,UAAUC,SAGbC,EAAoBC,EAAMC,OAA2B,MAE3DD,OAAAA,EAAME,WAAU,KACMH,EAAAD,QACdvB,EAAQ4B,SAASC,cAAcC,QAC3B,kBACCC,SAASC,IAAA,GACnB,CAAChC,EAAQ4B,SAASC,eAGhBI,EAAAC,EAAA,CAAeC,KAAMX,EAAkBD,QACpCjC,SAAA2C,EAACG,EAAA,CACGC,aAA4B,UAAd3C,EAAwB,GAAI,EAC1C4C,aAAa,EACbtC,QAAAA,EACAuC,OAAO,EACPC,iBAAiB,EAEjBlD,SAGKmD,EAAAC,EAAA,CAAApD,SAAA,CAAc,UAAdI,GACGuC,EAAC,OAAA,CACG/B,IAAKH,EAAK4C,eACVC,QAAM,EAGLtD,SAAAA,GAFI,GAAGe,aAKfI,GACGwB,EAAC,OAAK,CAAA5C,UAAU,MACZC,SAAAmD,EAAC,OAAA,CAEGvC,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,UAAWwD,EACP,sBACAxD,MAEAO,EAAiB,IACdJ,EACHsD,GAAIzC,IAER0C,MAAO,IACAjD,KACAa,GAGNrB,SAAA,CAAAA,EACD2C,EAACe,EAAA,CACGhD,QAAAA,EACAE,IAAKP,EACLsD,MAAO,GACPC,OAAQ,GACRC,KAAK,8BAzBJ9C,IAFc,GAAGA,mBAoCtD"}

package/build/es/hooks/stories/content.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function randomContentBlock(except?: JSX.Element): JSX.Element;

package/build/es/hooks/stories/content.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import"react";const s=[e(n,{children:e("p",{className:"jkl-body",children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."})}),t(n,{children:[e("p",{className:"jkl-body",children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."}),e("p",{className:"jkl-body",children:"It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."})]}),t(n,{children:[e("p",{className:"jkl-body",children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."}),e("p",{className:"jkl-body",children:"It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."}),e("p",{className:"jkl-body",children:"It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]}),t(n,{children:[e("p",{className:"jkl-body",children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."}),e("p",{className:"jkl-body",children:"It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."}),e("p",{className:"jkl-body",children:"It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),e("p",{className:"jkl-body",children:"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old."})]})];function a(e){let t=s[Math.floor(Math.random()*s.length)];return t===e&&(t=a(e)),t}export{a as randomContentBlock};
2	+ //# sourceMappingURL=content.js.map

package/build/es/hooks/stories/content.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"content.js","sources":["../../../../src/hooks/stories/content.tsx"],"sourcesContent":["import React from \"react\";\n\nconst content1 = (\n <>\n \n Lorem Ipsum is simply dummy text of the printing and typesetting\n industry. Lorem Ipsum has been the industrys standard dummy text\n ever since the 1500s, when an unknown printer took a galley of type\n and scrambled it to make a type specimen book.\n \n </>\n);\n\nconst content2 = (\n <>\n \n Lorem Ipsum is simply dummy text of the printing and typesetting\n industry. Lorem Ipsum has been the industrys standard dummy text\n ever since the 1500s, when an unknown printer took a galley of type\n and scrambled it to make a type specimen book.\n \n \n It has survived not only five centuries, but also the leap into\n electronic typesetting, remaining essentially unchanged.\n \n </>\n);\n\nconst content3 = (\n <>\n \n Lorem Ipsum is simply dummy text of the printing and typesetting\n industry. Lorem Ipsum has been the industrys standard dummy text\n ever since the 1500s, when an unknown printer took a galley of type\n and scrambled it to make a type specimen book.\n \n \n It has survived not only five centuries, but also the leap into\n electronic typesetting, remaining essentially unchanged.\n \n \n It was popularised in the 1960s with the release of Letraset sheets\n containing Lorem Ipsum passages, and more recently with desktop\n publishing software like Aldus PageMaker including versions of Lorem\n Ipsum.\n \n </>\n);\n\nconst content4 = (\n <>\n \n Lorem Ipsum is simply dummy text of the printing and typesetting\n industry. Lorem Ipsum has been the industrys standard dummy text\n ever since the 1500s, when an unknown printer took a galley of type\n and scrambled it to make a type specimen book.\n \n \n It has survived not only five centuries, but also the leap into\n electronic typesetting, remaining essentially unchanged.\n \n \n It was popularised in the 1960s with the release of Letraset sheets\n containing Lorem Ipsum passages, and more recently with desktop\n publishing software like Aldus PageMaker including versions of Lorem\n Ipsum.\n \n \n Contrary to popular belief, Lorem Ipsum is not simply random text.\n It has roots in a piece of classical Latin literature from 45 BC,\n making it over 2000 years old.\n \n </>\n);\n\nconst contentBlocks = [content1, content2, content3, content4];\n\nexport function randomContentBlock(except?: JSX.Element): JSX.Element {\n let content =\n contentBlocks[Math.floor(Math.random() * contentBlocks.length)];\n if (content === except) {\n content = randomContentBlock(except);\n }\n return content;\n}\n"],"names":["contentBlocks","jsx","Fragment","children","className","jsxs","randomContentBlock","except","content","Math","floor","random","length"],"mappings":"8EAEA,MAyEMA,EAAgB,CAvEdC,EAAAC,EAAA,CAAAC,SAAAF,EAAC,KAAEG,UAAU,WAAWD,oQAWxBE,EAAAH,EAAA,CAAAC,SAAA,CAACF,EAAA,IAAA,CAAEG,UAAU,WAAWD,SAKxB,yPACCF,EAAA,IAAA,CAAEG,UAAU,WAAWD,SAGxB,gIAMAE,EAAAH,EAAA,CAAAC,SAAA,CAACF,EAAA,IAAA,CAAEG,UAAU,WAAWD,SAKxB,yPACCF,EAAA,IAAA,CAAEG,UAAU,WAAWD,SAGxB,6HACCF,EAAA,IAAA,CAAEG,UAAU,WAAWD,SAKxB,uNAMAE,EAAAH,EAAA,CAAAC,SAAA,CAACF,EAAA,IAAA,CAAEG,UAAU,WAAWD,SAKxB,yPACCF,EAAA,IAAA,CAAEG,UAAU,WAAWD,SAGxB,6HACCF,EAAA,IAAA,CAAEG,UAAU,WAAWD,SAKxB,oNACCF,EAAA,IAAA,CAAEG,UAAU,WAAWD,SAIxB,4KAMD,SAASG,EAAmBC,GAC3BC,IAAAA,EACAR,EAAcS,KAAKC,MAAMD,KAAKE,SAAWX,EAAcY,SAC3D,OAAIJ,IAAYD,IACZC,EAAUF,EAAmBC,IAE1BC,CACX"}

package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../core/tokens.js";import{useBrowserPreferences as i}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as s}from"../usePreviousValue/usePreviousValue.js";function o(o,u){const a=s(o),l=u?.easing||"standard",c=u?.timing||"productive",m=u?.display||"block",d=`${n.motion.timing[c]} height ${n.motion.easing[l]}`,{prefersReducedMotion:f}=i(),y=e(),h=e(),v=e(null);function g(e){const t=v.current;t&&e.target===t&&(o?t.removeAttribute("style"):(t.removeAttribute("style"),t.style.display="none"),u?.onTransitionEnd?.(o,v))}const p=t((()=>{const e=v.current;if(e&&void 0!==a){if(o){if(o&&a)return}else if(e.style.display="none",!a)return;if(u?.onTransitionStart?.(o,v),f)return e.removeAttribute("style"),o&&u?.onFirstVisible?.(o,v),void u?.onTransitionEnd?.(o,v);if(e.style.transition=d,e.style.display=m,e.style.overflow="hidden",o)u?.onFirstVisible?.(o,v),e.style.height="0",e.style.height=`${e.scrollHeight}px`;else{if(0===e.scrollHeight)return void e.removeAttribute("style");e.style.height=`${e.scrollHeight}px`,y.current=requestAnimationFrame((()=>{h.current=requestAnimationFrame((()=>{e.style.height="0px"}))}))}}}),[o,u,a,d,f,m]);return r((()=>{p()}),[o,p]),r((()=>{const e=v.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}}),[o]),r((()=>{const e=y.current,t=h.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[]),[v,p]}export{o as useAnimatedHeight};
+import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../core/tokens.js";import{useBrowserPreferences as i}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as s}from"../usePreviousValue/usePreviousValue.js";function o(o,a){const u=s(o),l=a?.easing||"standard",c=a?.timing||"productive",m=a?.display||"block",d=`${n.motion.timing[c]} height ${n.motion.easing[l]}`,{prefersReducedMotion:f}=i(),y=e(),h=e(),p=e(null);function v(e){const t=p.current;t&&e.target===t&&(o?t.removeAttribute("style"):(t.removeAttribute("style"),t.style.display="none"),a?.onTransitionEnd?.(o,p))}const g=t((()=>{const e=p.current;if(e&&void 0!==u){if(o){if(o&&u)return}else if(e.style.display="none",!u)return;if(a?.onTransitionStart?.(o,p),f)return e.removeAttribute("style"),o?a?.onFirstVisible?.(o,p):e.style.display="none",void a?.onTransitionEnd?.(o,p);if(e.style.transition=d,e.style.display=m,e.style.overflow="hidden",o)a?.onFirstVisible?.(o,p),e.style.height="0",e.style.height=`${e.scrollHeight}px`;else{if(0===e.scrollHeight)return void e.removeAttribute("style");e.style.height=`${e.scrollHeight}px`,y.current=requestAnimationFrame((()=>{h.current=requestAnimationFrame((()=>{e.style.height="0px"}))}))}}}),[o,a,u,d,f,m]);return r((()=>{g()}),[o,g]),r((()=>{const e=p.current;return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}}),[o]),r((()=>{const e=y.current,t=h.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[]),[p,g]}export{o as useAnimatedHeight};
 //# sourceMappingURL=useAnimatedHeight.js.map

package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/*\n Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n \n @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n isOpen: boolean,\n options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n const wasOpen = usePreviousValue(isOpen);\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const display = options?.display \|\| defaultDisplay;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n function handleTransitionEnd(event: TransitionEvent) {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n if (isOpen) {\n element.removeAttribute(\"style\");\n } else {\n element.removeAttribute(\"style\");\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef);\n }\n }\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n // Ikke kjør animasjonen hvis elementet ikke er rendret,\n // eller hvis det er første render.\n if (!element \|\| wasOpen === undefined) {\n return;\n }\n\n if (!isOpen) {\n element.style.display = \"none\";\n if (!wasOpen) {\n // Første render eller rerender med isOpen false\n return;\n }\n } else if (isOpen && wasOpen) {\n // Re-render etter å ha vært lukket, men forblitt åpen.\n return;\n }\n\n options?.onTransitionStart?.(isOpen, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n }\n options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n element.style.transition = transition;\n element.style.display = display;\n element.style.overflow = \"hidden\";\n\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n element.style.height = \"0\";\n element.style.height = `${element.scrollHeight}px`;\n } else {\n // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n // style: height: 0; display: block; overflow:hidden\n if (element.scrollHeight === 0) {\n element.removeAttribute(\"style\");\n return;\n }\n\n element.style.height = `${element.scrollHeight}px`;\n\n raf1.current = requestAnimationFrame(() => {\n raf2.current = requestAnimationFrame(() => {\n element.style.height = `${0}px`;\n });\n });\n }\n }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isOpen\n useEffect(() => {\n runAnimation();\n }, [isOpen, runAnimation]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [isOpen]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, []);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","onTransitionEnd","runAnimation","useCallback","onTransitionStart","onFirstVisible","overflow","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiBgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAUC,EAAiBH,GAC3BI,EAASH,GAASG,QAfN,WAgBZC,EAASJ,GAASI,QAfN,aAgBZC,EAAUL,GAASK,SAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,GACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAEnBL,GAAAsB,kBAAkBvB,EAAQe,GACvC,CAGES,MAAAA,EAAeC,GAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAIvB,GAACD,QAAuB,IAAZhB,EAIhB,CAAKF,GAAAA,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFSD,GAAAyB,oBAAoB1B,EAAQe,GAEjCL,~~EAMA~~,~~OALAQ~~,EAAQG,gBAAgB,SACpBrB,~~GACSC~~,GAAA0B,iBAAiB3B,EAAQe,~~QAE7Bd~~,GAAAsB,kBAAkBvB,EAAQe,GAIvCG,GAAAA,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMM,SAAW,SAErB5B,EACSC,GAAA0B,iBAAiB3B,EAAQe,GAClCG,EAAQI,MAAMO,OAAS,IACvBX,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,qBAC/B,CAICZ,GAAyB,IAAzBA,EAAQY,aAER,YADAZ,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,iBAE7BlB,EAAAO,QAAUY,uBAAsB,KAC5BjB,EAAAK,QAAUY,uBAAsB,KACzBb,EAAAI,MAAMO,OAAS,KAAA,GAC1B,GACJ,CAAA,IAEN,CAAC7B,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAGhE,OAAA0B,GAAU,KACOR,GAAA,GACd,CAACxB,EAAQwB,IAGZQ,GAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACQA,EAAAe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACQA,EAAAgB,oBACJ,gBACAlB,EACJ,CAER,GACD,CAAChB,IAEJgC,GAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,EAAE,CACjC,GACD,IAEI,CAACrB,EAAYS,EACxB"}
1	+ {"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/*\n Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n \n @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n isOpen: boolean,\n options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n const wasOpen = usePreviousValue(isOpen);\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const display = options?.display \|\| defaultDisplay;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n function handleTransitionEnd(event: TransitionEvent) {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n if (isOpen) {\n element.removeAttribute(\"style\");\n } else {\n element.removeAttribute(\"style\");\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef);\n }\n }\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n // Ikke kjør animasjonen hvis elementet ikke er rendret,\n // eller hvis det er første render.\n if (!element \|\| wasOpen === undefined) {\n return;\n }\n\n if (!isOpen) {\n element.style.display = \"none\";\n if (!wasOpen) {\n // Første render eller rerender med isOpen false\n return;\n }\n } else if (isOpen && wasOpen) {\n // Re-render etter å ha vært lukket, men forblitt åpen.\n return;\n }\n\n options?.onTransitionStart?.(isOpen, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n } else {\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n element.style.transition = transition;\n element.style.display = display;\n element.style.overflow = \"hidden\";\n\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n element.style.height = \"0\";\n element.style.height = `${element.scrollHeight}px`;\n } else {\n // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n // style: height: 0; display: block; overflow:hidden\n if (element.scrollHeight === 0) {\n element.removeAttribute(\"style\");\n return;\n }\n\n element.style.height = `${element.scrollHeight}px`;\n\n raf1.current = requestAnimationFrame(() => {\n raf2.current = requestAnimationFrame(() => {\n element.style.height = `${0}px`;\n });\n });\n }\n }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isOpen\n useEffect(() => {\n runAnimation();\n }, [isOpen, runAnimation]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [isOpen]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, []);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","onTransitionEnd","runAnimation","useCallback","onTransitionStart","onFirstVisible","overflow","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiBgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAUC,EAAiBH,GAC3BI,EAASH,GAASG,QAfN,WAgBZC,EAASJ,GAASI,QAfN,aAgBZC,EAAUL,GAASK,SAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,GACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAEnBL,GAAAsB,kBAAkBvB,EAAQe,GACvC,CAGES,MAAAA,EAAeC,GAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAIvB,GAACD,QAAuB,IAAZhB,EAIhB,CAAKF,GAAAA,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFSD,GAAAyB,oBAAoB1B,EAAQe,GAEjCL,EAQA,OAPAQ,EAAQG,gBAAgB,SACpBrB,EACSC,GAAA0B,iBAAiB3B,EAAQe,GAElCG,EAAQI,MAAMhB,QAAU,YAEnBL,GAAAsB,kBAAkBvB,EAAQe,GAIvCG,GAAAA,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMM,SAAW,SAErB5B,EACSC,GAAA0B,iBAAiB3B,EAAQe,GAClCG,EAAQI,MAAMO,OAAS,IACvBX,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,qBAC/B,CAICZ,GAAyB,IAAzBA,EAAQY,aAER,YADAZ,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,iBAE7BlB,EAAAO,QAAUY,uBAAsB,KAC5BjB,EAAAK,QAAUY,uBAAsB,KACzBb,EAAAI,MAAMO,OAAS,KAAA,GAC1B,GACJ,CAAA,IAEN,CAAC7B,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAGhE,OAAA0B,GAAU,KACOR,GAAA,GACd,CAACxB,EAAQwB,IAGZQ,GAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACQA,EAAAe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACQA,EAAAgB,oBACJ,gBACAlB,EACJ,CAER,GACD,CAAChB,IAEJgC,GAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,EAAE,CACjC,GACD,IAEI,CAACrB,EAAYS,EACxB"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -596,15 +596,15 @@
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
-    "@babel/cli": "^7.27.2",
+    "@babel/cli": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/react": "18.3.1",
-    "@vitejs/plugin-react": "^4.6.0",
-    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
     "autoprefixer": "^10.4.21",
     "change-case": "^5.4.4",
-    "cssnano": "^7.0.7",
+    "cssnano": "^7.1.0",
     "cssnano-preset-lite": "^4.0.4",
     "glob": "^11.0.3",
     "ink": "^5.1.0",
@@ -614,22 +614,22 @@
     "postcss": "^8.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.58.0",
+    "react-hook-form": "^7.62.0",
     "react-is": "^18.3.1",
-    "rollup-plugin-node-externals": "^8.0.0",
+    "rollup-plugin-node-externals": "^8.0.1",
     "rollup-plugin-visualizer": "^6.0.3",
-    "sass-embedded": "^1.89.2",
-    "style-dictionary": "^5.0.0",
+    "sass-embedded": "^1.90.0",
+    "style-dictionary": "^5.0.1",
     "tailwindcss": "^3.4.17",
+    "vite": "^7.1.2",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "vitest-axe": "^0.1.0",
-    "vite": "^7.0.2"
+    "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
+    "@types/react": "^18.3.1 || ^19.0.0",
     "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0",
-    "@types/react": "^18.3.1 || ^19.0.0"
+    "react-dom": "^18.3.1 || ^19.0.0"
   },
   "repository": {
     "type": "git",

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

@@ -32,7 +32,7 @@
   --jkl-checkbox-line-height: 1.5rem;
 }
-@keyframes jkl-checkbox-checked-uzypigt {
+@keyframes jkl-checkbox-checked-u4b9vqe {
   0% {
     width: 0;
     height: 0;
@@ -46,7 +46,7 @@
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-uzypigy {
+@keyframes jkl-checkbox-indeterminate-u4b9vqn {
   0% {
     width: 0;
   }
@@ -75,11 +75,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-uzypigt 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-u4b9vqe 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-uzypigy 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-u4b9vqn 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	- :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-~~uzypigt~~{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-~~uzypigy~~{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-~~uzypigt~~ .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-~~uzypigy~~ .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	+ :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-u4b9vqe{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u4b9vqn{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-u4b9vqe .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-u4b9vqn .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

@@ -62,7 +62,7 @@
   --outer-border-thickness: 0.125rem;
 }
-@keyframes jkl-checkbox-checked-uu7pmem {
+@keyframes jkl-checkbox-checked-uv47y6l {
   0% {
     width: 0;
     height: 0;
@@ -125,7 +125,7 @@
   }
 }
 .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-  animation: jkl-checkbox-checked-uu7pmem 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-uv47y6l 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 +1 @@
1	- .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}@keyframes jkl-checkbox-checked-~~uu7pmem~~{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.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-~~uu7pmem~~ .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)}
1	+ .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}@keyframes jkl-checkbox-checked-uv47y6l{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.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-uv47y6l .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

@@ -26,11 +26,11 @@
   }
 }
 .jkl-countdown__tracker {
-  animation: jkl-downcount-u1nd7op var(--duration) linear forwards;
+  animation: jkl-downcount-u0skavz var(--duration) linear forwards;
   animation-play-state: var(--play-state, running);
 }
-@keyframes jkl-downcount-u1nd7op {
+@keyframes jkl-downcount-u0skavz {
   from {
     width: 100%;
   }

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

	@@ -1 +1 @@
1	- .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-~~u1nd7op~~ var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-~~u1nd7op~~{0%{width:100%}to{width:0}}
1	+ .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-u0skavz var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u0skavz{0%{width:100%}to{width:0}}

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

@@ -2,7 +2,7 @@
  * Do not edit directly
  * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
-@keyframes jkl-show-uzf85z5 {
+@keyframes jkl-show-u2rjkz7 {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -37,7 +37,7 @@
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-uzf85z5 0.25s ease-out;
+  animation: jkl-show-u2rjkz7 0.25s ease-out;
 }
 .jkl-feedback__buttons {
   display: flex;

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

	@@ -1 +1 @@
1	- @keyframes jkl-show-~~uzf85z5~~{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-~~uzf85z5~~ .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-u2rjkz7{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-u2rjkz7 .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

@@ -369,15 +369,15 @@
   animation: 2500ms linear infinite;
 }
 .jkl-loader__dot--left {
-  animation-name: jkl-loader-left-spin-ubt1yl2;
+  animation-name: jkl-loader-left-spin-uobs9v0;
   margin-right: 1.71em;
 }
 .jkl-loader__dot--middle {
-  animation-name: jkl-loader-middle-spin-ubt1ylz;
+  animation-name: jkl-loader-middle-spin-uobs9v2;
   margin-right: 1.9em;
 }
 .jkl-loader__dot--right {
-  animation-name: jkl-loader-right-spin-ubt1yme;
+  animation-name: jkl-loader-right-spin-uobs9vy;
 }
 @media screen and (forced-colors: active) {
   .jkl-loader__dot {
@@ -405,7 +405,7 @@
   margin-right: 0.3em;
 }
-@keyframes jkl-loader-left-spin-ubt1yl2 {
+@keyframes jkl-loader-left-spin-uobs9v0 {
   0% {
     transform: rotate(0) scale(0);
   }
@@ -419,7 +419,7 @@
     transform: rotate(180deg) scale(0);
   }
 }
-@keyframes jkl-loader-middle-spin-ubt1ylz {
+@keyframes jkl-loader-middle-spin-uobs9v2 {
   0% {
     transform: rotate(20deg) scale(0);
   }
@@ -436,7 +436,7 @@
     transform: rotate(200deg) scale(0);
   }
 }
-@keyframes jkl-loader-right-spin-ubt1yme {
+@keyframes jkl-loader-right-spin-uobs9vy {
   0% {
     transform: rotate(40deg) scale(0);
   }
@@ -484,7 +484,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-ubt1ymh;
+  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uobs9wy;
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-skeleton-animation {
@@ -515,7 +515,7 @@
 @media screen and (forced-colors: active) {
   .jkl-skeleton-element {
     border: 1px solid CanvasText;
-    animation: 2s ease infinite jkl-blink-ubt1ymj;
+    animation: 2s ease infinite jkl-blink-uobs9x4;
   }
 }
@@ -571,11 +571,11 @@
 }
 @media screen and (forced-colors: active) {
   .jkl-skeleton-table {
-    animation: 2s ease-in-out infinite jkl-blink-ubt1ymj;
+    animation: 2s ease-in-out infinite jkl-blink-uobs9x4;
   }
 }
-@keyframes jkl-sweep-ubt1ymh {
+@keyframes jkl-sweep-uobs9wy {
   0% {
     transform: translateX(calc(0vw - 200px));
   }
@@ -583,7 +583,7 @@
     transform: translateX(calc(100vw + 400px));
   }
 }
-@keyframes jkl-blink-ubt1ymj {
+@keyframes jkl-blink-uobs9x4 {
   0% {
     opacity: 1;
   }