@fremtind/jokul 1.6.0 → 1.6.2

package/build/cjs/components/toast/Toast.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@react-aria/toast"),o=require("../../../clsx-E3yX_9sL.cjs"),e=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),a=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),c=require("../icon-button/IconButton.cjs"),i=require("../icon/icons/CloseIcon.cjs"),l=require("../icon/icons/ErrorIcon.cjs"),u=require("../icon/icons/InfoIcon.cjs"),j=require("../icon/icons/SuccessIcon.cjs"),m=require("../icon/icons/WarningIcon.cjs"),d=s=>{switch(s){case"error":return t.jsx(l.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(u.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(j.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(m.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:l,state:u,...j}){const m=e.useRef(null),{toastProps:k,titleProps:x}=s.useToast(j,u,m),_="string"==typeof j.toast.content?j.toast.content:j.toast.content.content,f="string"==typeof j.toast.content?void 0:j.toast.content.title,v=null==j.toast.timer?.timerId,{prefersReducedMotion:g}=n.useBrowserPreferences();return e.useEffect((()=>{g&&"exiting"===j.toast.animation&&u.remove(j.toast.key)}),[g,j.toast.animation,j.toast.key,u]),t.jsxs("div",{...k,ref:m,className:o.clsx("jkl-toast",{"jkl-toast--info":"info"===j.toast.variant,"jkl-toast--error":"error"===j.toast.variant,"jkl-toast--warning":"warning"===j.toast.variant,"jkl-toast--success":"success"===j.toast.variant},l),"data-animation":j.toast.animation,onAnimationEnd:()=>{"exiting"===j.toast.animation&&u.remove(j.toast.key)},children:[t.jsx("span",{className:"jkl-toast__progress",children:j.toast.timeout?t.jsx(r.Countdown,{from:j.toast.timeout,isPaused:v,onAnimationEnd:t=>{t.stopPropagation()}}):null}),d(j.toast.variant),t.jsxs("div",{...x,className:"jkl-toast__content",children:[f&&t.jsx("p",{className:"jkl-toast__title",children:f}),t.jsx("p",{className:"jkl-toast__message",children:_}),j.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(a.Button,{variant:"secondary",density:"compact",onClick:j.toast.action.onClick,children:j.toast.action.label})})]}),t.jsx(c.IconButton,{"data-theme":j.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{u.close(j.toast.key)},children:t.jsx(i.CloseIcon,{})})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@react-aria/toast"),e=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),a=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),i=require("../icon-button/IconButton.cjs"),c=require("../icon/icons/CloseIcon.cjs"),l=require("../icon/icons/ErrorIcon.cjs"),u=require("../icon/icons/InfoIcon.cjs"),j=require("../icon/icons/SuccessIcon.cjs"),m=require("../icon/icons/WarningIcon.cjs"),d=s=>{switch(s){case"error":return t.jsx(l.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(u.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(j.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(m.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:l,state:u,...j}){const m=o.useRef(null),{toastProps:k,titleProps:f}=s.useToast(j,u,m),[x,_]=o.useState(!1),v="string"==typeof j.toast.content?j.toast.content:j.toast.content.content,g="string"==typeof j.toast.content?void 0:j.toast.content.title,p=null==j.toast.timer?.timerId,{prefersReducedMotion:I}=n.useBrowserPreferences();return o.useEffect((()=>{const t=setTimeout((()=>{_(!0)}),0);return()=>clearTimeout(t)}),[]),o.useEffect((()=>{I&&"exiting"===j.toast.animation&&u.remove(j.toast.key)}),[I,j.toast.animation,j.toast.key,u]),t.jsxs("div",{...k,ref:m,className:e.clsx("jkl-toast",{"jkl-toast--info":"info"===j.toast.variant,"jkl-toast--error":"error"===j.toast.variant,"jkl-toast--warning":"warning"===j.toast.variant,"jkl-toast--success":"success"===j.toast.variant},l),"data-animation":j.toast.animation,onAnimationEnd:()=>{"exiting"===j.toast.animation&&u.remove(j.toast.key)},children:[t.jsx("span",{className:"jkl-toast__progress",children:j.toast.timeout?t.jsx(r.Countdown,{from:j.toast.timeout,isPaused:p,onAnimationEnd:t=>{t.stopPropagation()}}):null}),d(j.toast.variant),t.jsxs("div",{...f,className:"jkl-toast__content","aria-live":"assertive",children:[g&&t.jsx("p",{className:"jkl-toast__title",children:x&&g}),t.jsx("p",{className:"jkl-toast__message",children:x&&v}),j.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(a.Button,{variant:"secondary",density:"compact",onClick:j.toast.action.onClick,children:j.toast.action.label})})]}),t.jsx(i.IconButton,{"data-theme":j.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{u.close(j.toast.key)},children:t.jsx(c.CloseIcon,{})})]})};
 //# sourceMappingURL=Toast.cjs.map

package/build/cjs/components/toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n                {props.toast.action && (\n                    <div className=\"jkl-toast__action\">\n                        <Button\n                            variant=\"secondary\"\n                            density=\"compact\"\n                            onClick={props.toast.action.onClick}\n                        >\n                            {props.toast.action.label}\n                        </Button>\n                    </div>\n                )}\n            </div>\n            <IconButton\n                data-theme={!props.toast.variant ? undefined : \"light\"}\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","action","Button","density","onClick","label","IconButton","close","CloseIcon"],"mappings":"6lBAqBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,oBAClC,QACW,OAAA,KAAA,gBAIZ,UACHA,UAAAA,EACAI,MAAAA,KACGC,IAEG,MAAAC,EAAMC,SAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASA,SAAAL,EAAOD,EAAOE,GAEpDK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BT,EAAMO,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,0BAEjCC,OAAAA,EAAAA,WAAU,KACFF,GAAkD,YAA1BZ,EAAMO,MAAMQ,WAI9BhB,EAAAiB,OAAOhB,EAAMO,MAAMU,IAAG,GAEjC,CAACL,EAAsBZ,EAAMO,MAAMQ,UAAWf,EAAMO,MAAMU,IAAKlB,IAG9DmB,EAAAA,KAAC,MAAA,IACOf,EACJF,IAAAA,EACAN,UAAWwB,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBnB,EAAMO,MAAMa,QAC/B,mBAA4C,UAAxBpB,EAAMO,MAAMa,QAChC,qBAA8C,YAAxBpB,EAAMO,MAAMa,QAClC,qBAA8C,YAAxBpB,EAAMO,MAAMa,SAEtCzB,GAEJ,iBAAgBK,EAAMO,MAAMQ,UAC5BM,eAAgB,KAEkB,YAA1BrB,EAAMO,MAAMQ,WACNhB,EAAAiB,OAAOhB,EAAMO,MAAMU,IAAG,EAIpCK,SAAA,CAAA7B,MAAC,OAAK,CAAAE,UAAU,sBACX2B,SAAAtB,EAAMO,MAAMgB,QACT9B,EAAAA,IAAC+B,EAAAA,UAAA,CACGC,KAAMzB,EAAMO,MAAMgB,QAClBd,SAAAA,EACAY,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPpC,EAAQS,EAAMO,MAAMa,SACpBF,EAAAA,KAAA,MAAA,IAAQd,EAAYT,UAAU,qBAC1B2B,SAAA,CAAAd,GAAUf,EAAAA,IAAA,IAAA,CAAEE,UAAU,mBAAoB2B,SAAMd,IAChDf,EAAAA,IAAA,IAAA,CAAEE,UAAU,qBAAsB2B,SAAQhB,IAC1CN,EAAMO,MAAMqB,QACRnC,EAAAA,IAAA,MAAA,CAAIE,UAAU,oBACX2B,SAAA7B,EAAAA,IAACoC,EAAAA,OAAA,CACGT,QAAQ,YACRU,QAAQ,UACRC,QAAS/B,EAAMO,MAAMqB,OAAOG,QAE3BT,SAAAtB,EAAMO,MAAMqB,OAAOI,aAKpCvC,EAAAA,IAACwC,EAAAA,WAAA,CACG,aAAajC,EAAMO,MAAMa,QAAsB,aAAZ,EACnC,aAAW,cACXzB,UAAU,4BACVoC,QAAS,KACChC,EAAAmC,MAAMlC,EAAMO,MAAMU,IAAG,EAG/BK,eAACa,EAAAA,UAAU,CAAA,OAI3B"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n    const [announceReady, setAnnounceReady] = useState(false);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n        const timeout = setTimeout(() => {\n            setAnnounceReady(true);\n        }, 0);\n\n        return () => clearTimeout(timeout);\n    }, []);\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div\n                {...titleProps}\n                className=\"jkl-toast__content\"\n                aria-live=\"assertive\"\n            >\n                {title && (\n                    <p className=\"jkl-toast__title\">{announceReady && title}</p>\n                )}\n                <p className=\"jkl-toast__message\">{announceReady && content}</p>\n                {props.toast.action && (\n                    <div className=\"jkl-toast__action\">\n                        <Button\n                            variant=\"secondary\"\n                            density=\"compact\"\n                            onClick={props.toast.action.onClick}\n                        >\n                            {props.toast.action.label}\n                        </Button>\n                    </div>\n                )}\n            </div>\n            <IconButton\n                data-theme={!props.toast.variant ? undefined : \"light\"}\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","action","Button","density","onClick","label","IconButton","close","CloseIcon"],"mappings":"6lBAqBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,oBAClC,QACW,OAAA,KAAA,gBAIZ,UACHA,UAAAA,EACAI,MAAAA,KACGC,IAEG,MAAAC,EAAMC,SAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASA,SAAAL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,EAAAA,UAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,0BAEjCC,OAAAA,EAAAA,WAAU,KAEA,MAAAC,EAAUC,YAAW,KACvBZ,GAAiB,EAAI,GACtB,GAEI,MAAA,IAAMa,aAAaF,EAAO,GAClC,IAEHD,EAAAA,WAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAI9BtB,EAAAuB,OAAOtB,EAAMU,MAAMa,IAAG,GAEjC,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAAA,KAAC,MAAA,IACOrB,EACJF,IAAAA,EACAN,UAAW8B,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtC/B,GAEJ,iBAAgBK,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACNtB,EAAAuB,OAAOtB,EAAMU,MAAMa,IAAG,EAIpCK,SAAA,CAAAnC,MAAC,OAAK,CAAAE,UAAU,sBACXiC,SAAA5B,EAAMU,MAAMQ,QACTzB,EAAAA,IAACoC,EAAAA,UAAA,CACGC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACAe,eAAiBI,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPzC,EAAQS,EAAMU,MAAMgB,SACrBF,EAAAA,KAAC,MAAA,IACOpB,EACJT,UAAU,qBACV,YAAU,YAETiC,SAAA,CAAAjB,GACIlB,EAAAA,IAAA,IAAA,CAAEE,UAAU,mBAAoBiC,YAAiBjB,IAErDlB,EAAAA,IAAA,IAAA,CAAEE,UAAU,qBAAsBiC,YAAiBnB,IACnDT,EAAMU,MAAMuB,QACRxC,EAAAA,IAAA,MAAA,CAAIE,UAAU,oBACXiC,SAAAnC,EAAAA,IAACyC,EAAAA,OAAA,CACGR,QAAQ,YACRS,QAAQ,UACRC,QAASpC,EAAMU,MAAMuB,OAAOG,QAE3BR,SAAA5B,EAAMU,MAAMuB,OAAOI,aAKpC5C,EAAAA,IAAC6C,EAAAA,WAAA,CACG,aAAatC,EAAMU,MAAMgB,QAAsB,aAAZ,EACnC,aAAW,cACX/B,UAAU,4BACVyC,QAAS,KACCrC,EAAAwC,MAAMvC,EAAMU,MAAMa,IAAG,EAG/BK,eAACY,EAAAA,UAAU,CAAA,OAI3B"}

