@fremtind/jokul 0.37.1 → 0.37.3

package/build/cjs/components/link/Link.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react").forwardRef((function(t,s){const{external:l=!1,className:n="",children:c,as:a="a",...i}=t,o=a;return e.jsx(o,{ref:s,className:r.clsx("jkl-link",n,{"jkl-link--external":l}),...i,children:c})}));exports.Link=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),n=s.forwardRef((function(n,i){const{external:t=!1,className:l="",children:a,as:c="a",...d}=n,o=c,u=s.useId();return e.jsxs(o,{ref:i,className:r.clsx("jkl-link",l,{"jkl-link--external":t}),"aria-describedby":t?u:void 0,...d,children:[a,t&&e.jsx("span",{hidden:!0,id:u,children:"Ekstern lenke"})]})}));exports.Link=n;
 //# sourceMappingURL=Link.cjs.map

package/build/cjs/components/link/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React from \"react\";\nimport {\n    PolymorphicPropsWithRef,\n    PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport type LinkProps<ElementType extends React.ElementType> =\n    PolymorphicPropsWithRef<\n        ElementType,\n        {\n            external?: boolean;\n        }\n    >;\n\nexport type LinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n    ElementType extends React.ElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        external = false,\n        className = \"\",\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-link\", className, {\n                \"jkl-link--external\": external,\n            })}\n            {...rest}\n        >\n            {children}\n        </Component>\n    );\n});\n"],"names":["Link","forwardRef","props","ref","external","className","children","as","rest","Component","jsx","clsx"],"mappings":"6JAmBaA,mBAAaC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EACEO,EAAYF,EAGd,OAAAG,EAAAA,IAACD,EAAA,CACGN,IAAAA,EACAE,UAAWM,EAAAA,KAAK,WAAYN,EAAW,CACnC,qBAAsBD,OAEtBI,EAEHF,SAAAA,GAGb"}
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useId } from \"react\";\nimport {\n    PolymorphicPropsWithRef,\n    PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport type LinkProps<ElementType extends React.ElementType> =\n    PolymorphicPropsWithRef<\n        ElementType,\n        {\n            external?: boolean;\n        }\n    >;\n\nexport type LinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n    ElementType extends React.ElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        external = false,\n        className = \"\",\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n\n    const srId = useId();\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-link\", className, {\n                \"jkl-link--external\": external,\n            })}\n            aria-describedby={external ? srId : undefined}\n            {...rest}\n        >\n            {children}\n            {external && (\n                <span hidden={true} id={srId}>\n                    Ekstern lenke\n                </span>\n            )}\n        </Component>\n    );\n});\n"],"names":["Link","React","forwardRef","props","ref","external","className","children","as","rest","Component","srId","useId","jsxs","clsx","jsx","hidden","id"],"mappings":"gLAmBaA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EACEO,EAAYF,EAEZG,EAAOC,EAAAA,QAGT,OAAAC,EAAAA,KAACH,EAAA,CACGN,IAAAA,EACAE,UAAWQ,EAAAA,KAAK,WAAYR,EAAW,CACnC,qBAAsBD,IAE1B,mBAAkBA,EAAWM,OAAO,KAChCF,EAEHF,SAAA,CAAAA,EACAF,GACIU,EAAAA,IAAA,OAAA,CAAKC,QAAQ,EAAMC,GAAIN,EAAMJ,SAE9B,oBAIhB"}

