@fremtind/jokul 5.4.2 → 5.5.1

package/build/cjs/components/beta/nav-link/NavLink.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../../clsx-E3yX_9sL.cjs"),r=require("react"),s=r.forwardRef(function(s,t){const{title:a,description:c,className:l,children:n,as:d="a",...o}=s,u=d,p=r.useId();return e.jsxs(u,{...o,ref:t,"aria-labelledby":`${p}-title`,"aria-describedby":`${p}-description`,className:i.clsx("jkl-navlink--beta",l),children:[e.jsx("p",{className:"title",id:`${p}-title`,children:a}),c&&e.jsx("p",{className:"description",id:`${p}-description`,children:c})]})});exports.NavLink=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../../clsx-E3yX_9sL.cjs"),r=require("react"),t=r.forwardRef(function(t,s){const{title:a,description:l,className:c,children:n,as:d="a",outlined:o=!1,...u}=t,p=d,x=r.useId();return e.jsxs(p,{...u,ref:s,"aria-labelledby":`${x}-title`,"aria-describedby":`${x}-description`,className:i.clsx("jkl-navlink--beta",c),"data-outlined":o,children:[e.jsx("p",{className:"title",id:`${x}-title`,children:a}),l&&e.jsx("p",{className:"description",id:`${x}-description`,children:l})]})});exports.NavLink=t;
 //# sourceMappingURL=NavLink.cjs.map

package/build/cjs/components/beta/nav-link/NavLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.cjs","sources":["../../../../../src/components/beta/nav-link/NavLink.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport type { PolymorphicRef } from \"../../../utilities/index.js\";\nimport type { NavLinkProps } from \"./types.js\";\n\ntype NavLinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: NavLinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const NavLink = React.forwardRef(function NavLink<\n    ElementType extends React.ElementType = \"a\",\n>(props: NavLinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        title,\n        description,\n        className,\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n    const id = useId();\n\n    return (\n        <Component\n            {...rest}\n            ref={ref}\n            aria-labelledby={`${id}-title`}\n            aria-describedby={`${id}-description`}\n            className={clsx(\"jkl-navlink--beta\", className)}\n        >\n            <p className=\"title\" id={`${id}-title`}>\n                {title}\n            </p>\n            {description && (\n                <p className=\"description\" id={`${id}-description`}>\n                    {description}\n                </p>\n            )}\n        </Component>\n    );\n}) as NavLinkComponent;\n"],"names":["NavLink","React","forwardRef","props","ref","title","description","className","children","as","rest","Component","id","useId","jsxs","clsx","jsx"],"mappings":"mLASaA,EAAUC,EAAMC,WAAW,SAEtCC,EAAkCC,GAChC,MACIC,MAAAA,EACAC,YAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHP,EACEQ,EAAYF,EACZG,EAAKC,EAAAA,QAEX,OACIC,EAAAA,KAACH,EAAA,IACOD,EACJN,IAAAA,EACA,kBAAiB,GAAGQ,UACpB,mBAAkB,GAAGA,gBACrBL,UAAWQ,EAAAA,KAAK,oBAAqBR,GAErCC,SAAA,CAAAQ,EAAAA,IAAC,KAAET,UAAU,QAAQK,GAAI,GAAGA,UACvBJ,SAAAH,IAEJC,SACI,IAAA,CAAEC,UAAU,cAAcK,GAAI,GAAGA,gBAC7BJ,SAAAF,MAKrB"}
+{"version":3,"file":"NavLink.cjs","sources":["../../../../../src/components/beta/nav-link/NavLink.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport type { PolymorphicRef } from \"../../../utilities/index.js\";\nimport type { NavLinkProps } from \"./types.js\";\n\ntype NavLinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: NavLinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const NavLink = React.forwardRef(function NavLink<\n    ElementType extends React.ElementType = \"a\",\n>(props: NavLinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        title,\n        description,\n        className,\n        children,\n        as = \"a\",\n        outlined = false,\n        ...rest\n    } = props;\n    const Component = as;\n    const id = useId();\n\n    return (\n        <Component\n            {...rest}\n            ref={ref}\n            aria-labelledby={`${id}-title`}\n            aria-describedby={`${id}-description`}\n            className={clsx(\"jkl-navlink--beta\", className)}\n            data-outlined={outlined}\n        >\n            <p className=\"title\" id={`${id}-title`}>\n                {title}\n            </p>\n            {description && (\n                <p className=\"description\" id={`${id}-description`}>\n                    {description}\n                </p>\n            )}\n        </Component>\n    );\n}) as NavLinkComponent;\n"],"names":["NavLink","React","forwardRef","props","ref","title","description","className","children","as","outlined","rest","Component","id","useId","jsxs","clsx","jsx"],"mappings":"mLASaA,EAAUC,EAAMC,WAAW,SAEtCC,EAAkCC,GAChC,MACIC,MAAAA,EACAC,YAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EAAK,IACLC,SAAAA,GAAW,KACRC,GACHR,EACES,EAAYH,EACZI,EAAKC,EAAAA,QAEX,OACIC,EAAAA,KAACH,EAAA,IACOD,EACJP,IAAAA,EACA,kBAAiB,GAAGS,UACpB,mBAAkB,GAAGA,gBACrBN,UAAWS,EAAAA,KAAK,oBAAqBT,GACrC,gBAAeG,EAEfF,SAAA,CAAAS,EAAAA,IAAC,KAAEV,UAAU,QAAQM,GAAI,GAAGA,UACvBL,SAAAH,IAEJC,SACI,IAAA,CAAEC,UAAU,cAAcM,GAAI,GAAGA,gBAC7BL,SAAAF,MAKrB"}

package/build/cjs/components/beta/nav-link/types.d.cts

@@ -3,4 +3,9 @@ import { PolymorphicPropsWithRef } from '../../../utilities/index.cjs';
 export type NavLinkProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     title: string;
     description?: string;
+    /**
+     * Gir lenken transparent bakgrunn og en ramme.
+     * @default false
+     */
+    outlined?: boolean;
 }>;