package/build/es/components/toast/Toast.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useEffect as e}from"react";import{useBrowserPreferences as r}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{Button as i}from"../button/Button.js";import{Countdown as c}from"../countdown/Countdown.js";import{IconButton as l}from"../icon-button/IconButton.js";import{CloseIcon as m}from"../icon/icons/CloseIcon.js";import{ErrorIcon as u}from"../icon/icons/ErrorIcon.js";import{InfoIcon as f}from"../icon/icons/InfoIcon.js";import{SuccessIcon as d}from"../icon/icons/SuccessIcon.js";import{WarningIcon as j}from"../icon/icons/WarningIcon.js";const p=t=>{switch(t){case"error":return o(u,{className:"jkl-toast__icon"});case"info":return o(f,{className:"jkl-toast__icon"});case"success":return o(d,{className:"jkl-toast__icon"});case"warning":return o(j,{className:"jkl-toast__icon"});default:return null}};function k({className:u,state:f,...d}){const j=n(null),{toastProps:k,titleProps:_}=s(d,f,j),v="string"==typeof d.toast.content?d.toast.content:d.toast.content.content,I="string"==typeof d.toast.content?void 0:d.toast.content.title,g=null==d.toast.timer?.timerId,{prefersReducedMotion:h}=r();return e((()=>{h&&"exiting"===d.toast.animation&&f.remove(d.toast.key)}),[h,d.toast.animation,d.toast.key,f]),t("div",{...k,ref:j,className:a("jkl-toast",{"jkl-toast--info":"info"===d.toast.variant,"jkl-toast--error":"error"===d.toast.variant,"jkl-toast--warning":"warning"===d.toast.variant,"jkl-toast--success":"success"===d.toast.variant},u),"data-animation":d.toast.animation,onAnimationEnd:()=>{"exiting"===d.toast.animation&&f.remove(d.toast.key)},children:[o("span",{className:"jkl-toast__progress",children:d.toast.timeout?o(c,{from:d.toast.timeout,isPaused:g,onAnimationEnd:t=>{t.stopPropagation()}}):null}),p(d.toast.variant),t("div",{..._,className:"jkl-toast__content",children:[I&&o("p",{className:"jkl-toast__title",children:I}),o("p",{className:"jkl-toast__message",children:v}),d.toast.action&&o("div",{className:"jkl-toast__action",children:o(i,{variant:"secondary",density:"compact",onClick:d.toast.action.onClick,children:d.toast.action.label})})]}),o(l,{"data-theme":d.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{f.close(d.toast.key)},children:o(m,{})})]})}export{k as Toast};
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useState as e,useEffect as r}from"react";import{useBrowserPreferences as i}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{Button as c}from"../button/Button.js";import{Countdown as l}from"../countdown/Countdown.js";import{IconButton as m}from"../icon-button/IconButton.js";import{CloseIcon as u}from"../icon/icons/CloseIcon.js";import{ErrorIcon as f}from"../icon/icons/ErrorIcon.js";import{InfoIcon as d}from"../icon/icons/InfoIcon.js";import{SuccessIcon as j}from"../icon/icons/SuccessIcon.js";import{WarningIcon as p}from"../icon/icons/WarningIcon.js";const k=t=>{switch(t){case"error":return o(f,{className:"jkl-toast__icon"});case"info":return o(d,{className:"jkl-toast__icon"});case"success":return o(j,{className:"jkl-toast__icon"});case"warning":return o(p,{className:"jkl-toast__icon"});default:return null}};function _({className:f,state:d,...j}){const p=n(null),{toastProps:_,titleProps:v}=s(j,d,p),[I,g]=e(!1),h="string"==typeof j.toast.content?j.toast.content:j.toast.content.content,N="string"==typeof j.toast.content?void 0:j.toast.content.title,w=null==j.toast.timer?.timerId,{prefersReducedMotion:y}=i();return r((()=>{const t=setTimeout((()=>{g(!0)}),0);return()=>clearTimeout(t)}),[]),r((()=>{y&&"exiting"===j.toast.animation&&d.remove(j.toast.key)}),[y,j.toast.animation,j.toast.key,d]),t("div",{..._,ref:p,className:a("jkl-toast",{"jkl-toast--info":"info"===j.toast.variant,"jkl-toast--error":"error"===j.toast.variant,"jkl-toast--warning":"warning"===j.toast.variant,"jkl-toast--success":"success"===j.toast.variant},f),"data-animation":j.toast.animation,onAnimationEnd:()=>{"exiting"===j.toast.animation&&d.remove(j.toast.key)},children:[o("span",{className:"jkl-toast__progress",children:j.toast.timeout?o(l,{from:j.toast.timeout,isPaused:w,onAnimationEnd:t=>{t.stopPropagation()}}):null}),k(j.toast.variant),t("div",{...v,className:"jkl-toast__content","aria-live":"assertive",children:[N&&o("p",{className:"jkl-toast__title",children:I&&N}),o("p",{className:"jkl-toast__message",children:I&&h}),j.toast.action&&o("div",{className:"jkl-toast__action",children:o(c,{variant:"secondary",density:"compact",onClick:j.toast.action.onClick,children:j.toast.action.label})})]}),o(m,{"data-theme":j.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{d.close(j.toast.key)},children:o(u,{})})]})}export{_ as Toast};
 //# sourceMappingURL=Toast.js.map