package/build/cjs/components/modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { WithOptionalChildren } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton, IconButtonProps } from \"../icon-button/IconButton.js\";\nimport { ModalConfig } from \"./useModal.js\";\n\nexport interface ModalProps extends WithOptionalChildren {\n    id?: string;\n    className?: string;\n    component?: React.ElementType;\n    style?: React.CSSProperties;\n    /**\n     * Overstyrer padding på modalen via en CSS-variabel.\n     */\n    padding?: 16 | 24 | 40;\n}\n\nexport type BaseModalProps = Omit<ModalProps, \"padding\" | \"component\">;\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n    HTMLDivElement,\n    ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n    // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten\n    return (\n        <div\n            className={clsx(\"jkl-modal-container\", className)}\n            {...rest}\n            ref={ref}\n            data-portal\n        />\n    );\n});\nModalContainer.displayName = \"ModalContainer\";\n\nexport type ModalOverlayProps = ModalConfig[\"overlay\"] &\n    BaseModalProps & {\n        /**\n         * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.\n         */\n        transparent?: boolean;\n    };\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n    ({ className, transparent, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-overlay\", className, {\n                \"jkl-modal-overlay--transparent\": transparent,\n            })}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n    ({ className, component, padding, style, ...rest }, ref) => {\n        const C = component || \"div\";\n        return (\n            <C\n                className={clsx(\"jkl jkl-modal\", className)}\n                style={\n                    {\n                        \"--jkl-modal-padding\": padding\n                            ? `var(--jkl-spacing-${padding})`\n                            : undefined,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-header\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n    HTMLParagraphElement,\n    ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n    <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n    HTMLButtonElement,\n    Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n        BaseModalProps &\n        IconButtonProps\n>(({ className, ...rest }, ref) => (\n    <IconButton\n        className={clsx(\"jkl-modal-close\", className)}\n        data-testautoid=\"jkl-modal-close\"\n        {...rest}\n        ref={ref}\n    >\n        <CloseIcon variant=\"medium\" />\n    </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-body\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-actions\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","C","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"oQAuBaA,EAAiBC,cAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,MAIvBJ,EAAeO,YAAc,iBAatB,MAAMC,EAAeP,EAAAA,YACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,EAAAA,YACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,KAChD,MAAMU,EAAIH,GAAa,MAEnB,OAAAN,EAAAA,IAACS,EAAA,CACGZ,UAAWI,EAAAA,KAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,GAAA,IAKhBM,EAAMH,YAAc,QAKb,MAAMQ,EAAcd,EAAAA,YACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,MAIZW,EAAYR,YAAc,cAKnB,MAAMS,EAAaf,EAGxBA,YAAA,EAAGC,UAAAA,KAAcC,GAAQC,UACtB,IAAE,CAAAF,UAAWI,OAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEhEY,EAAWT,YAAc,aAKZ,MAAAU,EAAmBhB,cAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAAAA,IAACa,EAAAA,WAAA,CACGhB,UAAWI,EAAAA,KAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAe,SAAAd,EAAAA,IAACe,EAAAA,UAAU,CAAAC,QAAQ,eAG3BJ,EAAiBV,YAAc,mBAKxB,MAAMe,EAAYrB,EAAAA,YACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,MAIZkB,EAAUf,YAAc,YAKjB,MAAMgB,EAAetB,EAAAA,YACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,MAIZmB,EAAahB,YAAc"}
+{"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { WithOptionalChildren } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton, IconButtonProps } from \"../icon-button/IconButton.js\";\nimport { ModalConfig } from \"./useModal.js\";\n\nexport interface ModalProps extends WithOptionalChildren {\n    id?: string;\n    className?: string;\n    component?: React.ElementType;\n    style?: React.CSSProperties;\n    /**\n     * Overstyrer padding på modalen via en CSS-variabel.\n     */\n    padding?: 16 | 24 | 40;\n}\n\nexport type BaseModalProps = Omit<ModalProps, \"padding\" | \"component\">;\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n    HTMLDivElement,\n    ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n    // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n    return (\n        <div\n            className={clsx(\"jkl-modal-container\", className)}\n            {...rest}\n            ref={ref}\n            data-portal\n        />\n    );\n});\nModalContainer.displayName = \"ModalContainer\";\n\nexport type ModalOverlayProps = ModalConfig[\"overlay\"] &\n    BaseModalProps & {\n        /**\n         * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.\n         */\n        transparent?: boolean;\n    };\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n    ({ className, transparent, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-overlay\", className, {\n                \"jkl-modal-overlay--transparent\": transparent,\n            })}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n    ({ className, component, padding, style, ...rest }, ref) => {\n        const C = component || \"div\";\n        return (\n            <C\n                className={clsx(\"jkl jkl-modal\", className)}\n                style={\n                    {\n                        \"--jkl-modal-padding\": padding\n                            ? `var(--jkl-spacing-${padding})`\n                            : undefined,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-header\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n    HTMLParagraphElement,\n    ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n    <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n    HTMLButtonElement,\n    Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n        BaseModalProps &\n        IconButtonProps\n>(({ className, ...rest }, ref) => (\n    <IconButton\n        className={clsx(\"jkl-modal-close\", className)}\n        data-testautoid=\"jkl-modal-close\"\n        {...rest}\n        ref={ref}\n    >\n        <CloseIcon variant=\"medium\" />\n    </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-body\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-actions\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","C","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"oQAuBaA,EAAiBC,cAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,MAIvBJ,EAAeO,YAAc,iBAatB,MAAMC,EAAeP,EAAAA,YACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,EAAAA,YACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,KAChD,MAAMU,EAAIH,GAAa,MAEnB,OAAAN,EAAAA,IAACS,EAAA,CACGZ,UAAWI,EAAAA,KAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,GAAA,IAKhBM,EAAMH,YAAc,QAKb,MAAMQ,EAAcd,EAAAA,YACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,MAIZW,EAAYR,YAAc,cAKnB,MAAMS,EAAaf,EAGxBA,YAAA,EAAGC,UAAAA,KAAcC,GAAQC,UACtB,IAAE,CAAAF,UAAWI,OAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEhEY,EAAWT,YAAc,aAKZ,MAAAU,EAAmBhB,cAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAAAA,IAACa,EAAAA,WAAA,CACGhB,UAAWI,EAAAA,KAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAe,SAAAd,EAAAA,IAACe,EAAAA,UAAU,CAAAC,QAAQ,eAG3BJ,EAAiBV,YAAc,mBAKxB,MAAMe,EAAYrB,EAAAA,YACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,MAIZkB,EAAUf,YAAc,YAKjB,MAAMgB,EAAetB,EAAAA,YACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,MAIZmB,EAAahB,YAAc"}

package/build/cjs/components/popover/Popover.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndDensity.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),l=s.createContext(null),i=()=>{const e=s.useContext(l);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:l=!0,offset:i=4,positionReference:a,hoverOptions:c,focusOptions:u,clickOptions:d,roleOptions:f,dismissOptions:p})=>{const[m,g]=s.useState(e),h=e??m,v=n??g,x=t.useFloating({open:h,onOpenChange:v,placement:o,strategy:r,middleware:[t.offset(i),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),b=x.context,j=t.useClick(b,{enabled:!1,...d}),y=t.useHover(b,{enabled:!1,...c}),O=t.useFocus(b,{enabled:!1,...u}),P=t.useDismiss(b,p),R=t.useRole(b,f),F=t.useInteractions([j,P,O,y,R]);return s.useLayoutEffect((()=>{a&&x.refs.setPositionReference(null==a?void 0:a.current)}),[a,x.refs]),s.useMemo((()=>({open:h,onOpenChange:v,modal:l,...F,...x})),[h,v,l,F,x])})({...o});return e.jsx(l.Provider,{value:r,children:n})},c=s.forwardRef((function({children:n,asChild:o=!1,...r},l){const{refs:a,getReferenceProps:c,open:u,onOpenChange:d}=i(),f=n.ref,p=t.useMergeRefs([a.setReference,l,f]);return o&&s.isValidElement(n)?s.cloneElement(n,c({ref:p,...r,...n.props})):e.jsx("button",{ref:p,onClick:()=>null==d?void 0:d(!u),"aria-expanded":u,...c(r),children:n})})),u=s.forwardRef((function({style:o,className:l,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:v,getFloatingProps:x}=i(),b=t.useMergeRefs([g.setFloating,f]),j=g.reference.current,{theme:y,density:O}=(R=j)&&"contextElement"in R?r.getThemeAndDensity(j.contextElement):r.getThemeAndDensity(j),P=s.useRef(null);var R;return s.useEffect((()=>{var e;P.current=(null==(e=p.elements.domReference)?void 0:e.closest("[data-portal]"))||null}),[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:P.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":y,"data-layout-density":O,className:n.clsx("jkl jkl-popover",l),ref:b,style:{...o,...v,"--popover-padding":`var(--jkl-spacing-${a})`},...x(d),children:d.children})})}):null}));a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndDensity.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),l=s.createContext(null),i=()=>{const e=s.useContext(l);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:l=!0,offset:i=4,positionReference:a,hoverOptions:c,focusOptions:u,clickOptions:d,roleOptions:f,dismissOptions:p})=>{const[m,g]=s.useState(e),h=e??m,v=n??g,x=t.useFloating({open:h,onOpenChange:v,placement:o,strategy:r,middleware:[t.offset(i),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),b=x.context,y=t.useClick(b,{enabled:!1,...d}),j=t.useHover(b,{enabled:!1,...c}),O=t.useFocus(b,{enabled:!1,...u}),P=t.useDismiss(b,p),R=t.useRole(b,f),F=t.useInteractions([y,P,O,j,R]);return s.useLayoutEffect((()=>{a&&x.refs.setPositionReference(null==a?void 0:a.current)}),[a,x.refs]),s.useMemo((()=>({open:h,onOpenChange:v,modal:l,...F,...x})),[h,v,l,F,x])})({...o});return e.jsx(l.Provider,{value:r,children:n})},c=s.forwardRef((function({children:n,asChild:o=!1,...r},l){const{refs:a,getReferenceProps:c,open:u,onOpenChange:d}=i(),f=n.ref,p=t.useMergeRefs([a.setReference,l,f]);return o&&s.isValidElement(n)?s.cloneElement(n,c({ref:p,...r,...n.props})):e.jsx("button",{ref:p,onClick:()=>null==d?void 0:d(!u),"aria-expanded":u,...c(r),children:n})})),u=s.forwardRef((function({style:o,className:l,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:v,getFloatingProps:x}=i(),b=t.useMergeRefs([g.setFloating,f]),y=g.reference.current,{theme:j,density:O}=(R=y)&&"contextElement"in R?r.getThemeAndDensity(y.contextElement):r.getThemeAndDensity(y),P=s.useRef(null);var R;return s.useEffect((()=>{var e;P.current=(null==(e=p.elements.domReference)?void 0:e.closest("[data-portal]"))||document.body}),[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:P.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":j,"data-layout-density":O,className:n.clsx("jkl jkl-popover",l),ref:b,style:{...o,...v,"--popover-padding":`var(--jkl-spacing-${a})`},...x(d),children:d.children})})}):null}));a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
 //# sourceMappingURL=Popover.cjs.map