package/build/cjs/components/input-panel/InputPanel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),n=require("../checkbox/Checkbox.cjs"),i=require("../radio-button/RadioButton.cjs");require("../../hooks/useId/useId.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../radio-button/radioGroupContext.cjs"),require("../radio-button/BaseRadioButton.cjs");const s=r.forwardRef(function({className:r,description:s,type:t,label:c,amount:o,value:l=c,name:u="Panelvalg",children:d,extraLabel:j,alwaysOpen:p=!1,"data-size":x,"data-theme":h,...m},b){return e.jsxs("div",{className:a.clsx("jkl-input-panel",`jkl-${t}-panel`,r),"data-always-open":p,"data-size":x,"data-theme":h,children:[e.jsxs("div",{className:"jkl-input-panel__header",children:["checkbox"===t&&e.jsx(n.Checkbox,{value:l?.toString(),name:u,ref:b,...m,children:c}),"radio"===t&&e.jsx(i.RadioButton,{value:l?.toString(),name:u,ref:b,...m,children:c}),(o||j)&&e.jsx("span",{className:"jkl-input-panel__header__amount",children:o||j})]}),(s||d)&&e.jsx("div",{className:"jkl-input-panel__description",children:s||d})]})});exports.InputPanel=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),a=require("react"),n=require("../checkbox/Checkbox.cjs"),i=require("../radio-button/RadioButton.cjs");require("../../hooks/useId/useId.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../radio-button/radioGroupContext.cjs"),require("../radio-button/BaseRadioButton.cjs");const s=a.forwardRef(function({className:a,description:s,type:t,label:c,amount:o,value:l=c,name:u="Panelvalg",children:d,extraLabel:j,alwaysOpen:p,"data-size":x,"data-theme":h,...m},b){return e.jsxs("div",{className:r.clsx("jkl-input-panel",`jkl-${t}-panel`,a),"data-size":x,"data-theme":h,children:[e.jsxs("div",{className:"jkl-input-panel__header",children:["checkbox"===t&&e.jsx(n.Checkbox,{value:l?.toString(),name:u,ref:b,...m,children:c}),"radio"===t&&e.jsx(i.RadioButton,{value:l?.toString(),name:u,ref:b,...m,children:c}),(o||j)&&e.jsx("span",{className:"jkl-input-panel__header__amount",children:o||j})]}),(s||d)&&e.jsx("div",{className:"jkl-input-panel__description",children:s||d})]})});exports.InputPanel=s;
 //# sourceMappingURL=InputPanel.cjs.map