package/build/es/components/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n                {props.toast.action && (\n                    <div className=\"jkl-toast__action\">\n                        <Button\n                            variant=\"secondary\"\n                            density=\"compact\"\n                            onClick={props.toast.action.onClick}\n                        >\n                            {props.toast.action.label}\n                        </Button>\n                    </div>\n                )}\n            </div>\n            <IconButton\n                data-theme={!props.toast.variant ? undefined : \"light\"}\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","action","Button","density","onClick","label","IconButton","close","CloseIcon"],"mappings":"otBAqBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KAAA,EAIZ,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,IAEGC,MAAAA,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAEpDK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BT,EAAMO,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1BZ,EAAMO,MAAMQ,WAI9BhB,EAAAiB,OAAOhB,EAAMO,MAAMU,IAAG,GAEjC,CAACL,EAAsBZ,EAAMO,MAAMQ,UAAWf,EAAMO,MAAMU,IAAKlB,IAG9DmB,EAAC,MAAA,IACOf,EACJF,IAAAA,EACAP,UAAWyB,EACP,YACA,CACI,kBAA2C,SAAxBnB,EAAMO,MAAMa,QAC/B,mBAA4C,UAAxBpB,EAAMO,MAAMa,QAChC,qBAA8C,YAAxBpB,EAAMO,MAAMa,QAClC,qBAA8C,YAAxBpB,EAAMO,MAAMa,SAEtC1B,GAEJ,iBAAgBM,EAAMO,MAAMQ,UAC5BM,eAAgB,KAEkB,YAA1BrB,EAAMO,MAAMQ,WACNhB,EAAAiB,OAAOhB,EAAMO,MAAMU,IAAG,EAIpCK,SAAA,CAAA9B,EAAC,OAAK,CAAAE,UAAU,sBACX4B,SAAAtB,EAAMO,MAAMgB,QACT/B,EAACgC,EAAA,CACGC,KAAMzB,EAAMO,MAAMgB,QAClBd,SAAAA,EACAY,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPrC,EAAQU,EAAMO,MAAMa,SACpBF,EAAA,MAAA,IAAQd,EAAYV,UAAU,qBAC1B4B,SAAA,CAAAd,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB4B,SAAMd,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB4B,SAAQhB,IAC1CN,EAAMO,MAAMqB,QACRpC,EAAA,MAAA,CAAIE,UAAU,oBACX4B,SAAA9B,EAACqC,EAAA,CACGT,QAAQ,YACRU,QAAQ,UACRC,QAAS/B,EAAMO,MAAMqB,OAAOG,QAE3BT,SAAAtB,EAAMO,MAAMqB,OAAOI,aAKpCxC,EAACyC,EAAA,CACG,aAAajC,EAAMO,MAAMa,QAAsB,aAAZ,EACnC,aAAW,cACX1B,UAAU,4BACVqC,QAAS,KACChC,EAAAmC,MAAMlC,EAAMO,MAAMU,IAAG,EAG/BK,WAACa,EAAU,CAAA,OAI3B"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n    const [announceReady, setAnnounceReady] = useState(false);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n        const timeout = setTimeout(() => {\n            setAnnounceReady(true);\n        }, 0);\n\n        return () => clearTimeout(timeout);\n    }, []);\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div\n                {...titleProps}\n                className=\"jkl-toast__content\"\n                aria-live=\"assertive\"\n            >\n                {title && (\n                    <p className=\"jkl-toast__title\">{announceReady && title}</p>\n                )}\n                <p className=\"jkl-toast__message\">{announceReady && content}</p>\n                {props.toast.action && (\n                    <div className=\"jkl-toast__action\">\n                        <Button\n                            variant=\"secondary\"\n                            density=\"compact\"\n                            onClick={props.toast.action.onClick}\n                        >\n                            {props.toast.action.label}\n                        </Button>\n                    </div>\n                )}\n            </div>\n            <IconButton\n                data-theme={!props.toast.variant ? undefined : \"light\"}\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","action","Button","density","onClick","label","IconButton","close","CloseIcon"],"mappings":"kuBAqBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KAAA,EAIZ,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,IAEGC,MAAAA,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,GAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KAEAC,MAAAA,EAAUC,YAAW,KACvBZ,GAAiB,EAAI,GACtB,GAEI,MAAA,IAAMa,aAAaF,EAAO,GAClC,IAEHD,GAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAI9BtB,EAAAuB,OAAOtB,EAAMU,MAAMa,IAAG,GAEjC,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAC,MAAA,IACOrB,EACJF,IAAAA,EACAP,UAAW+B,EACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtChC,GAEJ,iBAAgBM,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACNtB,EAAAuB,OAAOtB,EAAMU,MAAMa,IAAG,EAIpCK,SAAA,CAAApC,EAAC,OAAK,CAAAE,UAAU,sBACXkC,SAAA5B,EAAMU,MAAMQ,QACT1B,EAACqC,EAAA,CACGC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACAe,eAAiBI,IAEbA,EAAEC,iBAAgB,IAG1B,OAEP1C,EAAQU,EAAMU,MAAMgB,SACrBF,EAAC,MAAA,IACOpB,EACJV,UAAU,qBACV,YAAU,YAETkC,SAAA,CAAAjB,GACInB,EAAA,IAAA,CAAEE,UAAU,mBAAoBkC,YAAiBjB,IAErDnB,EAAA,IAAA,CAAEE,UAAU,qBAAsBkC,YAAiBnB,IACnDT,EAAMU,MAAMuB,QACRzC,EAAA,MAAA,CAAIE,UAAU,oBACXkC,SAAApC,EAAC0C,EAAA,CACGR,QAAQ,YACRS,QAAQ,UACRC,QAASpC,EAAMU,MAAMuB,OAAOG,QAE3BR,SAAA5B,EAAMU,MAAMuB,OAAOI,aAKpC7C,EAAC8C,EAAA,CACG,aAAatC,EAAMU,MAAMgB,QAAsB,aAAZ,EACnC,aAAW,cACXhC,UAAU,4BACV0C,QAAS,KACCrC,EAAAwC,MAAMvC,EAAMU,MAAMa,IAAG,EAG/BK,WAACY,EAAU,CAAA,OAI3B"}