package/build/cjs/components/popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    useFloating,\n    useFocus,\n    useHover,\n    useClick,\n    useDismiss,\n    autoUpdate,\n    useRole,\n    useMergeRefs,\n    offset,\n    flip,\n    shift,\n    useInteractions,\n    FloatingPortal,\n    FloatingFocusManager,\n    UseFloatingOptions,\n    VirtualElement,\n    ReferenceElement,\n    ReferenceType,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\n\nexport type ClickOptions = Parameters<typeof useClick>[1];\nexport type DismissOptions = Parameters<typeof useDismiss>[1];\nexport type FocusOptions = Parameters<typeof useFocus>[1];\nexport type HoverOptions = Parameters<typeof useHover>[1];\nexport type RoleOptions = Parameters<typeof useRole>[1];\n\nexport interface PopoverOptions {\n    /**\n     * Angir om popoveren er åpen eller lukket.\n     *\n     * @see https://floating-ui.com/docs/usefloating#open\n     */\n    open?: boolean;\n    /**\n     * Callback som trigges når popoveren åpnes eller lukkes.\n     *\n     * @see https://floating-ui.com/docs/usefloating#onopenchange\n     */\n    onOpenChange?: UseFloatingOptions[\"onOpenChange\"];\n    /**\n     * Bestemmer plasseringen av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#placement\n     *\n     * @default \"bottom-start\"\n     */\n    placement?: UseFloatingOptions[\"placement\"];\n    /**\n     * Definerer strategien for posisjonering av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#strategy\n     *\n     * @default \"absolute\"\n     */\n    strategy?: UseFloatingOptions[\"strategy\"];\n    /**\n     * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet\n     * og innhold utenfor ikke kan interageres med.\n     *\n     * @see https://floating-ui.com/docs/usefloating#modal\n     *\n     * @default true\n     */\n    modal?: boolean;\n    /**\n     * Justerer avstanden mellom referanse-elementet og popoveren.\n     *\n     * @see https://floating-ui.com/docs/offset\n     *\n     * @default 4\n     */\n    offset?: number;\n    /**\n     * Referanse til elementet som popoveren skal posisjoneres i forhold til.\n     *\n     * @see https://floating-ui.com/docs/usefloating#setpositionreference\n     *\n     * @default Popover.Trigger\n     */\n    positionReference?: React.RefObject<ReferenceType>;\n    /**\n     * Options for hover-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usehover\n     *\n     * @default { enabled: false }\n     */\n    hoverOptions?: HoverOptions;\n    /**\n     * Options for fokus-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usefocus\n     *\n     * @default { enabled: false }\n     */\n    focusOptions?: FocusOptions;\n    /**\n     * Options for klikk-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/useclick\n     *\n     * @default { enabled: false }\n     */\n    clickOptions?: ClickOptions;\n    /**\n     * Konfigurerer rollen for popoveren.\n     *\n     * @see https://floating-ui.com/docs/userole\n     *\n     * @default { enabled: true, role: \"dialog\" }\n     */\n    roleOptions?: RoleOptions;\n    /**\n     * Options for å lukke popoveren når en dismissal skjer,\n     * som ved å klikke utenfor eller trykke på \"Escape\"-tasten.\n     *\n     * @see https://floating-ui.com/docs/usedismiss\n     *\n     * @default { enabled: true }\n     */\n    dismissOptions?: DismissOptions;\n}\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps(props)}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, density } = isCustomPositioned(referenceElement)\n        ? getThemeAndDensity(referenceElement.contextElement)\n        : getThemeAndDensity(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt.\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || null;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-layout-density={density}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
+{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    useFloating,\n    useFocus,\n    useHover,\n    useClick,\n    useDismiss,\n    autoUpdate,\n    useRole,\n    useMergeRefs,\n    offset,\n    flip,\n    shift,\n    useInteractions,\n    FloatingPortal,\n    FloatingFocusManager,\n    UseFloatingOptions,\n    VirtualElement,\n    ReferenceElement,\n    ReferenceType,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\n\nexport type ClickOptions = Parameters<typeof useClick>[1];\nexport type DismissOptions = Parameters<typeof useDismiss>[1];\nexport type FocusOptions = Parameters<typeof useFocus>[1];\nexport type HoverOptions = Parameters<typeof useHover>[1];\nexport type RoleOptions = Parameters<typeof useRole>[1];\n\nexport interface PopoverOptions {\n    /**\n     * Angir om popoveren er åpen eller lukket.\n     *\n     * @see https://floating-ui.com/docs/usefloating#open\n     */\n    open?: boolean;\n    /**\n     * Callback som trigges når popoveren åpnes eller lukkes.\n     *\n     * @see https://floating-ui.com/docs/usefloating#onopenchange\n     */\n    onOpenChange?: UseFloatingOptions[\"onOpenChange\"];\n    /**\n     * Bestemmer plasseringen av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#placement\n     *\n     * @default \"bottom-start\"\n     */\n    placement?: UseFloatingOptions[\"placement\"];\n    /**\n     * Definerer strategien for posisjonering av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#strategy\n     *\n     * @default \"absolute\"\n     */\n    strategy?: UseFloatingOptions[\"strategy\"];\n    /**\n     * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet\n     * og innhold utenfor ikke kan interageres med.\n     *\n     * @see https://floating-ui.com/docs/usefloating#modal\n     *\n     * @default true\n     */\n    modal?: boolean;\n    /**\n     * Justerer avstanden mellom referanse-elementet og popoveren.\n     *\n     * @see https://floating-ui.com/docs/offset\n     *\n     * @default 4\n     */\n    offset?: number;\n    /**\n     * Referanse til elementet som popoveren skal posisjoneres i forhold til.\n     *\n     * @see https://floating-ui.com/docs/usefloating#setpositionreference\n     *\n     * @default Popover.Trigger\n     */\n    positionReference?: React.RefObject<ReferenceType>;\n    /**\n     * Options for hover-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usehover\n     *\n     * @default { enabled: false }\n     */\n    hoverOptions?: HoverOptions;\n    /**\n     * Options for fokus-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usefocus\n     *\n     * @default { enabled: false }\n     */\n    focusOptions?: FocusOptions;\n    /**\n     * Options for klikk-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/useclick\n     *\n     * @default { enabled: false }\n     */\n    clickOptions?: ClickOptions;\n    /**\n     * Konfigurerer rollen for popoveren.\n     *\n     * @see https://floating-ui.com/docs/userole\n     *\n     * @default { enabled: true, role: \"dialog\" }\n     */\n    roleOptions?: RoleOptions;\n    /**\n     * Options for å lukke popoveren når en dismissal skjer,\n     * som ved å klikke utenfor eller trykke på \"Escape\"-tasten.\n     *\n     * @see https://floating-ui.com/docs/usedismiss\n     *\n     * @default { enabled: true }\n     */\n    dismissOptions?: DismissOptions;\n}\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps(props)}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, density } = isCustomPositioned(referenceElement)\n        ? getThemeAndDensity(referenceElement.contextElement)\n        : getThemeAndDensity(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-layout-density={density}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"qjBAgMMA,EAAiBC,EAAMC,cAAkC,MAEzDC,EAAoB,KAChB,MAAAC,EAAUH,EAAMI,WAAWL,GAEjC,GAAe,MAAXI,EACA,MAAM,IAAIE,MACN,mEAID,OAAAF,GAGEG,EAAU,EACnBC,SAAAA,KACGC,MAIH,MAAMC,EArFS,GACfC,KAAMC,EACNC,aAAcC,EACdC,UAAAA,EAAY,eACZC,SAAAA,EAAW,WACXC,MAAAA,GAAQ,EACRC,OAAQC,EAAU,EAClBC,kBAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,YAAAA,EACAC,eAAAA,MAEA,MAAOC,EAAkBC,GAAuB1B,EAAM2B,SAAShB,GAEzDD,EAAOC,GAASc,EAChBb,EAAeC,GAAiBa,EAEhCE,EAAOC,EAAAA,YAAY,CACrBnB,KAAAA,EACAE,aAAAA,EACAE,UAAAA,EACAC,SAAAA,EACAe,WAAY,CACRb,EAAAA,OAAOC,GACPa,EAAAA,KAAK,CAAEC,QAAS,EAAGC,mBAAoB,CAAC,SAAU,SAClDC,QAAM,CAAEF,QAAS,MAErBG,qBAAsBC,EAAAA,aAGpBjC,EAAUyB,EAAKzB,QAEfkC,EAAQC,WAASnC,EAAS,CAC5BoC,SAAS,KACNjB,IAEDkB,EAAQC,WAAStC,EAAS,CAAEoC,SAAS,KAAUnB,IAC/CsB,EAAQC,WAASxC,EAAS,CAAEoC,SAAS,KAAUlB,IAC/CuB,EAAUC,EAAAA,WAAW1C,EAASqB,GAC9BsB,EAAOC,EAAAA,QAAQ5C,EAASoB,GAExByB,EAAeC,kBAAgB,CAACZ,EAAOO,EAASF,EAAOF,EAAOM,IAEpE9C,OAAAA,EAAMkD,iBAAgB,KACd/B,GACKS,EAAAuB,KAAKC,qBAAqB,MAAAjC,OAAAA,EAAAA,EAAmBkC,QAAO,GAE9D,CAAClC,EAAmBS,EAAKuB,OAErBnD,EAAMsD,SACT,KAAA,CACI5C,KAAAA,EACAE,aAAAA,EACAI,MAAAA,KACGgC,KACApB,KAEP,CAAClB,EAAME,EAAcI,EAAOgC,EAAcpB,GAAI,EA0BlC2B,CAAW,IAAK/C,IAChC,aACKT,EAAeyD,SAAf,CAAwBC,MAAOhD,EAC3BF,SAAAA,GACL,EAwBFmD,EAAiB1D,EAAM2D,YAG3B,UAA0BpD,SAAAA,EAAUqD,QAAAA,GAAU,KAAUC,GAASC,GAC/D,MAAQX,KAAAA,EAAMY,kBAAAA,EAAmBrD,KAAAA,EAAME,aAAAA,GAAiBV,IAClD8D,EAAezD,EAAiB0D,IAChCA,EAAMC,EAAAA,aAAa,CAACf,EAAKgB,aAAcL,EAASE,IAEtD,OAAIJ,GAAW5D,EAAMoE,eAAe7D,GACzBP,EAAMqE,aACT9D,EACAwD,EAAkB,CACdE,IAAAA,KACGJ,KACAtD,EAASsD,SAMpBS,EAAAA,IAAC,SAAA,CACGL,IAAAA,EACAM,QAAS,IAAM,MAAA3D,OAAA,EAAAA,GAAgBF,GAC/B,gBAAeA,KACXqD,EAAkBF,GAErBtD,SAAAA,GAGb,IAoCMiE,EAAiBxE,EAAM2D,YAG3B,UAEMc,MAAAA,EACAC,UAAAA,EACA1C,QAAAA,EAAU,EACV2C,aAAAA,EAAe,EACfC,YAAAA,GAAc,KACXf,GAEPC,GAEM,MAAE3D,QAAAA,EAASa,MAAAA,EAAOmC,KAAAA,EAAMzC,KAAAA,EAAMmE,eAAAA,EAAgBC,iBAAAA,GAChD5E,IACE+D,EAAMC,EAAAA,aAAa,CAACf,EAAK4B,YAAajB,IAEtCkB,EAAmB7B,EAAK8B,UAAU5B,SAEhC6B,MAAAA,EAAOC,QAAAA,IA3BfH,EA2B8CA,IAvBvC,mBAAoBA,EAwBrBI,EAAAA,mBAAmBJ,EAAiBK,gBACpCD,EAAAA,mBAAmBJ,GAEnBM,EAAoBtF,EAAMuF,OAA2B,MA/B3DP,MAyCI,OAPJhF,EAAMwF,WAAU,WACMF,EAAAjC,SACd,OAAAoC,EAAAtF,EAAQuF,SAASC,mBAAjBF,EAAAA,EAA+BG,QAC3B,mBACCC,SAASC,OACnB,CAAC3F,EAAQuF,SAASC,eAEhBjF,EAGA4D,EAAAA,IAAAyB,EAAAA,eAAA,CAAeC,KAAMV,EAAkBjC,QACpC9C,SAAA+D,EAAAA,IAAC2B,EAAAA,qBAAA,CACG9F,QAAAA,EACAa,MAAAA,EACA2D,aAAAA,EACAC,YAAAA,EAEArE,SAAA+D,EAAAA,IAAC,MAAA,CACG,aAAYY,EACZ,sBAAqBC,EACrBT,UAAWwB,EAAAA,KAAK,kBAAmBxB,GACnCT,IAAAA,EACAQ,MACI,IACOA,KACAI,EACH,oBAAqB,qBAAqB7C,SAG9C8C,EAAiBjB,GAEpBtD,SAAMsD,EAAAtD,eAxBL,IA6BtB,IAEAD,EAAQ6F,QAAUzC,EAClBpD,EAAQ8F,QAAU5B"}

package/build/es/components/link/Link.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import a from"react";const n=a.forwardRef((function(a,n){const{external:s=!1,className:t="",children:l,as:o="a",...c}=a;return r(o,{ref:n,className:e("jkl-link",t,{"jkl-link--external":s}),...c,children:l})}));export{n as Link};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import a,{useId as n}from"react";const i=a.forwardRef((function(a,i){const{external:t=!1,className:c="",children:l,as:o="a",...d}=a,m=o,f=n();return e(m,{ref:i,className:s("jkl-link",c,{"jkl-link--external":t}),"aria-describedby":t?f:void 0,...d,children:[l,t&&r("span",{hidden:!0,id:f,children:"Ekstern lenke"})]})}));export{i as Link};
 //# sourceMappingURL=Link.js.map

package/build/es/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React from \"react\";\nimport {\n    PolymorphicPropsWithRef,\n    PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport type LinkProps<ElementType extends React.ElementType> =\n    PolymorphicPropsWithRef<\n        ElementType,\n        {\n            external?: boolean;\n        }\n    >;\n\nexport type LinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n    ElementType extends React.ElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        external = false,\n        className = \"\",\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-link\", className, {\n                \"jkl-link--external\": external,\n            })}\n            {...rest}\n        >\n            {children}\n        </Component>\n    );\n});\n"],"names":["Link","React","forwardRef","props","ref","external","className","children","as","rest","jsx","clsx"],"mappings":"2GAmBO,MAAMA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EAIA,OAAAO,EAHcF,EAGb,CACGJ,IAAAA,EACAE,UAAWK,EAAK,WAAYL,EAAW,CACnC,qBAAsBD,OAEtBI,EAEHF,SAAAA,GAGb"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useId } from \"react\";\nimport {\n    PolymorphicPropsWithRef,\n    PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport type LinkProps<ElementType extends React.ElementType> =\n    PolymorphicPropsWithRef<\n        ElementType,\n        {\n            external?: boolean;\n        }\n    >;\n\nexport type LinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n    ElementType extends React.ElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        external = false,\n        className = \"\",\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n\n    const srId = useId();\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-link\", className, {\n                \"jkl-link--external\": external,\n            })}\n            aria-describedby={external ? srId : undefined}\n            {...rest}\n        >\n            {children}\n            {external && (\n                <span hidden={true} id={srId}>\n                    Ekstern lenke\n                </span>\n            )}\n        </Component>\n    );\n});\n"],"names":["Link","React","forwardRef","props","ref","external","className","children","as","rest","Component","srId","useId","jsxs","clsx","jsx","hidden","id"],"mappings":"iIAmBO,MAAMA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EACEO,EAAYF,EAEZG,EAAOC,IAGT,OAAAC,EAACH,EAAA,CACGN,IAAAA,EACAE,UAAWQ,EAAK,WAAYR,EAAW,CACnC,qBAAsBD,IAE1B,mBAAkBA,EAAWM,OAAO,KAChCF,EAEHF,SAAA,CAAAA,EACAF,GACIU,EAAA,OAAA,CAAKC,QAAQ,EAAMC,GAAIN,EAAMJ,SAE9B,oBAIhB"}

package/build/es/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { WithOptionalChildren } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton, IconButtonProps } from \"../icon-button/IconButton.js\";\nimport { ModalConfig } from \"./useModal.js\";\n\nexport interface ModalProps extends WithOptionalChildren {\n    id?: string;\n    className?: string;\n    component?: React.ElementType;\n    style?: React.CSSProperties;\n    /**\n     * Overstyrer padding på modalen via en CSS-variabel.\n     */\n    padding?: 16 | 24 | 40;\n}\n\nexport type BaseModalProps = Omit<ModalProps, \"padding\" | \"component\">;\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n    HTMLDivElement,\n    ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n    // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten\n    return (\n        <div\n            className={clsx(\"jkl-modal-container\", className)}\n            {...rest}\n            ref={ref}\n            data-portal\n        />\n    );\n});\nModalContainer.displayName = \"ModalContainer\";\n\nexport type ModalOverlayProps = ModalConfig[\"overlay\"] &\n    BaseModalProps & {\n        /**\n         * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.\n         */\n        transparent?: boolean;\n    };\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n    ({ className, transparent, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-overlay\", className, {\n                \"jkl-modal-overlay--transparent\": transparent,\n            })}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n    ({ className, component, padding, style, ...rest }, ref) => {\n        const C = component || \"div\";\n        return (\n            <C\n                className={clsx(\"jkl jkl-modal\", className)}\n                style={\n                    {\n                        \"--jkl-modal-padding\": padding\n                            ? `var(--jkl-spacing-${padding})`\n                            : undefined,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-header\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n    HTMLParagraphElement,\n    ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n    <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n    HTMLButtonElement,\n    Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n        BaseModalProps &\n        IconButtonProps\n>(({ className, ...rest }, ref) => (\n    <IconButton\n        className={clsx(\"jkl-modal-close\", className)}\n        data-testautoid=\"jkl-modal-close\"\n        {...rest}\n        ref={ref}\n    >\n        <CloseIcon variant=\"medium\" />\n    </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-body\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-actions\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"0OAuBa,MAAAA,EAAiBC,GAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAC,MAAA,CACGH,UAAWI,EAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,MAIvBJ,EAAeO,YAAc,iBAatB,MAAMC,EAAeP,GACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,GACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGT,UAAWI,EAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,GACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,MAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,GAGxB,EAAGC,UAAAA,KAAcC,GAAQC,MACtB,IAAE,CAAAF,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEhEW,EAAWR,YAAc,aAKZ,MAAAS,EAAmBf,GAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAACY,EAAA,CACGf,UAAWI,EAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAU,CAAAC,QAAQ,eAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,GACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,MAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,GACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,MAIZkB,EAAaf,YAAc"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { WithOptionalChildren } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton, IconButtonProps } from \"../icon-button/IconButton.js\";\nimport { ModalConfig } from \"./useModal.js\";\n\nexport interface ModalProps extends WithOptionalChildren {\n    id?: string;\n    className?: string;\n    component?: React.ElementType;\n    style?: React.CSSProperties;\n    /**\n     * Overstyrer padding på modalen via en CSS-variabel.\n     */\n    padding?: 16 | 24 | 40;\n}\n\nexport type BaseModalProps = Omit<ModalProps, \"padding\" | \"component\">;\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n    HTMLDivElement,\n    ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n    // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n    return (\n        <div\n            className={clsx(\"jkl-modal-container\", className)}\n            {...rest}\n            ref={ref}\n            data-portal\n        />\n    );\n});\nModalContainer.displayName = \"ModalContainer\";\n\nexport type ModalOverlayProps = ModalConfig[\"overlay\"] &\n    BaseModalProps & {\n        /**\n         * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.\n         */\n        transparent?: boolean;\n    };\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n    ({ className, transparent, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-overlay\", className, {\n                \"jkl-modal-overlay--transparent\": transparent,\n            })}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n    ({ className, component, padding, style, ...rest }, ref) => {\n        const C = component || \"div\";\n        return (\n            <C\n                className={clsx(\"jkl jkl-modal\", className)}\n                style={\n                    {\n                        \"--jkl-modal-padding\": padding\n                            ? `var(--jkl-spacing-${padding})`\n                            : undefined,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-header\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n    HTMLParagraphElement,\n    ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n    <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n    HTMLButtonElement,\n    Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n        BaseModalProps &\n        IconButtonProps\n>(({ className, ...rest }, ref) => (\n    <IconButton\n        className={clsx(\"jkl-modal-close\", className)}\n        data-testautoid=\"jkl-modal-close\"\n        {...rest}\n        ref={ref}\n    >\n        <CloseIcon variant=\"medium\" />\n    </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-body\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-actions\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"0OAuBa,MAAAA,EAAiBC,GAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAC,MAAA,CACGH,UAAWI,EAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,MAIvBJ,EAAeO,YAAc,iBAatB,MAAMC,EAAeP,GACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,GACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGT,UAAWI,EAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,GACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,MAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,GAGxB,EAAGC,UAAAA,KAAcC,GAAQC,MACtB,IAAE,CAAAF,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEhEW,EAAWR,YAAc,aAKZ,MAAAS,EAAmBf,GAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAACY,EAAA,CACGf,UAAWI,EAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAU,CAAAC,QAAQ,eAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,GACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,MAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,GACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,MAIZkB,EAAaf,YAAc"}