package/build/cjs/components/input-panel/InputPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPanel.cjs","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n    {\n        className,\n        description,\n        type,\n        label,\n        amount,\n        value = label,\n        name = \"Panelvalg\",\n        children,\n        extraLabel,\n        alwaysOpen = false,\n        \"data-size\": dataSize,\n        \"data-theme\": dataTheme,\n        ...rest\n    }: InputPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n            data-always-open={alwaysOpen}\n            data-size={dataSize}\n            data-theme={dataTheme}\n        >\n            <div className=\"jkl-input-panel__header\">\n                {type === \"checkbox\" && (\n                    <Checkbox\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </Checkbox>\n                )}\n                {type === \"radio\" && (\n                    <RadioButton\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </RadioButton>\n                )}\n                {(amount || extraLabel) && (\n                    <span className=\"jkl-input-panel__header__amount\">\n                        {amount || extraLabel}\n                    </span>\n                )}\n            </div>\n            {(description || children) && (\n                <div className=\"jkl-input-panel__description\">\n                    {description || children}\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["InputPanel","forwardRef","className","description","type","label","amount","value","name","children","extraLabel","alwaysOpen","dataSize","dataTheme","rest","ref","jsxs","clsx","jsx","Checkbox","toString","RadioButton"],"mappings":"mgBAMO,MAAMA,EAAaC,EAAAA,WAAW,UAE7BC,UAAAA,EACAC,YAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQF,EACRG,KAAAA,EAAO,YACPC,SAAAA,EACAC,WAAAA,EACAC,WAAAA,GAAa,EACb,YAAaC,EACb,aAAcC,KACXC,GAEPC,GAEA,OACIC,EAAAA,KAAC,MAAA,CACGd,UAAWe,EAAAA,KAAK,kBAAmB,OAAOb,UAAcF,GACxD,mBAAkBS,EAClB,YAAWC,EACX,aAAYC,EAEZJ,SAAA,CAAAO,EAAAA,KAAC,MAAA,CAAId,UAAU,0BACVO,SAAA,CAAS,aAATL,GACGc,EAAAA,IAACC,EAAAA,SAAA,CACGZ,MAAOA,GAAOa,WACdZ,KAAAA,EACAO,IAAAA,KACID,EAEHL,SAAAJ,IAGC,UAATD,GACGc,EAAAA,IAACG,EAAAA,YAAA,CACGd,MAAOA,GAAOa,WACdZ,KAAAA,EACAO,IAAAA,KACID,EAEHL,SAAAJ,KAGPC,GAAUI,IACRQ,EAAAA,IAAC,QAAKhB,UAAU,kCACXO,YAAUC,QAIrBP,GAAeM,IACbS,EAAAA,IAAC,OAAIhB,UAAU,+BACVO,YAAeA,MAKpC"}
+{"version":3,"file":"InputPanel.cjs","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n    {\n        className,\n        description,\n        type,\n        label,\n        amount,\n        value = label,\n        name = \"Panelvalg\",\n        children,\n        extraLabel,\n        alwaysOpen: _alwaysOpen,\n        \"data-size\": dataSize,\n        \"data-theme\": dataTheme,\n        ...rest\n    }: InputPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n            data-size={dataSize}\n            data-theme={dataTheme}\n        >\n            <div className=\"jkl-input-panel__header\">\n                {type === \"checkbox\" && (\n                    <Checkbox\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </Checkbox>\n                )}\n                {type === \"radio\" && (\n                    <RadioButton\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </RadioButton>\n                )}\n                {(amount || extraLabel) && (\n                    <span className=\"jkl-input-panel__header__amount\">\n                        {amount || extraLabel}\n                    </span>\n                )}\n            </div>\n            {(description || children) && (\n                <div className=\"jkl-input-panel__description\">\n                    {description || children}\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["InputPanel","forwardRef","className","description","type","label","amount","value","name","children","extraLabel","alwaysOpen","_alwaysOpen","dataSize","dataTheme","rest","ref","jsxs","clsx","jsx","Checkbox","toString","RadioButton"],"mappings":"mgBAMO,MAAMA,EAAaC,EAAAA,WAAW,UAE7BC,UAAAA,EACAC,YAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQF,EACRG,KAAAA,EAAO,YACPC,SAAAA,EACAC,WAAAA,EACAC,WAAYC,EACZ,YAAaC,EACb,aAAcC,KACXC,GAEPC,GAEA,OACIC,EAAAA,KAAC,MAAA,CACGf,UAAWgB,EAAAA,KAAK,kBAAmB,OAAOd,UAAcF,GACxD,YAAWW,EACX,aAAYC,EAEZL,SAAA,CAAAQ,EAAAA,KAAC,MAAA,CAAIf,UAAU,0BACVO,SAAA,CAAS,aAATL,GACGe,EAAAA,IAACC,EAAAA,SAAA,CACGb,MAAOA,GAAOc,WACdb,KAAAA,EACAQ,IAAAA,KACID,EAEHN,SAAAJ,IAGC,UAATD,GACGe,EAAAA,IAACG,EAAAA,YAAA,CACGf,MAAOA,GAAOc,WACdb,KAAAA,EACAQ,IAAAA,KACID,EAEHN,SAAAJ,KAGPC,GAAUI,IACRS,EAAAA,IAAC,QAAKjB,UAAU,kCACXO,YAAUC,QAIrBP,GAAeM,IACbU,EAAAA,IAAC,OAAIjB,UAAU,+BACVO,YAAeA,MAKpC"}

package/build/es/components/beta/nav-link/NavLink.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{c as s}from"../../../../clsx-BeLtu-UY.js";import a,{useId as r}from"react";const t=a.forwardRef(function(a,t){const{title:c,description:l,className:n,children:d,as:o="a",...m}=a,p=o,f=r();return e(p,{...m,ref:t,"aria-labelledby":`${f}-title`,"aria-describedby":`${f}-description`,className:s("jkl-navlink--beta",n),children:[i("p",{className:"title",id:`${f}-title`,children:c}),l&&i("p",{className:"description",id:`${f}-description`,children:l})]})});export{t as NavLink};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{c as a}from"../../../../clsx-BeLtu-UY.js";import s,{useId as t}from"react";const r=s.forwardRef(function(s,r){const{title:c,description:l,className:n,children:d,as:o="a",outlined:m=!1,...p}=s,f=o,u=t();return e(f,{...p,ref:r,"aria-labelledby":`${u}-title`,"aria-describedby":`${u}-description`,className:a("jkl-navlink--beta",n),"data-outlined":m,children:[i("p",{className:"title",id:`${u}-title`,children:c}),l&&i("p",{className:"description",id:`${u}-description`,children:l})]})});export{r as NavLink};
 //# sourceMappingURL=NavLink.js.map

package/build/es/components/beta/nav-link/NavLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.js","sources":["../../../../../src/components/beta/nav-link/NavLink.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport type { PolymorphicRef } from \"../../../utilities/index.js\";\nimport type { NavLinkProps } from \"./types.js\";\n\ntype NavLinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: NavLinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const NavLink = React.forwardRef(function NavLink<\n    ElementType extends React.ElementType = \"a\",\n>(props: NavLinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        title,\n        description,\n        className,\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n    const id = useId();\n\n    return (\n        <Component\n            {...rest}\n            ref={ref}\n            aria-labelledby={`${id}-title`}\n            aria-describedby={`${id}-description`}\n            className={clsx(\"jkl-navlink--beta\", className)}\n        >\n            <p className=\"title\" id={`${id}-title`}>\n                {title}\n            </p>\n            {description && (\n                <p className=\"description\" id={`${id}-description`}>\n                    {description}\n                </p>\n            )}\n        </Component>\n    );\n}) as NavLinkComponent;\n"],"names":["NavLink","React","forwardRef","props","ref","title","description","className","children","as","rest","Component","id","useId","jsxs","clsx","jsx"],"mappings":"oIASO,MAAMA,EAAUC,EAAMC,WAAW,SAEtCC,EAAkCC,GAChC,MACIC,MAAAA,EACAC,YAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHP,EACEQ,EAAYF,EACZG,EAAKC,IAEX,OACIC,EAACH,EAAA,IACOD,EACJN,IAAAA,EACA,kBAAiB,GAAGQ,UACpB,mBAAkB,GAAGA,gBACrBL,UAAWQ,EAAK,oBAAqBR,GAErCC,SAAA,CAAAQ,EAAC,KAAET,UAAU,QAAQK,GAAI,GAAGA,UACvBJ,SAAAH,IAEJC,KACI,IAAA,CAAEC,UAAU,cAAcK,GAAI,GAAGA,gBAC7BJ,SAAAF,MAKrB"}
+{"version":3,"file":"NavLink.js","sources":["../../../../../src/components/beta/nav-link/NavLink.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport type { PolymorphicRef } from \"../../../utilities/index.js\";\nimport type { NavLinkProps } from \"./types.js\";\n\ntype NavLinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: NavLinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const NavLink = React.forwardRef(function NavLink<\n    ElementType extends React.ElementType = \"a\",\n>(props: NavLinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        title,\n        description,\n        className,\n        children,\n        as = \"a\",\n        outlined = false,\n        ...rest\n    } = props;\n    const Component = as;\n    const id = useId();\n\n    return (\n        <Component\n            {...rest}\n            ref={ref}\n            aria-labelledby={`${id}-title`}\n            aria-describedby={`${id}-description`}\n            className={clsx(\"jkl-navlink--beta\", className)}\n            data-outlined={outlined}\n        >\n            <p className=\"title\" id={`${id}-title`}>\n                {title}\n            </p>\n            {description && (\n                <p className=\"description\" id={`${id}-description`}>\n                    {description}\n                </p>\n            )}\n        </Component>\n    );\n}) as NavLinkComponent;\n"],"names":["NavLink","React","forwardRef","props","ref","title","description","className","children","as","outlined","rest","Component","id","useId","jsxs","clsx","jsx"],"mappings":"oIASO,MAAMA,EAAUC,EAAMC,WAAW,SAEtCC,EAAkCC,GAChC,MACIC,MAAAA,EACAC,YAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EAAK,IACLC,SAAAA,GAAW,KACRC,GACHR,EACES,EAAYH,EACZI,EAAKC,IAEX,OACIC,EAACH,EAAA,IACOD,EACJP,IAAAA,EACA,kBAAiB,GAAGS,UACpB,mBAAkB,GAAGA,gBACrBN,UAAWS,EAAK,oBAAqBT,GACrC,gBAAeG,EAEfF,SAAA,CAAAS,EAAC,KAAEV,UAAU,QAAQM,GAAI,GAAGA,UACvBL,SAAAH,IAEJC,KACI,IAAA,CAAEC,UAAU,cAAcM,GAAI,GAAGA,gBAC7BL,SAAAF,MAKrB"}

package/build/es/components/beta/nav-link/types.d.ts

@@ -3,4 +3,9 @@ import { PolymorphicPropsWithRef } from '../../../utilities/index.js';
 export type NavLinkProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     title: string;
     description?: string;
+    /**
+     * Gir lenken transparent bakgrunn og en ramme.
+     * @default false
+     */
+    outlined?: boolean;
 }>;

package/build/es/components/input-panel/InputPanel.js