package/package.json

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

package/styles/components/checkbox/checkbox.css

@@ -33,7 +33,7 @@
     --jkl-checkbox-box-size: 1.125rem;
     --jkl-checkbox-line-height: 1.5rem;
   }
-  @keyframes jkl-checkbox-checked-uns0n3p {
+  @keyframes jkl-checkbox-checked-uekru4o {
     0% {
       width: 0;
       height: 0;
@@ -47,7 +47,7 @@
       height: 58%;
     }
   }
-  @keyframes jkl-checkbox-indeterminate-uns0n4a {
+  @keyframes jkl-checkbox-indeterminate-uekru5o {
     0% {
       width: 0;
     }
@@ -76,11 +76,11 @@
     left: calc(-0.5 * var(--jkl-checkbox-box-size));
   }
   .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-    animation: jkl-checkbox-checked-uns0n3p 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-uekru4o 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-uns0n4a 150ms ease-in-out forwards;
+    animation: jkl-checkbox-indeterminate-uekru5o 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

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

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

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

@@ -64,7 +64,194 @@
   --outer-border-thickness: 0.125rem;
 }
 
-@keyframes jkl-checkbox-checked-uf8xjvu {
+@layer jokul.components {
+  :root,
+  [data-layout-density=comfortable],
+  [data-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-layout-density=comfortable],
+    [data-density=comfortable] {
+      --jkl-checkbox-height: 2.5rem;
+      --jkl-checkbox-box-size: 1.5rem;
+      --jkl-checkbox-line-height: 1.75rem;
+    }
+  }
+  [data-layout-density=compact],
+  [data-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-u1tunz9 {
+    0% {
+      width: 0;
+      height: 0;
+    }
+    40% {
+      width: 18%;
+      height: 0;
+    }
+    100% {
+      width: 18%;
+      height: 58%;
+    }
+  }
+  @keyframes jkl-checkbox-indeterminate-u1tunza {
+    0% {
+      width: 0;
+    }
+    100% {
+      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;
+    font-size: var(--jkl-checkbox-font-size);
+    line-height: var(--jkl-checkbox-line-height);
+    font-weight: var(--jkl-checkbox-font-weight);
+    display: flex;
+    flex-wrap: wrap;
+    min-height: var(--jkl-checkbox-height);
+    color: var(--text-color);
+    position: relative;
+  }
+  .jkl-checkbox__input {
+    position: absolute;
+    opacity: 0;
+    top: var(--jkl-checkbox-box-size);
+    left: calc(-0.5 * var(--jkl-checkbox-box-size));
+  }
+  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
+    animation: jkl-checkbox-checked-u1tunz9 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-u1tunza 150ms ease-in-out forwards;
+    opacity: 1;
+  }
+  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
+    color: var(--jkl-checkbox-focus-color);
+  }
+  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label > .jkl-checkbox__mark {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
+  .jkl-checkbox__input:disabled + .jkl-checkbox__label {
+    color: var(--jkl-checkbox-disabled-color);
+  }
+  .jkl-checkbox__input:active {
+    --background-color: var(--jkl-color-background-input-focus);
+  }
+  .jkl-checkbox__label {
+    display: flex;
+    min-width: 0;
+    max-width: 100%;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .jkl-checkbox__label:hover .jkl-checkbox__mark, .jkl-checkbox__label:active .jkl-checkbox__mark {
+    outline: 1px solid var(--box-color);
+  }
+  .jkl-checkbox__text {
+    margin: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) * 0.5) 0;
+    translate: 0 0.0625rem;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: color;
+  }
+  .jkl-checkbox__mark {
+    box-sizing: border-box;
+    position: relative;
+    height: var(--jkl-checkbox-box-size);
+    width: var(--jkl-checkbox-box-size);
+    margin-block: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)) * 0.5);
+    margin-inline-end: var(--jkl-unit-10);
+    align-self: flex-start;
+    flex-shrink: 0;
+    outline: none;
+    border-radius: 0;
+    border: 1px solid;
+    border-color: var(--box-color);
+    background-color: var(--background-color);
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: background-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__mark {
+      outline: revert;
+      border: 1px solid ButtonText;
+    }
+  }
+  .jkl-checkbox__check-mark::after {
+    content: "";
+    position: absolute;
+    transform-origin: bottom left;
+    bottom: 42%;
+    left: 18%;
+    display: block;
+    width: 18%;
+    height: 58%;
+    transform: rotate(45deg);
+    border: solid 0.125rem var(--check-color);
+    border-left-width: 0;
+    border-top-width: 0;
+    opacity: 0;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: opacity, border-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__check-mark::after {
+      border-color: ButtonText;
+    }
+  }
+  .jkl-checkbox__indeterminate-mark::after {
+    --width: 66%;
+    --thickness: 0.125rem;
+    content: "";
+    position: absolute;
+    bottom: calc(50% - var(--thickness) / 2);
+    left: calc((100% - var(--width)) / 2);
+    display: block;
+    width: var(--width);
+    border-bottom: solid var(--thickness) var(--check-color);
+    opacity: 0;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: opacity, border-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__indeterminate-mark::after {
+      border-color: ButtonText;
+    }
+  }
+  .jkl-checkbox--inline {
+    display: inline-flex;
+  }
+  .jkl-checkbox--inline:not(:last-of-type) {
+    margin-right: calc(var(--jkl-unit-10) * 3);
+  }
+  .jkl-checkbox--error {
+    --background-color: var(--jkl-color-background-alert-error);
+    --check-color: var(--jkl-color-text-on-alert);
+  }
+}
+@keyframes jkl-checkbox-checked-u1tunzj {
   0% {
     width: 0;
     height: 0;
@@ -128,13 +315,11 @@
     }
   }
   .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-    animation: jkl-checkbox-checked-uf8xjvu 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-u1tunzj 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox-panel:has([aria-invalid=true]) {
-    --checkbox-background-color: var(
-        --jkl-color-background-alert-error
-    );
+    --checkbox-background-color: var(--jkl-color-background-alert-error);
     --checkbox-check-color: var(--jkl-color-text-on-alert);
   }
 }

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

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

@@ -1,6 +1,7 @@
 @use "../../core/jkl" as jkl;
 @use "sass:string";
 @use "../../shared/input-panel/shared";
+@use "../checkbox/checkbox.scss";
 
 $_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
 
@@ -78,16 +79,13 @@ $_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
 
         &:has(:checked) &__decorator {
             &::after {
-                animation: $_checkbox-checked-animation-name
-                    jkl.timing("productive") ease-in-out forwards;
+                animation: $_checkbox-checked-animation-name jkl.timing("productive") ease-in-out forwards;
                 opacity: 1;
             }
         }
 
         &:has([aria-invalid="true"]) {
-            --checkbox-background-color: var(
-                --jkl-color-background-alert-error
-            );
+            --checkbox-background-color: var(--jkl-color-background-alert-error);
             --checkbox-check-color: var(--jkl-color-text-on-alert);
         }
     }

package/styles/components/countdown/countdown.css

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

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

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

package/styles/components/feedback/feedback.css

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

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

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

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

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