package/build/es/components/popover/Popover.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useMergeRefs as n,FloatingPortal as t,FloatingFocusManager as o,useFloating as s,offset as r,flip as a,shift as l,autoUpdate as i,useClick as c,useHover as u,useFocus as d,useDismiss as p,useRole as f,useInteractions as m}from"@floating-ui/react";import{c as g}from"../../../clsx-BeLtu-UY.js";import*as h from"react";import{getThemeAndDensity as v}from"../../utilities/getThemeAndDensity.js";const x=h.createContext(null),y=()=>{const e=h.useContext(x);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},F=({children:n,...t})=>{const o=(({open:e,onOpenChange:n,placement:t="bottom-start",strategy:o="absolute",modal:g=!0,offset:v=4,positionReference:x,hoverOptions:y,focusOptions:F,clickOptions:R,roleOptions:k,dismissOptions:C})=>{const[b,O]=h.useState(e),P=e??b,E=n??O,j=s({open:P,onOpenChange:E,placement:t,strategy:o,middleware:[r(v),a({padding:5,fallbackPlacements:["bottom","top"]}),l({padding:12})],whileElementsMounted:i}),w=j.context,M=c(w,{enabled:!1,...R}),D=u(w,{enabled:!1,...y}),T=d(w,{enabled:!1,...F}),A=p(w,C),N=f(w,k),S=m([M,A,T,D,N]);return h.useLayoutEffect((()=>{x&&j.refs.setPositionReference(null==x?void 0:x.current)}),[x,j.refs]),h.useMemo((()=>({open:P,onOpenChange:E,modal:g,...S,...j})),[P,E,g,S,j])})({...t});return e(x.Provider,{value:o,children:n})},R=h.forwardRef((function({children:t,asChild:o=!1,...s},r){const{refs:a,getReferenceProps:l,open:i,onOpenChange:c}=y(),u=t.ref,d=n([a.setReference,r,u]);return o&&h.isValidElement(t)?h.cloneElement(t,l({ref:d,...s,...t.props})):e("button",{ref:d,onClick:()=>null==c?void 0:c(!i),"aria-expanded":i,...l(s),children:t})})),k=h.forwardRef((function({style:s,className:r,padding:a=0,initialFocus:l=0,returnFocus:i=!0,...c},u){const{context:d,modal:p,refs:f,open:m,floatingStyles:x,getFloatingProps:F}=y(),R=n([f.setFloating,u]),k=f.reference.current,{theme:C,density:b}=v((P=k)&&"contextElement"in P?k.contextElement:k),O=h.useRef(null);var P;return h.useEffect((()=>{var e;O.current=(null==(e=d.elements.domReference)?void 0:e.closest("[data-portal]"))||null}),[d.elements.domReference]),m?e(t,{root:O.current,children:e(o,{context:d,modal:p,initialFocus:l,returnFocus:i,children:e("div",{"data-theme":C,"data-layout-density":b,className:g("jkl jkl-popover",r),ref:R,style:{...s,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...F(c),children:c.children})})}):null}));F.Trigger=R,F.Content=k;export{F as Popover,F as default};
+import{jsx as e}from"react/jsx-runtime";import{useMergeRefs as t,FloatingPortal as n,FloatingFocusManager as o,useFloating as s,offset as r,flip as a,shift as l,autoUpdate as i,useClick as c,useHover as u,useFocus as d,useDismiss as p,useRole as f,useInteractions as m}from"@floating-ui/react";import{c as g}from"../../../clsx-BeLtu-UY.js";import*as h from"react";import{getThemeAndDensity as v}from"../../utilities/getThemeAndDensity.js";const x=h.createContext(null),y=()=>{const e=h.useContext(x);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},F=({children:t,...n})=>{const o=(({open:e,onOpenChange:t,placement:n="bottom-start",strategy:o="absolute",modal:g=!0,offset:v=4,positionReference:x,hoverOptions:y,focusOptions:F,clickOptions:R,roleOptions:b,dismissOptions:k})=>{const[C,O]=h.useState(e),P=e??C,E=t??O,j=s({open:P,onOpenChange:E,placement:n,strategy:o,middleware:[r(v),a({padding:5,fallbackPlacements:["bottom","top"]}),l({padding:12})],whileElementsMounted:i}),w=j.context,M=c(w,{enabled:!1,...R}),D=u(w,{enabled:!1,...y}),T=d(w,{enabled:!1,...F}),A=p(w,k),N=f(w,b),S=m([M,A,T,D,N]);return h.useLayoutEffect((()=>{x&&j.refs.setPositionReference(null==x?void 0:x.current)}),[x,j.refs]),h.useMemo((()=>({open:P,onOpenChange:E,modal:g,...S,...j})),[P,E,g,S,j])})({...n});return e(x.Provider,{value:o,children:t})},R=h.forwardRef((function({children:n,asChild:o=!1,...s},r){const{refs:a,getReferenceProps:l,open:i,onOpenChange:c}=y(),u=n.ref,d=t([a.setReference,r,u]);return o&&h.isValidElement(n)?h.cloneElement(n,l({ref:d,...s,...n.props})):e("button",{ref:d,onClick:()=>null==c?void 0:c(!i),"aria-expanded":i,...l(s),children:n})})),b=h.forwardRef((function({style:s,className:r,padding:a=0,initialFocus:l=0,returnFocus:i=!0,...c},u){const{context:d,modal:p,refs:f,open:m,floatingStyles:x,getFloatingProps:F}=y(),R=t([f.setFloating,u]),b=f.reference.current,{theme:k,density:C}=v((P=b)&&"contextElement"in P?b.contextElement:b),O=h.useRef(null);var P;return h.useEffect((()=>{var e;O.current=(null==(e=d.elements.domReference)?void 0:e.closest("[data-portal]"))||document.body}),[d.elements.domReference]),m?e(n,{root:O.current,children:e(o,{context:d,modal:p,initialFocus:l,returnFocus:i,children:e("div",{"data-theme":k,"data-layout-density":C,className:g("jkl jkl-popover",r),ref:R,style:{...s,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...F(c),children:c.children})})}):null}));F.Trigger=R,F.Content=b;export{F as Popover,F as default};
 //# sourceMappingURL=Popover.js.map

package/build/es/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    useFloating,\n    useFocus,\n    useHover,\n    useClick,\n    useDismiss,\n    autoUpdate,\n    useRole,\n    useMergeRefs,\n    offset,\n    flip,\n    shift,\n    useInteractions,\n    FloatingPortal,\n    FloatingFocusManager,\n    UseFloatingOptions,\n    VirtualElement,\n    ReferenceElement,\n    ReferenceType,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\n\nexport type ClickOptions = Parameters<typeof useClick>[1];\nexport type DismissOptions = Parameters<typeof useDismiss>[1];\nexport type FocusOptions = Parameters<typeof useFocus>[1];\nexport type HoverOptions = Parameters<typeof useHover>[1];\nexport type RoleOptions = Parameters<typeof useRole>[1];\n\nexport interface PopoverOptions {\n    /**\n     * Angir om popoveren er åpen eller lukket.\n     *\n     * @see https://floating-ui.com/docs/usefloating#open\n     */\n    open?: boolean;\n    /**\n     * Callback som trigges når popoveren åpnes eller lukkes.\n     *\n     * @see https://floating-ui.com/docs/usefloating#onopenchange\n     */\n    onOpenChange?: UseFloatingOptions[\"onOpenChange\"];\n    /**\n     * Bestemmer plasseringen av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#placement\n     *\n     * @default \"bottom-start\"\n     */\n    placement?: UseFloatingOptions[\"placement\"];\n    /**\n     * Definerer strategien for posisjonering av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#strategy\n     *\n     * @default \"absolute\"\n     */\n    strategy?: UseFloatingOptions[\"strategy\"];\n    /**\n     * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet\n     * og innhold utenfor ikke kan interageres med.\n     *\n     * @see https://floating-ui.com/docs/usefloating#modal\n     *\n     * @default true\n     */\n    modal?: boolean;\n    /**\n     * Justerer avstanden mellom referanse-elementet og popoveren.\n     *\n     * @see https://floating-ui.com/docs/offset\n     *\n     * @default 4\n     */\n    offset?: number;\n    /**\n     * Referanse til elementet som popoveren skal posisjoneres i forhold til.\n     *\n     * @see https://floating-ui.com/docs/usefloating#setpositionreference\n     *\n     * @default Popover.Trigger\n     */\n    positionReference?: React.RefObject<ReferenceType>;\n    /**\n     * Options for hover-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usehover\n     *\n     * @default { enabled: false }\n     */\n    hoverOptions?: HoverOptions;\n    /**\n     * Options for fokus-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usefocus\n     *\n     * @default { enabled: false }\n     */\n    focusOptions?: FocusOptions;\n    /**\n     * Options for klikk-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/useclick\n     *\n     * @default { enabled: false }\n     */\n    clickOptions?: ClickOptions;\n    /**\n     * Konfigurerer rollen for popoveren.\n     *\n     * @see https://floating-ui.com/docs/userole\n     *\n     * @default { enabled: true, role: \"dialog\" }\n     */\n    roleOptions?: RoleOptions;\n    /**\n     * Options for å lukke popoveren når en dismissal skjer,\n     * som ved å klikke utenfor eller trykke på \"Escape\"-tasten.\n     *\n     * @see https://floating-ui.com/docs/usedismiss\n     *\n     * @default { enabled: true }\n     */\n    dismissOptions?: DismissOptions;\n}\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps(props)}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, density } = isCustomPositioned(referenceElement)\n        ? getThemeAndDensity(referenceElement.contextElement)\n        : getThemeAndDensity(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt.\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || null;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-layout-density={density}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    useFloating,\n    useFocus,\n    useHover,\n    useClick,\n    useDismiss,\n    autoUpdate,\n    useRole,\n    useMergeRefs,\n    offset,\n    flip,\n    shift,\n    useInteractions,\n    FloatingPortal,\n    FloatingFocusManager,\n    UseFloatingOptions,\n    VirtualElement,\n    ReferenceElement,\n    ReferenceType,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\n\nexport type ClickOptions = Parameters<typeof useClick>[1];\nexport type DismissOptions = Parameters<typeof useDismiss>[1];\nexport type FocusOptions = Parameters<typeof useFocus>[1];\nexport type HoverOptions = Parameters<typeof useHover>[1];\nexport type RoleOptions = Parameters<typeof useRole>[1];\n\nexport interface PopoverOptions {\n    /**\n     * Angir om popoveren er åpen eller lukket.\n     *\n     * @see https://floating-ui.com/docs/usefloating#open\n     */\n    open?: boolean;\n    /**\n     * Callback som trigges når popoveren åpnes eller lukkes.\n     *\n     * @see https://floating-ui.com/docs/usefloating#onopenchange\n     */\n    onOpenChange?: UseFloatingOptions[\"onOpenChange\"];\n    /**\n     * Bestemmer plasseringen av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#placement\n     *\n     * @default \"bottom-start\"\n     */\n    placement?: UseFloatingOptions[\"placement\"];\n    /**\n     * Definerer strategien for posisjonering av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#strategy\n     *\n     * @default \"absolute\"\n     */\n    strategy?: UseFloatingOptions[\"strategy\"];\n    /**\n     * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet\n     * og innhold utenfor ikke kan interageres med.\n     *\n     * @see https://floating-ui.com/docs/usefloating#modal\n     *\n     * @default true\n     */\n    modal?: boolean;\n    /**\n     * Justerer avstanden mellom referanse-elementet og popoveren.\n     *\n     * @see https://floating-ui.com/docs/offset\n     *\n     * @default 4\n     */\n    offset?: number;\n    /**\n     * Referanse til elementet som popoveren skal posisjoneres i forhold til.\n     *\n     * @see https://floating-ui.com/docs/usefloating#setpositionreference\n     *\n     * @default Popover.Trigger\n     */\n    positionReference?: React.RefObject<ReferenceType>;\n    /**\n     * Options for hover-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usehover\n     *\n     * @default { enabled: false }\n     */\n    hoverOptions?: HoverOptions;\n    /**\n     * Options for fokus-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usefocus\n     *\n     * @default { enabled: false }\n     */\n    focusOptions?: FocusOptions;\n    /**\n     * Options for klikk-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/useclick\n     *\n     * @default { enabled: false }\n     */\n    clickOptions?: ClickOptions;\n    /**\n     * Konfigurerer rollen for popoveren.\n     *\n     * @see https://floating-ui.com/docs/userole\n     *\n     * @default { enabled: true, role: \"dialog\" }\n     */\n    roleOptions?: RoleOptions;\n    /**\n     * Options for å lukke popoveren når en dismissal skjer,\n     * som ved å klikke utenfor eller trykke på \"Escape\"-tasten.\n     *\n     * @see https://floating-ui.com/docs/usedismiss\n     *\n     * @default { enabled: true }\n     */\n    dismissOptions?: DismissOptions;\n}\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps(props)}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, density } = isCustomPositioned(referenceElement)\n        ? getThemeAndDensity(referenceElement.contextElement)\n        : getThemeAndDensity(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-layout-density={density}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.37.1",
+    "version": "0.37.3",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -556,5 +556,5 @@
             "@babel/preset-react"
         ]
     },
-    "gitHead": "d5c09e40c98ff1079995f552f14cc42c48bfb2e9"
+    "gitHead": "3f06c84c22b6a5735bda4f55cc499c7f16a96ea3"
 }

package/styles/components/button/button.css

@@ -135,7 +135,7 @@
   height: 1rem;
 }
 html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