@@ -1,2 +1,2 @@
-import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import{forwardRef as n}from"react";import{Checkbox as t}from"../checkbox/Checkbox.js";import{RadioButton as i}from"../radio-button/RadioButton.js";import"../../hooks/useId/useId.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../radio-button/radioGroupContext.js";import"../radio-button/BaseRadioButton.js";const r=n(function({className:n,description:r,type:s,label:c,amount:l,value:d=c,name:m="Panelvalg",children:p,extraLabel:u,alwaysOpen:j=!1,"data-size":h,"data-theme":x,...f},k){return a("div",{className:o("jkl-input-panel",`jkl-${s}-panel`,n),"data-always-open":j,"data-size":h,"data-theme":x,children:[a("div",{className:"jkl-input-panel__header",children:["checkbox"===s&&e(t,{value:d?.toString(),name:m,ref:k,...f,children:c}),"radio"===s&&e(i,{value:d?.toString(),name:m,ref:k,...f,children:c}),(l||u)&&e("span",{className:"jkl-input-panel__header__amount",children:l||u})]}),(r||p)&&e("div",{className:"jkl-input-panel__description",children:r||p})]})});export{r as InputPanel};
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import{forwardRef as n}from"react";import{Checkbox as t}from"../checkbox/Checkbox.js";import{RadioButton as i}from"../radio-button/RadioButton.js";import"../../hooks/useId/useId.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../radio-button/radioGroupContext.js";import"../radio-button/BaseRadioButton.js";const r=n(function({className:n,description:r,type:s,label:c,amount:l,value:d=c,name:m="Panelvalg",children:p,extraLabel:u,alwaysOpen:j,"data-size":h,"data-theme":x,...f},k){return a("div",{className:o("jkl-input-panel",`jkl-${s}-panel`,n),"data-size":h,"data-theme":x,children:[a("div",{className:"jkl-input-panel__header",children:["checkbox"===s&&e(t,{value:d?.toString(),name:m,ref:k,...f,children:c}),"radio"===s&&e(i,{value:d?.toString(),name:m,ref:k,...f,children:c}),(l||u)&&e("span",{className:"jkl-input-panel__header__amount",children:l||u})]}),(r||p)&&e("div",{className:"jkl-input-panel__description",children:r||p})]})});export{r as InputPanel};
 //# sourceMappingURL=InputPanel.js.map

package/build/es/components/input-panel/InputPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPanel.js","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n    {\n        className,\n        description,\n        type,\n        label,\n        amount,\n        value = label,\n        name = \"Panelvalg\",\n        children,\n        extraLabel,\n        alwaysOpen = false,\n        \"data-size\": dataSize,\n        \"data-theme\": dataTheme,\n        ...rest\n    }: InputPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n            data-always-open={alwaysOpen}\n            data-size={dataSize}\n            data-theme={dataTheme}\n        >\n            <div className=\"jkl-input-panel__header\">\n                {type === \"checkbox\" && (\n                    <Checkbox\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </Checkbox>\n                )}\n                {type === \"radio\" && (\n                    <RadioButton\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </RadioButton>\n                )}\n                {(amount || extraLabel) && (\n                    <span className=\"jkl-input-panel__header__amount\">\n                        {amount || extraLabel}\n                    </span>\n                )}\n            </div>\n            {(description || children) && (\n                <div className=\"jkl-input-panel__description\">\n                    {description || children}\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["InputPanel","forwardRef","className","description","type","label","amount","value","name","children","extraLabel","alwaysOpen","dataSize","dataTheme","rest","ref","jsxs","clsx","jsx","Checkbox","toString","RadioButton"],"mappings":"2dAMO,MAAMA,EAAaC,EAAW,UAE7BC,UAAAA,EACAC,YAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQF,EACRG,KAAAA,EAAO,YACPC,SAAAA,EACAC,WAAAA,EACAC,WAAAA,GAAa,EACb,YAAaC,EACb,aAAcC,KACXC,GAEPC,GAEA,OACIC,EAAC,MAAA,CACGd,UAAWe,EAAK,kBAAmB,OAAOb,UAAcF,GACxD,mBAAkBS,EAClB,YAAWC,EACX,aAAYC,EAEZJ,SAAA,CAAAO,EAAC,MAAA,CAAId,UAAU,0BACVO,SAAA,CAAS,aAATL,GACGc,EAACC,EAAA,CACGZ,MAAOA,GAAOa,WACdZ,KAAAA,EACAO,IAAAA,KACID,EAEHL,SAAAJ,IAGC,UAATD,GACGc,EAACG,EAAA,CACGd,MAAOA,GAAOa,WACdZ,KAAAA,EACAO,IAAAA,KACID,EAEHL,SAAAJ,KAGPC,GAAUI,IACRQ,EAAC,QAAKhB,UAAU,kCACXO,YAAUC,QAIrBP,GAAeM,IACbS,EAAC,OAAIhB,UAAU,+BACVO,YAAeA,MAKpC"}
+{"version":3,"file":"InputPanel.js","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n    {\n        className,\n        description,\n        type,\n        label,\n        amount,\n        value = label,\n        name = \"Panelvalg\",\n        children,\n        extraLabel,\n        alwaysOpen: _alwaysOpen,\n        \"data-size\": dataSize,\n        \"data-theme\": dataTheme,\n        ...rest\n    }: InputPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n            data-size={dataSize}\n            data-theme={dataTheme}\n        >\n            <div className=\"jkl-input-panel__header\">\n                {type === \"checkbox\" && (\n                    <Checkbox\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </Checkbox>\n                )}\n                {type === \"radio\" && (\n                    <RadioButton\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </RadioButton>\n                )}\n                {(amount || extraLabel) && (\n                    <span className=\"jkl-input-panel__header__amount\">\n                        {amount || extraLabel}\n                    </span>\n                )}\n            </div>\n            {(description || children) && (\n                <div className=\"jkl-input-panel__description\">\n                    {description || children}\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["InputPanel","forwardRef","className","description","type","label","amount","value","name","children","extraLabel","alwaysOpen","_alwaysOpen","dataSize","dataTheme","rest","ref","jsxs","clsx","jsx","Checkbox","toString","RadioButton"],"mappings":"2dAMO,MAAMA,EAAaC,EAAW,UAE7BC,UAAAA,EACAC,YAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQF,EACRG,KAAAA,EAAO,YACPC,SAAAA,EACAC,WAAAA,EACAC,WAAYC,EACZ,YAAaC,EACb,aAAcC,KACXC,GAEPC,GAEA,OACIC,EAAC,MAAA,CACGf,UAAWgB,EAAK,kBAAmB,OAAOd,UAAcF,GACxD,YAAWW,EACX,aAAYC,EAEZL,SAAA,CAAAQ,EAAC,MAAA,CAAIf,UAAU,0BACVO,SAAA,CAAS,aAATL,GACGe,EAACC,EAAA,CACGb,MAAOA,GAAOc,WACdb,KAAAA,EACAQ,IAAAA,KACID,EAEHN,SAAAJ,IAGC,UAATD,GACGe,EAACG,EAAA,CACGf,MAAOA,GAAOc,WACdb,KAAAA,EACAQ,IAAAA,KACID,EAEHN,SAAAJ,KAGPC,GAAUI,IACRS,EAAC,QAAKjB,UAAU,kCACXO,YAAUC,QAIrBP,GAAeM,IACbU,EAAC,OAAIjB,UAAU,+BACVO,YAAeA,MAKpC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "5.4.2",
+  "version": "5.5.1",
   "type": "module",
   "engines": {
     "node": "^20.19.0 || >=22.12.0"

package/styles/components/beta/nav-link/navlink.css

@@ -2,17 +2,19 @@
  * Do not edit directly, this file was auto-generated.
  */
 .jkl-navlink--beta {
-  --border-radius: 4px;
-  --separator: 1px solid var(--jkl-color-border-subdued);
+  --background-color: var(--jkl-color-background-container);
+  --border-color: transparent;
+  --border-radius: var(--jkl-border-radius-s);
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   column-gap: 2em;
   color: inherit;
   text-decoration: none;
-  background-color: var(--jkl-color-background-page);
+  background-color: var(--background-color);
   padding: var(--jkl-spacing-s);
-  border-radius: 0;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
   font: var(--jkl-text-style-paragraph-medium);
   transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
   transition-duration: var(--jkl-motion-timing-productive);
@@ -47,20 +49,17 @@
   transition-duration: var(--jkl-motion-timing-productive);
   transition-property: translate;
 }
+.jkl-navlink--beta[data-outlined=true] {
+  --background-color: transparent;
+  --border-color: var(--jkl-color-border-subdued);
+}
 .jkl-navlink--beta:hover, .jkl-navlink--beta:focus-visible {
-  background-color: color-mix(in srgb, currentColor 15%, transparent);
+  background-color: var(--jkl-color-background-container-accent);
 }
 .jkl-navlink--beta:hover::after, .jkl-navlink--beta:focus-visible::after {
   translate: 4px 0;
 }
-.jkl-navlink--beta:first-of-type {
-  border-start-start-radius: var(--border-radius);
-  border-start-end-radius: var(--border-radius);
-}
-.jkl-navlink--beta:last-of-type {
-  border-end-start-radius: var(--border-radius);
-  border-end-end-radius: var(--border-radius);
-}
-.jkl-navlink--beta:has(+ .jkl-navlink--beta) {
-  border-block-end: var(--separator);
+.jkl-navlink--beta:focus-visible {
+  outline: 3px solid var(--jkl-color-border-strong);
+  outline-offset: 3px;
 }

package/styles/components/beta/nav-link/navlink.min.css

@@ -1 +1 @@
-.jkl-navlink--beta{--border-radius:4px;--separator:1px solid var(--jkl-color-border-subdued);align-items:center;background-color:var(--jkl-color-background-page);border-radius:0;color:inherit;column-gap:2em;display:grid;font:var(--jkl-text-style-paragraph-medium);grid-template-columns:1fr auto;padding:var(--jkl-spacing-s);text-decoration:none;transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out)}.jkl-navlink--beta .description,.jkl-navlink--beta .title{grid-column:1}.jkl-navlink--beta:has(.description) .title{font-weight:700}.jkl-navlink--beta:after{content:"arrow_forward"/"";display:inline-block;flex-shrink:0;font-family:var(--jkl-font-family-icons);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;grid-column:2;grid-row:1/span 999;line-height:1;translate:0;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-duration:var(--jkl-motion-timing-productive);transition-property:font-variation-settings,transform;transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out)}.jkl-navlink--beta:focus-visible,.jkl-navlink--beta:hover{background-color:color-mix(in srgb,currentColor 15%,#0000)}.jkl-navlink--beta:focus-visible:after,.jkl-navlink--beta:hover:after{translate:4px 0}.jkl-navlink--beta:first-of-type{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.jkl-navlink--beta:last-of-type{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.jkl-navlink--beta:has(+.jkl-navlink--beta){-webkit-border-after:var(--separator);border-block-end:var(--separator)}
+.jkl-navlink--beta{--background-color:var(--jkl-color-background-container);--border-color:#0000;--border-radius:var(--jkl-border-radius-s);align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:inherit;column-gap:2em;display:grid;font:var(--jkl-text-style-paragraph-medium);grid-template-columns:1fr auto;padding:var(--jkl-spacing-s);text-decoration:none;transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out)}.jkl-navlink--beta .description,.jkl-navlink--beta .title{grid-column:1}.jkl-navlink--beta:has(.description) .title{font-weight:700}.jkl-navlink--beta:after{content:"arrow_forward"/"";display:inline-block;flex-shrink:0;font-family:var(--jkl-font-family-icons);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;grid-column:2;grid-row:1/span 999;line-height:1;translate:0;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-duration:var(--jkl-motion-timing-productive);transition-property:font-variation-settings,transform;transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out)}.jkl-navlink--beta[data-outlined=true]{--background-color:#0000;--border-color:var(--jkl-color-border-subdued)}.jkl-navlink--beta:focus-visible,.jkl-navlink--beta:hover{background-color:var(--jkl-color-background-container-accent)}.jkl-navlink--beta:focus-visible:after,.jkl-navlink--beta:hover:after{translate:4px 0}.jkl-navlink--beta:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}

package/styles/components/beta/nav-link/navlink.scss

@@ -2,8 +2,9 @@
 @use "../../icon/base-styles" as icon;
 
 .jkl-navlink--beta {
-    --border-radius: 4px;
-    --separator: 1px solid var(--jkl-color-border-subdued);
+    --background-color: var(--jkl-color-background-container);
+    --border-color: transparent;
+    --border-radius: var(--jkl-border-radius-s);
 
     display: grid;
     grid-template-columns: 1fr auto;
@@ -11,9 +12,10 @@
     column-gap: 2em;
     color: inherit;
     text-decoration: none;
-    background-color: var(--jkl-color-background-page);
+    background-color: var(--background-color);
     padding: var(--jkl-spacing-s);
-    border-radius: 0;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
 
     @include jkl.text-style("paragraph-medium");
     @include jkl.motion("easeInBounceOut", "productive");
@@ -42,28 +44,21 @@
         transition-property: translate;
     }
 
+    &[data-outlined="true"] {
+        --background-color: transparent;
+        --border-color: var(--jkl-color-border-subdued);
+    }
+
     &:hover,
     &:focus-visible {
-        background-color: color-mix(in srgb,
-                currentColor 15%,
-                transparent);
+        background-color: var(--jkl-color-background-container-accent);
 
         &::after {
             translate: 4px 0;
         }
     }
 
-    &:first-of-type {
-        border-start-start-radius: var(--border-radius);
-        border-start-end-radius: var(--border-radius);
-    }
-
-    &:last-of-type {
-        border-end-start-radius: var(--border-radius);
-        border-end-end-radius: var(--border-radius);
-    }
-
-    &:has(+ .jkl-navlink--beta) {
-        border-block-end: var(--separator);
+    &:focus-visible {
+        @include jkl.focus-outline;
     }
-}
+}

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

@@ -63,27 +63,18 @@
     font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-input-panel__description {
-    height: 0;
-    overflow: hidden;
     padding-inline: var(--padding-inline);
-    padding-block-end: var(--jkl-spacing-none);
+    padding-block-end: var(--jkl-unit-20);
     line-height: initial;
     font: var(--jkl-text-style-paragraph-medium);
-    transition-timing-function: var(--jkl-motion-easing-standard);
-    transition-duration: var(--jkl-motion-timing-productive);
-    transition-property: height;
   }
   .jkl-input-panel:has(:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
-  .jkl-input-panel:has(:checked), .jkl-input-panel[data-always-open=true], .jkl-input-panel:not([data-always-open]) {
+  .jkl-input-panel:has(:checked) {
     --background-color: var(--jkl-color-background-container);
   }
-  .jkl-input-panel:has(:checked) .jkl-input-panel__description, .jkl-input-panel[data-always-open=true] .jkl-input-panel__description, .jkl-input-panel:not([data-always-open]) .jkl-input-panel__description {
-    height: auto;
-    padding-block-end: var(--jkl-unit-20);
-  }
   .jkl-input-panel:has(input[aria-invalid=true]) {
     --outer-border-color: var(--jkl-color-error-border-default);
   }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:#0000;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header label:after{content:"";inset:0;position:absolute}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header input[type=checkbox],.jkl-input-panel__header input[type=radio]{inset-block-start:var(--jkl-unit-20);inset-inline-start:var(--padding-inline)}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-spacing-none);transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input[aria-invalid=true]){--outer-border-color:var(--jkl-color-error-border-default)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-checkbox{--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font:var(--jkl-text-style-text-medium);position:relative}.jkl-checkbox__input{-webkit-appearance:none;appearance:none;background:#0000;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;padding:0;position:absolute;z-index:1}.jkl-checkbox__input,.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-checkbox__input{border-style:revert}.jkl-checkbox__input,.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{color:var(--text-color);cursor:pointer;display:flex;transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__label:before{color:var(--icon-color);content:"check_box_outline_blank"/"";-webkit-margin-end:.25em;display:inline-block;flex-shrink:0;font-family:var(--jkl-font-family-icons);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box"/"";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box"/"";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}.jkl-checkbox-panel .jkl-checkbox{-webkit-margin-start:-.1em;margin-inline-start:-.1em}}@layer jokul.components{.jkl-checkbox-panel .jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:none}}
+@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:#0000;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header label:after{content:"";inset:0;position:absolute}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header input[type=checkbox],.jkl-input-panel__header input[type=radio]{inset-block-start:var(--jkl-unit-20);inset-inline-start:var(--padding-inline)}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.jkl-input-panel__description{padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-unit-20);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(input[aria-invalid=true]){--outer-border-color:var(--jkl-color-error-border-default)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-checkbox{--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font:var(--jkl-text-style-text-medium);position:relative}.jkl-checkbox__input{-webkit-appearance:none;appearance:none;background:#0000;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;padding:0;position:absolute;z-index:1}.jkl-checkbox__input,.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-checkbox__input{border-style:revert}.jkl-checkbox__input,.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{color:var(--text-color);cursor:pointer;display:flex;transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__label:before{color:var(--icon-color);content:"check_box_outline_blank"/"";-webkit-margin-end:.25em;display:inline-block;flex-shrink:0;font-family:var(--jkl-font-family-icons);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box"/"";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box"/"";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}.jkl-checkbox-panel .jkl-checkbox{-webkit-margin-start:-.1em;margin-inline-start:-.1em}}@layer jokul.components{.jkl-checkbox-panel .jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:none}}

package/styles/components/countdown/countdown.css

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

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--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-upxasaf var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-upxasaf{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--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-uua2e3e var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uua2e3e{0%{width:100%}to{width:0}}}

package/styles/components/feedback/feedback.css

@@ -20,12 +20,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u6qyf83 0.25s ease-out;
+    animation: jkl-show-u5qe2q6 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u6qyf83 {
+  @keyframes jkl-show-u5qe2q6 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-u6qyf83 .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-u6qyf83{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:var(--jkl-spacing-12);justify-content:space-between;margin-top:var(--jkl-unit-10);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:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard);width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.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)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}
+@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-u5qe2q6 .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-u5qe2q6{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:var(--jkl-spacing-12);justify-content:space-between;margin-top:var(--jkl-unit-10);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:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard);width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.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)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}

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

@@ -340,22 +340,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u0zulbz;
+    animation-name: jkl-loader-left-spin-udj3hdl;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u0zulcb;
+    animation-name: jkl-loader-middle-spin-udj3heg;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u0zuld0;
+    animation-name: jkl-loader-right-spin-udj3her;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u0zulbz {
+  @keyframes jkl-loader-left-spin-udj3hdl {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -369,7 +369,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u0zulcb {
+  @keyframes jkl-loader-middle-spin-udj3heg {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -386,7 +386,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u0zuld0 {
+  @keyframes jkl-loader-right-spin-udj3her {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -426,7 +426,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u0zuldb;
+      animation: 2s ease infinite jkl-blink-udj3hes;
     }
   }
   .jkl-skeleton-input {
@@ -474,10 +474,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u0zuldb;
+      animation: 2s ease-in-out infinite jkl-blink-udj3hes;
     }
   }
-  @keyframes jkl-blink-u0zuldb {
+  @keyframes jkl-blink-udj3hes {
     0% {
       opacity: 1;
     }

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

@@ -1 +1 @@
-@charset "UTF-8";@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-max-height:var(--jkl-unit-210);--jkl-file-thumbnail-width:var(--jkl-unit-60);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:var(--jkl-border-radius-s);--bg:#0000;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__thumbnail{align-items:center;anchor-name:--thumb;anchor-scope:all;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:var(--jkl-border-radius-xs);display:flex;flex-shrink:0;height:auto;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);outline:1px solid color-mix(in srgb,currentColor 3%,#0000);overflow:hidden;position:relative;width:var(--jkl-file-thumbnail-width)}.jkl-file__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position:absolute;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in;z-index:1}@starting-style{.jkl-file__thumbnail:after{scale:0}}.jkl-file__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__thumbnail img[src]{min-height:100%;min-width:100%;object-fit:cover;object-position:center}.jkl-file__content{background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--text-color);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file__content:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button){--jkl-file-padding:0 var(--jkl-unit-10)}.jkl-file__info{flex-grow:999}.jkl-file__name{word-break:break-word}.jkl-file__size{word-break:keep-all}.jkl-file__button{aspect-ratio:1;flex-shrink:0}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/10}.jkl-file:not([data-state*=loading]) .jkl-file__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small);position:absolute;z-index:1}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-error-text-default)}.jkl-file[data-state=error] .jkl-file__content{border-color:var(--jkl-color-error-border-default)}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-accent);color:var(--link-color);outline:none;text-decoration:none;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link:after{--jkl-icon-fill:0;--jkl-icon-size:1em;-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;flex-shrink:0;font-family:var(--jkl-font-family-icons);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;padding-inline-start:.2em;vertical-align:middle;-webkit-font-smoothing:antialiased;display:inline;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link--external:after,.jkl-link[target=_blank]:after{content:"\e89e"/"(Åpnes i ny fane)"}.jkl-link[download]:after{content:"\f090"/"(Last ned fil)"}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}button.jkl-link{-webkit-appearance:none;appearance:none;background:none;border:0;font:inherit;margin:0;padding:0;text-align:inherit}.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--button-min-width:9ch;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;background:var(--background-color);border:unset;color:var(--text-color);display:inline-block;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;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:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-standard)}}@layer jokul.components{.jkl-button:has(.jkl-button__text){min-width:var(--button-min-width)}.jkl-button:has(.jkl-button__text):has(.jkl-icon){min-width:auto}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);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:var(--jkl-unit-02);justify-content:center;pointer-events:none;transition-duration:var(--jkl-motion-timing-expressive);transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity,translate;transition-timing-function:var(--jkl-motion-easing-standard);translate:-50% 350%}.jkl-button__text{display:block;max-width:100%;min-width:0;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{--button-loading-offset:calc(-100% - var(--jkl-button-padding-block)*2 - var(--jkl-button-text-ink-offset));translate:0 var(--button-loading-offset)}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-contrast);--text-color:var(--jkl-color-text-on-contrast)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-u0zulbz;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-u0zulcb;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-u0zuld0}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-u0zulbz{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-u0zulcb{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-u0zuld0{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-u0zuldb 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-u0zuldb 2s ease-in-out infinite}}@keyframes jkl-blink-u0zuldb{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}@layer jokul.components{.jkl-file-input{--jkl-file-input-dropzone-padding:var(--jkl-unit-30);--jkl-file-input-dropzone-gap:var(--jkl-unit-30);--jkl-file-cta-gap:var(--jkl-unit-30);--jkl-file-cta-with-files-gap:var(--jkl-unit-15);--jkl-file-list-gap:var(--jkl-unit-10)}.jkl-file-input__dropzone{--border-color:var(--jkl-color-border-default);--background-color:#0000;align-items:center;background-color:var(--background-color);border:1px dashed var(--border-color);border-radius:.25rem;display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-input-dropzone-gap);justify-content:center;padding:var(--jkl-file-input-dropzone-padding);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file-input__dropzone--enter{--border-color:var(--jkl-color-border-strong);--background-color:var(--jkl-color-background-container);border-style:solid}.jkl-file-input__dropzone__drag-text{font:var(--jkl-text-style-paragraph-small)}@media (width >= 0) and (max-width:679px){.jkl-file-input__dropzone__drag-text{display:none}}.jkl-file-input__call-to-action{align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;transform:scale(1.05)}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button:active{transform:scale(1)}.jkl-file-input__dropzone-hint{margin-top:var(--jkl-unit-30)}.jkl-file-input--has-files .jkl-file-input__dropzone-hint{display:none}.jkl-file-input__max-size-text{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);margin-top:var(--jkl-unit-30)}.jkl-file-input__files{display:flex;flex-direction:column;gap:var(--jkl-file-list-gap);list-style:none;margin:0;padding:0}.jkl-file-input--small .jkl-file-input__dropzone-hint{display:block;margin:0}.jkl-file-input--small .jkl-file-input__dropzone{flex-direction:row;gap:var(--jkl-unit-20);justify-content:flex-start;margin-bottom:var(--jkl-unit-20);max-width:-webkit-fit-content;max-width:fit-content;padding:var(--jkl-unit-20)}.jkl-file-input--small .jkl-file-input__call-to-action{flex-direction:row;font:var(--jkl-text-style-text-small);gap:var(--jkl-unit-15);justify-content:flex-start}.jkl-file-input--small .jkl-file-input__max-size-text{margin-bottom:var(--jkl-unit-20);margin-top:calc(var(--jkl-unit-15)*-1)}}
+@charset "UTF-8";@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-max-height:var(--jkl-unit-210);--jkl-file-thumbnail-width:var(--jkl-unit-60);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:var(--jkl-border-radius-s);--bg:#0000;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__thumbnail{align-items:center;anchor-name:--thumb;anchor-scope:all;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:var(--jkl-border-radius-xs);display:flex;flex-shrink:0;height:auto;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);outline:1px solid color-mix(in srgb,currentColor 3%,#0000);overflow:hidden;position:relative;width:var(--jkl-file-thumbnail-width)}.jkl-file__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position:absolute;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in;z-index:1}@starting-style{.jkl-file__thumbnail:after{scale:0}}.jkl-file__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__thumbnail img[src]{min-height:100%;min-width:100%;object-fit:cover;object-position:center}.jkl-file__content{background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--text-color);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file__content:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button){--jkl-file-padding:0 var(--jkl-unit-10)}.jkl-file__info{flex-grow:999}.jkl-file__name{word-break:break-word}.jkl-file__size{word-break:keep-all}.jkl-file__button{aspect-ratio:1;flex-shrink:0}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/10}.jkl-file:not([data-state*=loading]) .jkl-file__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small);position:absolute;z-index:1}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-error-text-default)}.jkl-file[data-state=error] .jkl-file__content{border-color:var(--jkl-color-error-border-default)}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-accent);color:var(--link-color);outline:none;text-decoration:none;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link:after{--jkl-icon-fill:0;--jkl-icon-size:1em;-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;flex-shrink:0;font-family:var(--jkl-font-family-icons);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;padding-inline-start:.2em;vertical-align:middle;-webkit-font-smoothing:antialiased;display:inline;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-link--external:after,.jkl-link[target=_blank]:after{content:"\e89e"/"(Åpnes i ny fane)"}.jkl-link[download]:after{content:"\f090"/"(Last ned fil)"}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}button.jkl-link{-webkit-appearance:none;appearance:none;background:none;border:0;font:inherit;margin:0;padding:0;text-align:inherit}.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--button-min-width:9ch;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;background:var(--background-color);border:unset;color:var(--text-color);display:inline-block;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;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:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-standard)}}@layer jokul.components{.jkl-button:has(.jkl-button__text){min-width:var(--button-min-width)}.jkl-button:has(.jkl-button__text):has(.jkl-icon){min-width:auto}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);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:var(--jkl-unit-02);justify-content:center;pointer-events:none;transition-duration:var(--jkl-motion-timing-expressive);transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity,translate;transition-timing-function:var(--jkl-motion-easing-standard);translate:-50% 350%}.jkl-button__text{display:block;max-width:100%;min-width:0;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{--button-loading-offset:calc(-100% - var(--jkl-button-padding-block)*2 - var(--jkl-button-text-ink-offset));translate:0 var(--button-loading-offset)}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-contrast);--text-color:var(--jkl-color-text-on-contrast)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-udj3hdl;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-udj3heg;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-udj3her}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-udj3hdl{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-udj3heg{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-udj3her{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-udj3hes 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-udj3hes 2s ease-in-out infinite}}@keyframes jkl-blink-udj3hes{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}@layer jokul.components{.jkl-file-input{--jkl-file-input-dropzone-padding:var(--jkl-unit-30);--jkl-file-input-dropzone-gap:var(--jkl-unit-30);--jkl-file-cta-gap:var(--jkl-unit-30);--jkl-file-cta-with-files-gap:var(--jkl-unit-15);--jkl-file-list-gap:var(--jkl-unit-10)}.jkl-file-input__dropzone{--border-color:var(--jkl-color-border-default);--background-color:#0000;align-items:center;background-color:var(--background-color);border:1px dashed var(--border-color);border-radius:.25rem;display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-input-dropzone-gap);justify-content:center;padding:var(--jkl-file-input-dropzone-padding);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file-input__dropzone--enter{--border-color:var(--jkl-color-border-strong);--background-color:var(--jkl-color-background-container);border-style:solid}.jkl-file-input__dropzone__drag-text{font:var(--jkl-text-style-paragraph-small)}@media (width >= 0) and (max-width:679px){.jkl-file-input__dropzone__drag-text{display:none}}.jkl-file-input__call-to-action{align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;transform:scale(1.05)}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button:active{transform:scale(1)}.jkl-file-input__dropzone-hint{margin-top:var(--jkl-unit-30)}.jkl-file-input--has-files .jkl-file-input__dropzone-hint{display:none}.jkl-file-input__max-size-text{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);margin-top:var(--jkl-unit-30)}.jkl-file-input__files{display:flex;flex-direction:column;gap:var(--jkl-file-list-gap);list-style:none;margin:0;padding:0}.jkl-file-input--small .jkl-file-input__dropzone-hint{display:block;margin:0}.jkl-file-input--small .jkl-file-input__dropzone{flex-direction:row;gap:var(--jkl-unit-20);justify-content:flex-start;margin-bottom:var(--jkl-unit-20);max-width:-webkit-fit-content;max-width:fit-content;padding:var(--jkl-unit-20)}.jkl-file-input--small .jkl-file-input__call-to-action{flex-direction:row;font:var(--jkl-text-style-text-small);gap:var(--jkl-unit-15);justify-content:flex-start}.jkl-file-input--small .jkl-file-input__max-size-text{margin-bottom:var(--jkl-unit-20);margin-top:calc(var(--jkl-unit-15)*-1)}}

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

@@ -74,7 +74,7 @@
     display: inline-flex;
   }
   .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: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-umsz2tj forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uhm4a38 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -128,7 +128,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-umsz2tj {
+  @keyframes jkl-support-icon-entrance-uhm4a38 {
     0% {
       margin-right: 0;
       opacity: 0;

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-field-group{border-style:none}.jkl-field-group,.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}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font:var(--jkl-text-style-text-small);margin:var(--jkl-form-support-label-margin);transition-delay:var(--jkl-motion-timing-productive);transition-duration:var(--jkl-motion-timing-lazy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.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{fill:Canvas;stroke:CanvasText}}.jkl-form-support-label--error{background-color:var(--jkl-color-error-background-container);border-radius:var(--jkl-border-radius-xs);color:var(--jkl-color-error-text-default);padding-block:var(--jkl-unit-05);padding-inline:var(--jkl-unit-05) var(--jkl-unit-10)}.jkl-form-support-label--error .jkl-form-support-label__icon{color:var(--jkl-color-error-background-contrast)}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default);display:inline-flex}.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:var(--jkl-motion-timing-lazy) cubic-bezier(0,0,.3,1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-umsz2tj 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}.jkl-label{color:var(--jkl-color-text-default);display:block;margin:0 0 var(--jkl-spacing-8) 0}.jkl-label--medium,.jkl-label--small{font:var(--jkl-text-style-text-medium)}.jkl-label--large{font:var(--jkl-text-style-text-large)}.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}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-umsz2tj{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:var(--jkl-spacing-8)}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:var(--jkl-spacing-8);opacity:1;transform:scale(1)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{fill:ButtonFace;stroke:ButtonText}}}
+@layer jokul.components{.jkl-field-group{border-style:none}.jkl-field-group,.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}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font:var(--jkl-text-style-text-small);margin:var(--jkl-form-support-label-margin);transition-delay:var(--jkl-motion-timing-productive);transition-duration:var(--jkl-motion-timing-lazy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.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{fill:Canvas;stroke:CanvasText}}.jkl-form-support-label--error{background-color:var(--jkl-color-error-background-container);border-radius:var(--jkl-border-radius-xs);color:var(--jkl-color-error-text-default);padding-block:var(--jkl-unit-05);padding-inline:var(--jkl-unit-05) var(--jkl-unit-10)}.jkl-form-support-label--error .jkl-form-support-label__icon{color:var(--jkl-color-error-background-contrast)}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default);display:inline-flex}.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:var(--jkl-motion-timing-lazy) cubic-bezier(0,0,.3,1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uhm4a38 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}.jkl-label{color:var(--jkl-color-text-default);display:block;margin:0 0 var(--jkl-spacing-8) 0}.jkl-label--medium,.jkl-label--small{font:var(--jkl-text-style-text-medium)}.jkl-label--large{font:var(--jkl-text-style-text-large)}.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}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-uhm4a38{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:var(--jkl-spacing-8)}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:var(--jkl-spacing-8);opacity:1;transform:scale(1)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{fill:ButtonFace;stroke:ButtonText}}}

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