-  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-urylpi7;
+  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-u60jz6e;
 }
 :not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
   scale: 1.05;
@@ -179,7 +179,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   --background-color: var(--jkl-color-background-interactive-hover);
 }
 
-@keyframes jkl-tertiary-flash-urylpi7 {
+@keyframes jkl-tertiary-flash-u60jz6e {
   0% {
     opacity: 0.5;
     scale: 1;

package/styles/components/button/button.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-padding-block:0.5rem;--jkl-button-padding-text:1.5rem;--jkl-button-padding-icon:1rem;--jkl-button-padding-icon-button:0.5rem;--jkl-button-padding-tertiary-inline:0.25rem;--jkl-button-padding-ghost-inline:0.5rem;--jkl-button-font-size:1.125rem;--jkl-button-line-height:1.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:1.25rem;--jkl-button-line-height:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-padding-block:0.25rem;--jkl-button-padding-text:0.75rem;--jkl-button-padding-icon:0.5rem;--jkl-button-padding-icon-button:0.25rem;--jkl-button-padding-tertiary-inline:0.125rem;--jkl-button-padding-ghost-inline:0.25rem;--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem}@media (min-width:680px){[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem;--jkl-button-icon-weight:500}}.jkl-button{--jkl-icon-weight:var(--jkl-button-icon-weight,initial);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font-size:var(--jkl-button-font-size);font-weight:700;line-height:var(--jkl-button-line-height);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-urylpi7 .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--jkl-button-padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-urylpi7{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-padding-block:0.5rem;--jkl-button-padding-text:1.5rem;--jkl-button-padding-icon:1rem;--jkl-button-padding-icon-button:0.5rem;--jkl-button-padding-tertiary-inline:0.25rem;--jkl-button-padding-ghost-inline:0.5rem;--jkl-button-font-size:1.125rem;--jkl-button-line-height:1.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:1.25rem;--jkl-button-line-height:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-padding-block:0.25rem;--jkl-button-padding-text:0.75rem;--jkl-button-padding-icon:0.5rem;--jkl-button-padding-icon-button:0.25rem;--jkl-button-padding-tertiary-inline:0.125rem;--jkl-button-padding-ghost-inline:0.25rem;--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem}@media (min-width:680px){[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem;--jkl-button-icon-weight:500}}.jkl-button{--jkl-icon-weight:var(--jkl-button-icon-weight,initial);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font-size:var(--jkl-button-font-size);font-weight:700;line-height:var(--jkl-button-line-height);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-u60jz6e .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--jkl-button-padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-u60jz6e{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}

package/styles/components/checkbox/checkbox.css

@@ -32,7 +32,7 @@
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-ui9axne {
+@keyframes jkl-checkbox-checked-u66pe1a {
   0% {
     width: 0;
     height: 0;
@@ -46,7 +46,7 @@
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-ui9axng {
+@keyframes jkl-checkbox-indeterminate-u66pe22 {
   0% {
     width: 0;
   }
@@ -74,11 +74,11 @@
   top: -6px;
 }
 .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-ui9axne 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-u66pe1a 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-ui9axng 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-u66pe22 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

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

@@ -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-ui9axne{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-ui9axng{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:transparent;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{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-ui9axne .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-ui9axng .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{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.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__label:active{--background-color:var(--jkl-color-background-input-focus)}.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{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);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__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:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}
+: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-u66pe1a{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u66pe22{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:transparent;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{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u66pe1a .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-u66pe22 .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{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.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__label:active{--background-color:var(--jkl-color-background-input-focus)}.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{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);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__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:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}

package/styles/components/feedback/feedback.css

@@ -2,7 +2,7 @@
  * Do not edit directly
  * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
-@keyframes jkl-show-u0akthu {
+@keyframes jkl-show-uby1egu {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -37,7 +37,7 @@
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-u0akthu 0.25s ease-out;
+  animation: jkl-show-uby1egu 0.25s ease-out;
 }
 .jkl-feedback__buttons {
   display: flex;

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

@@ -1 +1 @@
-@keyframes jkl-show-u0akthu{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:1rem;--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-u0akthu .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 rgba(0,0,0,.1);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)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after{opacity:1}
+@keyframes jkl-show-uby1egu{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:1rem;--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-uby1egu .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 rgba(0,0,0,.1);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)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after{opacity:1}

package/styles/components/input-group/input-group.css

@@ -78,7 +78,7 @@
   --color: var(--jkl-color-text-default);
 }
 .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uaz68kw forwards;
+  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u0a1i8z forwards;
 }
 .jkl-form-support-label--sr-only {
   border: 0 !important;
@@ -153,7 +153,7 @@
   white-space: nowrap !important; /* 3 */
 }
 
-@keyframes jkl-support-icon-entrance-uaz68kw {
+@keyframes jkl-support-icon-entrance-u0a1i8z {
   0% {
     margin-right: 0;
     opacity: 0;

package/styles/components/input-group/input-group.min.css

@@ -1 +1 @@
-.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-uaz68kw .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-uaz68kw{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}
+.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-u0a1i8z .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-u0a1i8z{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}

package/styles/components/input-panel/checkbox-panel.css

@@ -60,7 +60,7 @@
   --background-color: var(--jkl-color-background-container-high);
 }
 
-@keyframes jkl-checkbox-checked-ugw91jq {
+@keyframes jkl-checkbox-checked-u8alrke {
   0% {
     width: 0;
     height: 0;
@@ -123,7 +123,7 @@
   }
 }
 .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-  animation: jkl-checkbox-checked-ugw91jq 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-u8alrke 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox-panel:has([aria-invalid=true]) {

package/styles/components/input-panel/checkbox-panel.min.css

@@ -1 +1 @@
-.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);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),.jkl-input-panel:hover{--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-separator-hover)}.jkl-input-panel:has(:checked){--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-action);--background-color:var(--jkl-color-background-container-high)}@keyframes jkl-checkbox-checked-ugw91jq{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.jkl-checkbox-panel{--checkbox-background-color:transparent;--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-ugw91jq .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)}
+.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);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),.jkl-input-panel:hover{--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-separator-hover)}.jkl-input-panel:has(:checked){--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-action);--background-color:var(--jkl-color-background-container-high)}@keyframes jkl-checkbox-checked-u8alrke{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.jkl-checkbox-panel{--checkbox-background-color:transparent;--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-u8alrke .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/input-panel/radio-panel.css

@@ -60,7 +60,7 @@
   --background-color: var(--jkl-color-background-container-high);
 }
 
-@keyframes jkl-dot-in-uexzoqm {
+@keyframes jkl-dot-in-ul7uss5 {
   0% {
     transform: scale(0.8);
   }
@@ -108,7 +108,7 @@
   }
 }
 .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
-  animation: jkl-dot-in-uexzoqm 150ms ease;
+  animation: jkl-dot-in-ul7uss5 150ms ease;
 }
 .jkl-radio-panel:has(:checked) {
   --radio-dot-color: var(--jkl-color-border-action);

package/styles/components/input-panel/radio-panel.min.css

@@ -1 +1 @@
-.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);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),.jkl-input-panel:hover{--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-separator-hover)}.jkl-input-panel:has(:checked){--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-action);--background-color:var(--jkl-color-background-container-high)}@keyframes jkl-dot-in-uexzoqm{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--radio-dot-color:transparent;--radio-ring-color:transparent}.jkl-radio-panel__decorator{background-color:var(--radio-ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__decorator:after{background-color:var(--radio-dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@media screen and (forced-colors:active){.jkl-radio-panel__decorator{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__decorator:after{animation:jkl-dot-in-uexzoqm .15s ease}.jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--radio-ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-text-on-alert)}
+.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);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),.jkl-input-panel:hover{--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-separator-hover)}.jkl-input-panel:has(:checked){--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-action);--background-color:var(--jkl-color-background-container-high)}@keyframes jkl-dot-in-ul7uss5{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--radio-dot-color:transparent;--radio-ring-color:transparent}.jkl-radio-panel__decorator{background-color:var(--radio-ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__decorator:after{background-color:var(--radio-dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@media screen and (forced-colors:active){.jkl-radio-panel__decorator{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__decorator:after{animation:jkl-dot-in-ul7uss5 .15s ease}.jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--radio-ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-text-on-alert)}