@@ -63,27 +63,18 @@
     font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-input-panel__description {
-    height: 0;
-    overflow: hidden;
     padding-inline: var(--padding-inline);
-    padding-block-end: var(--jkl-spacing-none);
+    padding-block-end: var(--jkl-unit-20);
     line-height: initial;
     font: var(--jkl-text-style-paragraph-medium);
-    transition-timing-function: var(--jkl-motion-easing-standard);
-    transition-duration: var(--jkl-motion-timing-productive);
-    transition-property: height;
   }
   .jkl-input-panel:has(:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
-  .jkl-input-panel:has(:checked), .jkl-input-panel[data-always-open=true], .jkl-input-panel:not([data-always-open]) {
+  .jkl-input-panel:has(:checked) {
     --background-color: var(--jkl-color-background-container);
   }
-  .jkl-input-panel:has(:checked) .jkl-input-panel__description, .jkl-input-panel[data-always-open=true] .jkl-input-panel__description, .jkl-input-panel:not([data-always-open]) .jkl-input-panel__description {
-    height: auto;
-    padding-block-end: var(--jkl-unit-20);
-  }
   .jkl-input-panel:has(input[aria-invalid=true]) {
     --outer-border-color: var(--jkl-color-error-border-default);
   }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:#0000;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header label:after{content:"";inset:0;position:absolute}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header input[type=checkbox],.jkl-input-panel__header input[type=radio]{inset-block-start:var(--jkl-unit-20);inset-inline-start:var(--padding-inline)}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-spacing-none);transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input[aria-invalid=true]){--outer-border-color:var(--jkl-color-error-border-default)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}}
+@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:#0000;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header label:after{content:"";inset:0;position:absolute}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header input[type=checkbox],.jkl-input-panel__header input[type=radio]{inset-block-start:var(--jkl-unit-20);inset-inline-start:var(--padding-inline)}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.jkl-input-panel__description{padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-unit-20);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(input[aria-invalid=true]){--outer-border-color:var(--jkl-color-error-border-default)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}}