@fremtind/jokul 0.9.0 → 0.10.1

package/build/es/components/select/index.js

@@ -1,2 +1,2 @@
-import{N as e,S as t}from"../../../NativeSelect-DOSP8-ZQ.js";export{e as NativeSelect,t as Select};
+import{N as e,S as t}from"../../../NativeSelect-EidDABsT.js";export{e as NativeSelect,t as Select};
 //# sourceMappingURL=index.js.map

package/build/es/components/text-input/BaseTextArea.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as a,useState as r,useRef as s,useEffect as n}from"react";const o=a(((a,o)=>{const{autoExpand:l,counter:i,onBlur:c,onFocus:u,rows:d=7,placeholder:h=" ",startOpen:x,style:f,value:g,"aria-invalid":v,onChange:p,...m}=a,[y,_]=r((()=>typeof g>"u"?0:"number"==typeof g?String(g).length:g.length)),[j,k]=r(!1),w=s(null),N=o||w;n((()=>{const e=N.current;if(e){if(!l)return void(e.style.height="");j||g?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}}),[l,N,g,j]);const B=(null==i?void 0:i.maxLength)||0,$=B-y;const A=!(!v&&!(i&&y>B?`Du har skrevet ${y-B} tegn for mye`:void 0));return e("div",{className:"jkl-text-input-wrapper","data-invalid":A,"data-has-content":y>0,children:[t("textarea",{"aria-invalid":A,className:`jkl-text-area__text-area jkl-text-area__text-area--${d}-rows`,onBlur:function(e){k(!1),c&&c(e)},onFocus:function(e){k(!0),u&&u(e)},onChange:function(e){_(e.target.value.length),p&&p(e)},ref:N,style:{...f,...{overflowX:l?"hidden":void 0}},placeholder:h,value:g,...m}),i&&e("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e("div",{className:"jkl-text-area__counter-count",children:[y," / ",B]}),!i.hideProgress&&t("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(C=$,E=B,C<=0||0===E?0:100*C/E)+"%"}})]})]});var C,E}));o.displayName="BaseTextArea";export{o as BaseTextArea};
+//# sourceMappingURL=BaseTextArea.js.map

package/build/es/components/text-input/BaseTextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTextArea.js","sources":["../../../../src/components/text-input/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    type TextareaHTMLAttributes,\n    useRef,\n    useState,\n    useEffect,\n    ChangeEvent,\n} from \"react\";\n\ntype Counter = {\n    /** Antall tegn før telleren når maksimum og vi viser en feilmelding */\n    maxLength: number;\n    /**\n     * Med teller vises en progress-bar i bunnen av tekstfeltet som krymper\n     * ned fra 100% (null tegn skrevet) til 0% (maks antall tegn skrevet).\n     * Om du vil skjule den, sett denne propen til true.\n     *\n     * @default false\n     */\n    hideProgress?: boolean;\n};\n\nexport interface BaseTextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"children\"> {\n    /**\n     * Viser en teller i tekstfeltet når det har fokus.\n     */\n    counter?: Counter;\n    /** Sett antall rader skjemafeltet ekspanderes til ved focus. Innholdet scroller om feltet fylles med mer innhold enn det er plass til. */\n    rows?: number;\n    inline?: boolean;\n    startOpen?: boolean;\n    /** Gjør så skjemafeltet ekspanderer seg til å vise alt innhold i stedet for å scrolle */\n    autoExpand?: boolean;\n}\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>((props, ref) => {\n    const {\n        autoExpand,\n        counter,\n        onBlur,\n        onFocus,\n        rows = 7,\n        placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n        startOpen,\n        style,\n        value,\n        \"aria-invalid\": ariaInvalid,\n        onChange,\n        ...rest\n    } = props;\n\n    const [counterCurrent, setCounterCurrent] = useState(() => {\n        if (typeof value === \"undefined\") {\n            return 0;\n        } else if (typeof value === \"number\") {\n            return String(value).length;\n        } else {\n            return value.length;\n        }\n    });\n    const [textAreaFocused, setTextAreaFocused] = useState(false);\n    const internalRef = useRef<HTMLTextAreaElement>(null);\n    const textAreaRef = (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n    useEffect(() => {\n        const textAreaElement = textAreaRef.current;\n        if (textAreaElement) {\n            if (!autoExpand) {\n                textAreaElement.style.height = \"\";\n                return;\n            }\n\n            if (textAreaFocused || value) {\n                textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n            } else {\n                textAreaElement.style.height = \"\";\n            }\n        }\n    }, [autoExpand, textAreaRef, value, textAreaFocused]);\n\n    function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n        setTextAreaFocused(true);\n        if (onFocus) {\n            onFocus(e);\n        }\n    }\n\n    function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n        setTextAreaFocused(false);\n        if (onBlur) {\n            onBlur(e);\n        }\n    }\n\n    function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n        setCounterCurrent(e.target.value.length);\n        if (onChange) {\n            onChange(e);\n        }\n    }\n\n    const counterTotal: number = counter?.maxLength || 0;\n    const progressCurrent: number = counterTotal - counterCurrent;\n    function calculatePercentage(current: number, total: number): number {\n        if (current <= 0) {\n            return 0;\n        }\n        return total === 0 ? 0 : (current * 100) / total;\n    }\n    const counterLabel =\n        counter && counterCurrent > counterTotal\n            ? `Du har skrevet ${counterCurrent - counterTotal} tegn for mye`\n            : undefined;\n\n    const invalid = Boolean(ariaInvalid || counterLabel);\n\n    const overflowStyle = {\n        overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n    } as React.CSSProperties;\n\n    return (\n        <div className=\"jkl-text-input-wrapper\" data-invalid={invalid} data-has-content={counterCurrent > 0}>\n            <textarea\n                aria-invalid={invalid}\n                className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                onBlur={handleOnBlur}\n                onFocus={handleOnFocus}\n                onChange={handleOnChange}\n                ref={textAreaRef}\n                style={{ ...style, ...overflowStyle }}\n                placeholder={placeholder}\n                value={value}\n                {...rest}\n            />\n            {counter && (\n                <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                    <div className=\"jkl-text-area__counter-count\">\n                        {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                    </div>\n                    {!counter.hideProgress && (\n                        <div\n                            className=\"jkl-text-area__counter-progress\"\n                            style={{\n                                [\"--progress-width\" as string]: `${calculatePercentage(\n                                    progressCurrent,\n                                    counterTotal,\n                                )}%`,\n                            }}\n                        />\n                    )}\n                </div>\n            )}\n        </div>\n    );\n});\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","calculatePercentage","displayName"],"mappings":"8HAqCO,MAAMA,EAAeC,GAAmD,CAACC,EAAOC,KAC7E,MACFC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,GAAS,WACtCN,EAAU,IACV,EACiB,iBAAVA,EACPO,OAAOP,GAAOQ,OAEdR,EAAMQ,UAGdC,EAAiBC,GAAsBJ,GAAS,GACjDK,EAAcC,EAA4B,MAC1CC,EAAetB,GAA0CoB,EAE/DG,GAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,IACD,CAACzB,EAAYqB,EAAab,EAAOS,IAuB9B,MAAAU,GAAuB,MAAA1B,OAAA,EAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IASN,OAAAI,EAAC,OAAIC,UAAU,yBAAyB,eAAcF,EAAS,mBAAkBlB,EAAiB,EAC9FqB,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcJ,EACdE,UAAW,sDAAsD5B,SACjEF,OAtCZ,SAAsBiC,GAClBjB,GAAmB,GACfhB,GACAA,EAAOiC,EAEf,EAkCYhC,QA9CZ,SAAuBgC,GACnBjB,GAAmB,GACff,GACAA,EAAQgC,EAEhB,EA0CYzB,SAjCZ,SAAwByB,GACFtB,EAAAsB,EAAEC,OAAO5B,MAAMQ,QAC7BN,GACAA,EAASyB,EAEjB,EA6BYpC,IAAKsB,EACLd,MAAO,IAAKA,KAbF,CAClB8B,UAAWrC,EAAa,cAAW,IAa3BK,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACI8B,EAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAArB,EAAe,MAAce,MAEhC1B,EAAQqC,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACVzB,MAAO,CACF,oBAxCAiB,EAyCGK,EAzCcU,EA0CdZ,EAzCxBH,GAAW,GAGE,IAAVe,EAFI,EAEyB,IAAVf,EAAiBe,GAoCa,aAxCnDC,IAAoBhB,EAAiBe,CAiD1C,IAGR3C,EAAa6C,YAAc"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, {\n    type CSSProperties,\n    forwardRef,\n    type MouseEventHandler,\n    type ReactNode,\n    InputHTMLAttributes,\n    HTMLProps,\n} from \"react\";\nimport { Density } from \"../../core\";\nimport { IconProps } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\n\nfunction getWidthAsStyle(width?: string, maxLength?: number): CSSProperties | undefined {\n    if (width) {\n        return { width }; // prioritize width prop\n    }\n\n    if (maxLength) {\n        // adapt to maxLength, but capped at 40ch\n        const length = `${Math.min(maxLength, 40)}ch`;\n        const padding = \"24px\"; // left + right padding\n        return { width: `calc(${length} + ${padding})` };\n    }\n\n    return undefined;\n}\n\ninterface ActionBaseProps extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n    icon: React.ReactElement<IconProps>;\n    label: string;\n    buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n    type?: \"button\" | \"reset\";\n    onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n    type: \"submit\";\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton | ActionSubmit;\n\nexport interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n    /**\n     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"right\";\n    action?: Action;\n    density?: Density;\n    /**\n     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n     * @example \"kr\"\n     * */\n    unit?: ReactNode;\n    width?: string;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>((props, ref) => {\n    const {\n        action,\n        align = \"left\",\n        \"aria-invalid\": ariaInvalid,\n        className = \"\",\n        density,\n        maxLength,\n        style,\n        type = \"text\",\n        unit,\n        width,\n        ...rest\n    } = props;\n\n    return (\n        <div\n            className=\"jkl-text-input-wrapper\"\n            data-invalid={ariaInvalid}\n            style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n        >\n            <input\n                aria-invalid={ariaInvalid}\n                ref={ref}\n                className={cn(\"jkl-text-input__input\", className, {\n                    \"jkl-text-input__input--align-right\": align === \"right\",\n                })}\n                maxLength={maxLength}\n                type={type}\n                {...rest}\n            />\n            {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n            {action && (\n                <IconButton\n                    density={density}\n                    className={cn(\"jkl-text-input-action-button\", action.className)}\n                    title={action.label}\n                    onClick={action.onClick}\n                    onFocus={action.onFocus}\n                    onBlur={action.onBlur}\n                    ref={action.buttonRef}\n                    type={action.type || \"button\"}\n                >\n                    {action.icon}\n                </IconButton>\n            )}\n        </div>\n    );\n});\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","rest","jsxs","children","jsx","cn","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"yKAaA,SAASA,EAAgBC,EAAgBC,GACjCD,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CAoCO,MAAMG,EAAgBC,GAAiD,CAACC,EAAOC,KAC5E,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,KACGgB,GACHV,EAGA,OAAAW,EAAC,MAAA,CACGN,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CiB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcT,EACdH,IAAAA,EACAI,UAAWS,EAAG,wBAAyBT,EAAW,CAC9C,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIE,IAEPD,GAAQI,EAAC,OAAK,CAAAR,UAAU,uBAAwBO,SAAKH,IACrDP,GACGW,EAACE,EAAA,CACGT,QAAAA,EACAD,UAAWS,EAAG,+BAAgCZ,EAAOG,WACrDW,MAAOd,EAAOe,MACdC,QAAShB,EAAOgB,QAChBC,QAASjB,EAAOiB,QAChBC,OAAQlB,EAAOkB,OACfnB,IAAKC,EAAOmB,UACZb,KAAMN,EAAOM,MAAQ,SAEpBI,SAAOV,EAAAoB,SACZ,IAMhBxB,EAAcyB,YAAc"}

package/build/es/components/text-input/TextArea.js

@@ -0,0 +1,2 @@
+import{jsx as o}from"react/jsx-runtime";import n from"classnames";import{forwardRef as i}from"react";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import"../tooltip/Tooltip.js";import"../tooltip/TooltipContent.js";import"../tooltip/TooltipTrigger.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{InputGroup as r}from"../input-group/InputGroup.js";import{BaseTextArea as s}from"./BaseTextArea.js";const c=i(((i,c)=>{const{autoExpand:t,className:e,counter:p,density:a,errorLabel:m,helpLabel:j,inline:l,label:I,labelProps:u,startOpen:d,supportLabelProps:h,tooltipProps:x,...A}=i,b={label:I,density:a,errorLabel:m,helpLabel:j,labelProps:u,inline:l,supportLabelProps:h,tooltipProps:x},C={autoExpand:t,counter:p,startOpen:d};return o(r,{className:n("jkl-text-area",e,{"jkl-text-area--start-open":d,"jkl-text-area--auto-expand":t}),"data-testid":"jkl-text-area",...b,children:o(s,{ref:c,...A,...C})})}));c.displayName="TextArea";export{c as TextArea};
+//# sourceMappingURL=TextArea.js.map

package/build/es/components/text-input/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../../src/components/text-input/TextArea.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group\";\nimport { BaseTextArea, BaseTextAreaProps } from \"./BaseTextArea\";\n\nexport interface TextAreaProps extends Omit<InputGroupProps, \"children\">, BaseTextAreaProps {}\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {\n    const {\n        autoExpand,\n        className,\n        counter,\n        density,\n        errorLabel,\n        helpLabel,\n        inline,\n        label,\n        labelProps,\n        startOpen,\n        supportLabelProps,\n        tooltipProps,\n        ...rest\n    } = props;\n    const inputGroupProps = {\n        label,\n        density,\n        errorLabel,\n        helpLabel,\n        labelProps,\n        inline,\n        supportLabelProps,\n        tooltipProps,\n    };\n    const textAreaProps = { autoExpand, counter, startOpen };\n    return (\n        <InputGroup\n            className={cn(\"jkl-text-area\", className, {\n                \"jkl-text-area--start-open\": startOpen,\n                \"jkl-text-area--auto-expand\": autoExpand,\n            })}\n            data-testid=\"jkl-text-area\"\n            {...inputGroupProps}\n        >\n            <BaseTextArea ref={ref} {...rest} {...textAreaProps} />\n        </InputGroup>\n    );\n});\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltipProps","rest","inputGroupProps","textAreaProps","jsx","InputGroup","cn","children","BaseTextArea","displayName"],"mappings":"ysDAOO,MAAMA,EAAWC,GAA+C,CAACC,EAAOC,KACrE,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,aAAAA,KACGC,GACHd,EACEe,EAAkB,CACpBN,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,aAAAA,GAEEG,EAAgB,CAAEd,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,OAAAM,EAACC,EAAA,CACGf,UAAWgB,EAAG,gBAAiBhB,EAAW,CACtC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRa,EAEJK,WAACC,EAAa,CAAApB,IAAAA,KAAca,KAAUE,KAAe,IAIjElB,EAASwB,YAAc"}

package/build/es/components/text-input/TextInput.js

@@ -0,0 +1,2 @@
+import{jsx as o}from"react/jsx-runtime";import i from"classnames";import{forwardRef as n}from"react";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import"../tooltip/Tooltip.js";import"../tooltip/TooltipContent.js";import"../tooltip/TooltipTrigger.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{InputGroup as s}from"../input-group/InputGroup.js";import{BaseTextInput as c}from"./BaseTextInput.js";const r=n(((n,r)=>{const{label:t,className:p,density:e,errorLabel:m,helpLabel:a,inline:j,inputClassName:l,labelProps:I,supportLabelProps:u,tooltipProps:d,...h}=n;return o(s,{label:t,density:e,errorLabel:m,helpLabel:a,labelProps:I,inline:j,supportLabelProps:u,tooltipProps:d,className:i(p,"jkl-text-input",{"jkl-text-input--inline":j}),"data-testid":"jkl-text-input",density:j?"compact":e,children:o(c,{ref:r,...h,className:l})})}));r.displayName="TextInput";export{r as TextInput};
+//# sourceMappingURL=TextInput.js.map

package/build/es/components/text-input/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["../../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group\";\nimport { BaseTextInput, BaseTextInputProps } from \"./BaseTextInput\";\n\nexport interface TextInputProps extends Omit<InputGroupProps, \"children\">, BaseTextInputProps {\n    \"data-testautoid\"?: string;\n    inline?: boolean;\n    inputClassName?: string;\n}\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {\n    const {\n        label,\n        className,\n        density,\n        errorLabel,\n        helpLabel,\n        inline,\n        inputClassName,\n        labelProps,\n        supportLabelProps,\n        tooltipProps,\n        ...rest\n    } = props;\n    const inputGroupProps = {\n        label,\n        density,\n        errorLabel,\n        helpLabel,\n        labelProps,\n        inline,\n        supportLabelProps,\n        tooltipProps,\n    };\n    return (\n        <InputGroup\n            {...inputGroupProps}\n            className={cn(className, \"jkl-text-input\", {\n                \"jkl-text-input--inline\": inline,\n            })}\n            data-testid=\"jkl-text-input\"\n            density={inline ? \"compact\" : density}\n        >\n            <BaseTextInput ref={ref} {...rest} className={inputClassName} />\n        </InputGroup>\n    );\n});\n\nTextInput.displayName = \"TextInput\";\n"],"names":["TextInput","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","inputClassName","labelProps","supportLabelProps","tooltipProps","rest","jsx","InputGroup","cn","children","BaseTextInput","displayName"],"mappings":"2sDAWO,MAAMA,EAAYC,GAA6C,CAACC,EAAOC,KACpE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,aAAAA,KACGC,GACHZ,EAYA,OAAAa,EAACC,EAAA,CAVDZ,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAG,kBAAAA,EACAC,aAAAA,EAKIR,UAAWY,EAAGZ,EAAW,iBAAkB,CACvC,yBAA0BI,IAE9B,cAAY,iBACZH,QAASG,EAAS,UAAYH,EAE9BY,WAACC,EAAc,CAAAhB,IAAAA,KAAcW,EAAMT,UAAWK,KAAgB,IAK1EV,EAAUoB,YAAc"}

package/build/es/components/text-input/index.js

@@ -0,0 +1,2 @@
+import{BaseTextArea as e}from"./BaseTextArea.js";import{BaseTextInput as t}from"./BaseTextInput.js";import{TextArea as a}from"./TextArea.js";import{TextInput as s}from"./TextInput.js";export{e as BaseTextArea,t as BaseTextInput,a as TextArea,s as TextInput};
+//# sourceMappingURL=index.js.map

package/build/es/components/text-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/es/index.js

@@ -1,2 +1,2 @@
-import{AccordionItem as o}from"./components/accordion/AccordionItem.js";import{Accordion as s}from"./components/accordion/Accordion.js";import{Breadcrumb as e}from"./components/breadcrumb/Breadcrumb.js";import{BreadcrumbItem as t}from"./components/breadcrumb/BreadcrumbItem.js";import{Button as n,PrimaryButton as r,SecondaryButton as a,TertiaryButton as i}from"./components/button/Button.js";import{Card as m}from"./components/card/Card.js";import{CardImage as c}from"./components/card/CardImage.js";import{InfoBlock as p,NavCard as u}from"./components/card/NavCard.js";import{TaskCard as l}from"./components/card/TaskCard.js";import{InfoCard as f}from"./components/card/InfoCard.js";import{Checkbox as d}from"./components/checkbox/Checkbox.js";import{Combobox as I,getComboboxValuePair as j}from"./components/combobox/Combobox.js";import{CookieConsent as k}from"./components/cookie-consent/CookieConsent.js";import{CookieConsentProvider as g,useCookieConsent as h}from"./components/cookie-consent/CookieConsentContext.js";import{Icon as C}from"./components/icon/Icon.js";import{ArrowVerticalAnimated as S}from"./components/icon/icons/animated/ArrowVerticalAnimated.js";import{ArrowHorizontalAnimated as b}from"./components/icon/icons/animated/ArrowHorizontalAnimated.js";import{PlusRemoveAnimated as A}from"./components/icon/icons/animated/PlusRemoveAnimated.js";import{ArrowDownIcon as L}from"./components/icon/icons/ArrowDownIcon.js";import{ArrowLeftIcon as T}from"./components/icon/icons/ArrowLeftIcon.js";import{ArrowNorthEastIcon as R}from"./components/icon/icons/ArrowNorthEastIcon.js";import{ArrowRightIcon as M}from"./components/icon/icons/ArrowRightIcon.js";import{ArrowUpIcon as v}from"./components/icon/icons/ArrowUpIcon.js";import{CalendarIcon as B}from"./components/icon/icons/CalendarIcon.js";import{CheckIcon as E}from"./components/icon/icons/CheckIcon.js";import{ChevronDownIcon as w}from"./components/icon/icons/ChevronDownIcon.js";import{ChevronLeftIcon as N}from"./components/icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as O}from"./components/icon/icons/ChevronRightIcon.js";import{ChevronUpIcon as P}from"./components/icon/icons/ChevronUpIcon.js";import{CloseIcon as G}from"./components/icon/icons/CloseIcon.js";import{CopyIcon as D}from"./components/icon/icons/CopyIcon.js";import{DotsIcon as y}from"./components/icon/icons/DotsIcon.js";import{DragIcon as H}from"./components/icon/icons/DragIcon.js";import{ErrorIcon as U}from"./components/icon/icons/ErrorIcon.js";import{GreenCheckIcon as x}from"./components/icon/icons/GreenCheckIcon.js";import{HamburgerIcon as K}from"./components/icon/icons/HamburgerIcon.js";import{InfoIcon as V}from"./components/icon/icons/InfoIcon.js";import{LinkIcon as F}from"./components/icon/icons/LinkIcon.js";import{PlusIcon as W}from"./components/icon/icons/PlusIcon.js";import{QuestionIcon as X}from"./components/icon/icons/QuestionIcon.js";import{RedCrossIcon as _}from"./components/icon/icons/RedCrossIcon.js";import{SearchIcon as z}from"./components/icon/icons/SearchIcon.js";import{SuccessIcon as Q}from"./components/icon/icons/SuccessIcon.js";import{WarningIcon as J}from"./components/icon/icons/WarningIcon.js";import{MinusIcon as q}from"./components/icon/icons/MinusIcon.js";import{ThumbDownIcon as Y}from"./components/icon/icons/ThumbDownIcon.js";import{ThumbUpIcon as Z}from"./components/icon/icons/ThumbUpIcon.js";import{TrashCanIcon as $}from"./components/icon/icons/TrashCanIcon.js";import{PenIcon as oo}from"./components/icon/icons/PenIcon.js";import{IconButton as so}from"./components/icon-button/IconButton.js";import{FieldGroup as eo}from"./components/input-group/FieldGroup.js";import{InputGroup as to}from"./components/input-group/InputGroup.js";import{Label as no}from"./components/input-group/Label.js";import{SupportLabel as ro}from"./components/input-group/SupportLabel.js";import{Link as ao}from"./components/link/Link.js";import{NavLink as io}from"./components/link/NavLink.js";import{LinkList as mo}from"./components/link-list/LinkList.js";import{List as co,OrderedList as po,UnorderedList as uo}from"./components/list/List.js";import{CheckListItem as lo,CrossListItem as fo,ListItem as Io}from"./components/list/ListItem.js";import{Loader as jo}from"./components/loader/Loader.js";import{SkeletonAnimation as ko}from"./components/loader/skeletons/SkeletonAnimation.js";import{SkeletonButton as go}from"./components/loader/skeletons/SkeletonButton.js";import{SkeletonCheckboxGroup as ho}from"./components/loader/skeletons/SkeletonCheckboxGroup.js";import{SkeletonElement as Co}from"./components/loader/skeletons/SkeletonElement.js";import{SkeletonInput as So}from"./components/loader/skeletons/SkeletonInput.js";import{SkeletonRadioButtonGroup as bo}from"./components/loader/skeletons/SkeletonRadioButtonGroup.js";import{SkeletonTable as Ao,SkeletonTableHeader as Lo,SkeletonTableRow as To}from"./components/loader/skeletons/SkeletonTable.js";import{SkeletonTextArea as Ro}from"./components/loader/skeletons/SkeletonTextArea.js";import{Modal as Mo,ModalActions as vo,ModalBody as Bo,ModalCloseButton as Eo,ModalContainer as wo,ModalHeader as No,ModalOverlay as Oo,ModalTitle as Po}from"./components/modal/Modal.js";import{useModal as Go}from"./components/modal/useModal.js";import{RadioButton as Do}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as yo}from"./components/radio-button/RadioButtonGroup.js";import{BaseRadioButton as Ho}from"./components/radio-button/BaseRadioButton.js";import{N as Uo,S as xo}from"../NativeSelect-DOSP8-ZQ.js";import{ErrorTag as Ko,InfoTag as Vo,SuccessTag as Fo,Tag as Wo,WarningTag as Xo}from"./components/tag/Tag.js";import{Tooltip as _o}from"./components/tooltip/Tooltip.js";import{TooltipContent as zo}from"./components/tooltip/TooltipContent.js";import{TooltipTrigger as Qo}from"./components/tooltip/TooltipTrigger.js";import{PopupTip as Jo}from"./components/tooltip/PopupTip.js";import{ScreenReaderOnly as qo}from"./components/ScreenReaderOnly.js";import{default as Yo}from"./core/tokens.js";import{useAnimatedDetails as Zo}from"./hooks/useAnimatedDetails/useAnimatedDetails.js";import{useAnimatedHeight as $o}from"./hooks/useAnimatedHeight/useAnimatedHeight.js";import{useAnimatedHeightBetween as os}from"./hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{useAutoAnimatedHeight as ss}from"./hooks/useAnimatedHeight/useAutoAnimateHeight.js";import{useBrowserPreferences as es}from"./hooks/useBrowserPreferences/useBrowserPreferences.js";import{useIntersectionObserver as ts}from"./hooks/useIntersectionObserver/useIntersectionObserver.js";import{useLocalStorage as ns}from"./hooks/useLocalStorage/useLocalStorage.js";import{useMutationObserver as rs}from"./hooks/useMutationObserver/useMutationObserver.js";import{usePreviousValue as as}from"./hooks/usePreviousValue/usePreviousValue.js";import{useProgressiveImg as is}from"./hooks/useProgressiveImg/useProgressiveImg.js";import{useScreen as ms}from"./hooks/useScreen/useScreen.js";import{useScrollIntoView as cs}from"./hooks/useScrollIntoView/useScrollIntoView.js";import{useAriaLiveRegion as ps}from"./hooks/useAriaLiveRegion/useAriaLiveRegion.js";import{useClickOutside as us}from"./hooks/useClickOutside/useClickOutside.js";import{useFocusOutside as ls}from"./hooks/useFocusOutside/useFocusOutside.js";import{useElementDimensions as fs}from"./hooks/useElementDimensions/useElementDimensions.js";import{useId as ds}from"./hooks/useId/useId.js";import{useKeyListener as Is}from"./hooks/useKeyListener/useKeyListener.js";import{useListNavigation as js}from"./hooks/useListNavigation/useListNavigation.js";import{useSwipeGesture as ks}from"./hooks/useSwipeGesture/useSwipeGesture.js";import{u as gs}from"../index-DfvUcA5T.js";import{formatNumber as hs}from"./utilities/formatters/util/formatNumber.js";import{parseNumber as Cs}from"./utilities/formatters/util/parseNumber.js";import{registerWithFodselsnummerMask as Ss,registerWithKontonummerMask as bs,registerWithKortnummerMask as As,registerWithMasks as Ls,registerWithTelefonnummerMask as Ts}from"./utilities/formatters/util/registerWithMask.js";import{formatAvstand as Rs}from"./utilities/formatters/avstand/formatAvstand.js";import{formatBytes as Ms}from"./utilities/formatters/bytes/formatBytes.js";import{formatDate as vs}from"./utilities/formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as Bs,formatFodselsnummer as Es}from"./utilities/formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as ws,formatOrganisasjonsnummer as Ns}from"./utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as Os,formatKontonummer as Ps}from"./utilities/formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as Gs,formatKortnummer as Ds}from"./utilities/formatters/kortnummer/formatKortnummer.js";import{TELEFONNUMMER_REGEX as ys,formatTelefonnummer as Hs}from"./utilities/formatters/telefonnummer/formatTelefonnummer.js";import{formatValuta as Us}from"./utilities/formatters/valuta/formatValuta.js";import{mergeProps as xs}from"./utilities/polymorphism/mergeProps.js";import{mergeRefs as Ks}from"./utilities/polymorphism/mergeRefs.js";import{SlotComponent as Vs}from"./utilities/polymorphism/SlotComponent.js";import{initTabListener as Fs}from"./utilities/tabListener.js";import{getValuePair as Ws}from"./utilities/valuePair.js";export{s as Accordion,o as AccordionItem,L as ArrowDownIcon,b as ArrowHorizontalAnimated,T as ArrowLeftIcon,R as ArrowNorthEastIcon,M as ArrowRightIcon,v as ArrowUpIcon,S as ArrowVerticalAnimated,Ho as BaseRadioButton,e as Breadcrumb,t as BreadcrumbItem,n as Button,B as CalendarIcon,m as Card,c as CardImage,E as CheckIcon,lo as CheckListItem,d as Checkbox,w as ChevronDownIcon,N as ChevronLeftIcon,O as ChevronRightIcon,P as ChevronUpIcon,G as CloseIcon,I as Combobox,k as CookieConsent,g as CookieConsentProvider,D as CopyIcon,fo as CrossListItem,y as DotsIcon,H as DragIcon,U as ErrorIcon,Ko as ErrorTag,Bs as FODSELSNUMMER_REGEX,eo as FieldGroup,x as GreenCheckIcon,K as HamburgerIcon,C as Icon,so as IconButton,p as InfoBlock,f as InfoCard,V as InfoIcon,Vo as InfoTag,to as InputGroup,Os as KONTONUMMER_REGEX,Gs as KORTNUMMER_REGEX,no as Label,ao as Link,F as LinkIcon,mo as LinkList,co as List,Io as ListItem,jo as Loader,q as MinusIcon,Mo as Modal,vo as ModalActions,Bo as ModalBody,Eo as ModalCloseButton,wo as ModalContainer,No as ModalHeader,Oo as ModalOverlay,Po as ModalTitle,Uo as NativeSelect,u as NavCard,io as NavLink,ws as ORGANISASJONSNUMMER_REGEX,po as OrderedList,oo as PenIcon,W as PlusIcon,A as PlusRemoveAnimated,Jo as PopupTip,r as PrimaryButton,X as QuestionIcon,Do as RadioButton,yo as RadioButtonGroup,_ as RedCrossIcon,qo as ScreenReaderOnly,z as SearchIcon,a as SecondaryButton,xo as Select,ko as SkeletonAnimation,go as SkeletonButton,ho as SkeletonCheckboxGroup,Co as SkeletonElement,So as SkeletonInput,bo as SkeletonRadioButtonGroup,Ao as SkeletonTable,Lo as SkeletonTableHeader,To as SkeletonTableRow,Ro as SkeletonTextArea,Vs as SlotComponent,Q as SuccessIcon,Fo as SuccessTag,ro as SupportLabel,ys as TELEFONNUMMER_REGEX,Wo as Tag,l as TaskCard,i as TertiaryButton,Y as ThumbDownIcon,Z as ThumbUpIcon,_o as Tooltip,zo as TooltipContent,Qo as TooltipTrigger,$ as TrashCanIcon,uo as UnorderedList,J as WarningIcon,Xo as WarningTag,Rs as formatAvstand,Ms as formatBytes,vs as formatDate,Es as formatFodselsnummer,Ps as formatKontonummer,Ds as formatKortnummer,hs as formatNumber,Ns as formatOrganisasjonsnummer,Hs as formatTelefonnummer,Us as formatValuta,j as getComboboxValuePair,Ws as getValuePair,Fs as initTabListener,xs as mergeProps,Ks as mergeRefs,Cs as parseNumber,Ss as registerWithFodselsnummerMask,bs as registerWithKontonummerMask,As as registerWithKortnummerMask,Ls as registerWithMasks,Ts as registerWithTelefonnummerMask,Yo as tokens,gs as unicode,Zo as useAnimatedDetails,$o as useAnimatedHeight,os as useAnimatedHeightBetween,ps as useAriaLiveRegion,ss as useAutoAnimatedHeight,es as useBrowserPreferences,us as useClickOutside,h as useCookieConsent,fs as useElementDimensions,ls as useFocusOutside,ds as useId,ts as useIntersectionObserver,Is as useKeyListener,js as useListNavigation,ns as useLocalStorage,Go as useModal,rs as useMutationObserver,as as usePreviousValue,is as useProgressiveImg,ms as useScreen,cs as useScrollIntoView,ks as useSwipeGesture};
+import{AccordionItem as o}from"./components/accordion/AccordionItem.js";import{Accordion as s}from"./components/accordion/Accordion.js";import{Breadcrumb as e}from"./components/breadcrumb/Breadcrumb.js";import{BreadcrumbItem as t}from"./components/breadcrumb/BreadcrumbItem.js";import{Button as r,PrimaryButton as n,SecondaryButton as a,TertiaryButton as i}from"./components/button/Button.js";import{Card as m}from"./components/card/Card.js";import{CardImage as c}from"./components/card/CardImage.js";import{InfoBlock as p,NavCard as u}from"./components/card/NavCard.js";import{TaskCard as l}from"./components/card/TaskCard.js";import{InfoCard as f}from"./components/card/InfoCard.js";import{Checkbox as d}from"./components/checkbox/Checkbox.js";import{Combobox as I,getComboboxValuePair as j}from"./components/combobox/Combobox.js";import{CookieConsent as k}from"./components/cookie-consent/CookieConsent.js";import{CookieConsentProvider as g,useCookieConsent as h}from"./components/cookie-consent/CookieConsentContext.js";import{isCorrectFormat as C,isWithinLowerBound as A,isWithinUpperBound as S}from"./components/datepicker/validation.js";import{dayMonthYearRegex as T,formatInput as b,isBlurTargetOutside as L,parseDateString as B}from"./components/datepicker/utils.js";import{DatePicker as R}from"./components/datepicker/DatePicker.js";import{Icon as M}from"./components/icon/Icon.js";import{ArrowVerticalAnimated as v}from"./components/icon/icons/animated/ArrowVerticalAnimated.js";import{ArrowHorizontalAnimated as E}from"./components/icon/icons/animated/ArrowHorizontalAnimated.js";import{PlusRemoveAnimated as w}from"./components/icon/icons/animated/PlusRemoveAnimated.js";import{ArrowDownIcon as O}from"./components/icon/icons/ArrowDownIcon.js";import{ArrowLeftIcon as N}from"./components/icon/icons/ArrowLeftIcon.js";import{ArrowNorthEastIcon as P}from"./components/icon/icons/ArrowNorthEastIcon.js";import{ArrowRightIcon as x}from"./components/icon/icons/ArrowRightIcon.js";import{ArrowUpIcon as G}from"./components/icon/icons/ArrowUpIcon.js";import{CalendarIcon as D}from"./components/icon/icons/CalendarIcon.js";import{CheckIcon as y}from"./components/icon/icons/CheckIcon.js";import{ChevronDownIcon as U}from"./components/icon/icons/ChevronDownIcon.js";import{ChevronLeftIcon as H}from"./components/icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as W}from"./components/icon/icons/ChevronRightIcon.js";import{ChevronUpIcon as F}from"./components/icon/icons/ChevronUpIcon.js";import{CloseIcon as K}from"./components/icon/icons/CloseIcon.js";import{CopyIcon as V}from"./components/icon/icons/CopyIcon.js";import{DotsIcon as X}from"./components/icon/icons/DotsIcon.js";import{DragIcon as _}from"./components/icon/icons/DragIcon.js";import{ErrorIcon as z}from"./components/icon/icons/ErrorIcon.js";import{GreenCheckIcon as Q}from"./components/icon/icons/GreenCheckIcon.js";import{HamburgerIcon as J}from"./components/icon/icons/HamburgerIcon.js";import{InfoIcon as Y}from"./components/icon/icons/InfoIcon.js";import{LinkIcon as q}from"./components/icon/icons/LinkIcon.js";import{PlusIcon as Z}from"./components/icon/icons/PlusIcon.js";import{QuestionIcon as $}from"./components/icon/icons/QuestionIcon.js";import{RedCrossIcon as oo}from"./components/icon/icons/RedCrossIcon.js";import{SearchIcon as so}from"./components/icon/icons/SearchIcon.js";import{SuccessIcon as eo}from"./components/icon/icons/SuccessIcon.js";import{WarningIcon as to}from"./components/icon/icons/WarningIcon.js";import{MinusIcon as ro}from"./components/icon/icons/MinusIcon.js";import{ThumbDownIcon as no}from"./components/icon/icons/ThumbDownIcon.js";import{ThumbUpIcon as ao}from"./components/icon/icons/ThumbUpIcon.js";import{TrashCanIcon as io}from"./components/icon/icons/TrashCanIcon.js";import{PenIcon as mo}from"./components/icon/icons/PenIcon.js";import{IconButton as co}from"./components/icon-button/IconButton.js";import{Image as po}from"./components/image/Image.js";import{FieldGroup as uo}from"./components/input-group/FieldGroup.js";import{InputGroup as lo}from"./components/input-group/InputGroup.js";import{Label as fo}from"./components/input-group/Label.js";import{SupportLabel as Io}from"./components/input-group/SupportLabel.js";import{Link as jo}from"./components/link/Link.js";import{NavLink as ko}from"./components/link/NavLink.js";import{LinkList as go}from"./components/link-list/LinkList.js";import{List as ho,OrderedList as Co,UnorderedList as Ao}from"./components/list/List.js";import{CheckListItem as So,CrossListItem as To,ListItem as bo}from"./components/list/ListItem.js";import{Loader as Lo}from"./components/loader/Loader.js";import{SkeletonAnimation as Bo}from"./components/loader/skeletons/SkeletonAnimation.js";import{SkeletonButton as Ro}from"./components/loader/skeletons/SkeletonButton.js";import{SkeletonCheckboxGroup as Mo}from"./components/loader/skeletons/SkeletonCheckboxGroup.js";import{SkeletonElement as vo}from"./components/loader/skeletons/SkeletonElement.js";import{SkeletonInput as Eo}from"./components/loader/skeletons/SkeletonInput.js";import{SkeletonRadioButtonGroup as wo}from"./components/loader/skeletons/SkeletonRadioButtonGroup.js";import{SkeletonTable as Oo,SkeletonTableHeader as No,SkeletonTableRow as Po}from"./components/loader/skeletons/SkeletonTable.js";import{SkeletonTextArea as xo}from"./components/loader/skeletons/SkeletonTextArea.js";import{Modal as Go,ModalActions as Do,ModalBody as yo,ModalCloseButton as Uo,ModalContainer as Ho,ModalHeader as Wo,ModalOverlay as Fo,ModalTitle as Ko}from"./components/modal/Modal.js";import{useModal as Vo}from"./components/modal/useModal.js";import{RadioButton as Xo}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as _o}from"./components/radio-button/RadioButtonGroup.js";import{BaseRadioButton as zo}from"./components/radio-button/BaseRadioButton.js";import{N as Qo,S as Jo}from"../NativeSelect-EidDABsT.js";import{ErrorTag as Yo,InfoTag as qo,SuccessTag as Zo,Tag as $o,WarningTag as os}from"./components/tag/Tag.js";import{BaseTextArea as ss}from"./components/text-input/BaseTextArea.js";import{BaseTextInput as es}from"./components/text-input/BaseTextInput.js";import{TextArea as ts}from"./components/text-input/TextArea.js";import{TextInput as rs}from"./components/text-input/TextInput.js";import{Tooltip as ns}from"./components/tooltip/Tooltip.js";import{TooltipContent as as}from"./components/tooltip/TooltipContent.js";import{TooltipTrigger as is}from"./components/tooltip/TooltipTrigger.js";import{PopupTip as ms}from"./components/tooltip/PopupTip.js";import{ScreenReaderOnly as cs}from"./components/ScreenReaderOnly.js";import{default as ps}from"./core/tokens.js";import{useAnimatedDetails as us}from"./hooks/useAnimatedDetails/useAnimatedDetails.js";import{useAnimatedHeight as ls}from"./hooks/useAnimatedHeight/useAnimatedHeight.js";import{useAnimatedHeightBetween as fs}from"./hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{useAutoAnimatedHeight as ds}from"./hooks/useAnimatedHeight/useAutoAnimateHeight.js";import{useBrowserPreferences as Is}from"./hooks/useBrowserPreferences/useBrowserPreferences.js";import{useIntersectionObserver as js}from"./hooks/useIntersectionObserver/useIntersectionObserver.js";import{useLocalStorage as ks}from"./hooks/useLocalStorage/useLocalStorage.js";import{useMutationObserver as gs}from"./hooks/useMutationObserver/useMutationObserver.js";import{usePreviousValue as hs}from"./hooks/usePreviousValue/usePreviousValue.js";import{useProgressiveImg as Cs}from"./hooks/useProgressiveImg/useProgressiveImg.js";import{useScreen as As}from"./hooks/useScreen/useScreen.js";import{useScrollIntoView as Ss}from"./hooks/useScrollIntoView/useScrollIntoView.js";import{useAriaLiveRegion as Ts}from"./hooks/useAriaLiveRegion/useAriaLiveRegion.js";import{useClickOutside as bs}from"./hooks/useClickOutside/useClickOutside.js";import{useFocusOutside as Ls}from"./hooks/useFocusOutside/useFocusOutside.js";import{useElementDimensions as Bs}from"./hooks/useElementDimensions/useElementDimensions.js";import{useId as Rs}from"./hooks/useId/useId.js";import{useKeyListener as Ms}from"./hooks/useKeyListener/useKeyListener.js";import{useListNavigation as vs}from"./hooks/useListNavigation/useListNavigation.js";import{useSwipeGesture as Es}from"./hooks/useSwipeGesture/useSwipeGesture.js";import{u as ws}from"../index-DfvUcA5T.js";import{formatNumber as Os}from"./utilities/formatters/util/formatNumber.js";import{parseNumber as Ns}from"./utilities/formatters/util/parseNumber.js";import{registerWithFodselsnummerMask as Ps,registerWithKontonummerMask as xs,registerWithKortnummerMask as Gs,registerWithMasks as Ds,registerWithTelefonnummerMask as ys}from"./utilities/formatters/util/registerWithMask.js";import{formatAvstand as Us}from"./utilities/formatters/avstand/formatAvstand.js";import{formatBytes as Hs}from"./utilities/formatters/bytes/formatBytes.js";import{formatDate as Ws}from"./utilities/formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as Fs,formatFodselsnummer as Ks}from"./utilities/formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as Vs,formatOrganisasjonsnummer as Xs}from"./utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as _s,formatKontonummer as zs}from"./utilities/formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as Qs,formatKortnummer as Js}from"./utilities/formatters/kortnummer/formatKortnummer.js";import{TELEFONNUMMER_REGEX as Ys,formatTelefonnummer as qs}from"./utilities/formatters/telefonnummer/formatTelefonnummer.js";import{formatValuta as Zs}from"./utilities/formatters/valuta/formatValuta.js";import{mergeProps as $s}from"./utilities/polymorphism/mergeProps.js";import{mergeRefs as oe}from"./utilities/polymorphism/mergeRefs.js";import{SlotComponent as se}from"./utilities/polymorphism/SlotComponent.js";import{initTabListener as ee}from"./utilities/tabListener.js";import{getValuePair as te}from"./utilities/valuePair.js";export{s as Accordion,o as AccordionItem,O as ArrowDownIcon,E as ArrowHorizontalAnimated,N as ArrowLeftIcon,P as ArrowNorthEastIcon,x as ArrowRightIcon,G as ArrowUpIcon,v as ArrowVerticalAnimated,zo as BaseRadioButton,ss as BaseTextArea,es as BaseTextInput,e as Breadcrumb,t as BreadcrumbItem,r as Button,D as CalendarIcon,m as Card,c as CardImage,y as CheckIcon,So as CheckListItem,d as Checkbox,U as ChevronDownIcon,H as ChevronLeftIcon,W as ChevronRightIcon,F as ChevronUpIcon,K as CloseIcon,I as Combobox,k as CookieConsent,g as CookieConsentProvider,V as CopyIcon,To as CrossListItem,R as DatePicker,X as DotsIcon,_ as DragIcon,z as ErrorIcon,Yo as ErrorTag,Fs as FODSELSNUMMER_REGEX,uo as FieldGroup,Q as GreenCheckIcon,J as HamburgerIcon,M as Icon,co as IconButton,po as Image,p as InfoBlock,f as InfoCard,Y as InfoIcon,qo as InfoTag,lo as InputGroup,_s as KONTONUMMER_REGEX,Qs as KORTNUMMER_REGEX,fo as Label,jo as Link,q as LinkIcon,go as LinkList,ho as List,bo as ListItem,Lo as Loader,ro as MinusIcon,Go as Modal,Do as ModalActions,yo as ModalBody,Uo as ModalCloseButton,Ho as ModalContainer,Wo as ModalHeader,Fo as ModalOverlay,Ko as ModalTitle,Qo as NativeSelect,u as NavCard,ko as NavLink,Vs as ORGANISASJONSNUMMER_REGEX,Co as OrderedList,mo as PenIcon,Z as PlusIcon,w as PlusRemoveAnimated,ms as PopupTip,n as PrimaryButton,$ as QuestionIcon,Xo as RadioButton,_o as RadioButtonGroup,oo as RedCrossIcon,cs as ScreenReaderOnly,so as SearchIcon,a as SecondaryButton,Jo as Select,Bo as SkeletonAnimation,Ro as SkeletonButton,Mo as SkeletonCheckboxGroup,vo as SkeletonElement,Eo as SkeletonInput,wo as SkeletonRadioButtonGroup,Oo as SkeletonTable,No as SkeletonTableHeader,Po as SkeletonTableRow,xo as SkeletonTextArea,se as SlotComponent,eo as SuccessIcon,Zo as SuccessTag,Io as SupportLabel,Ys as TELEFONNUMMER_REGEX,$o as Tag,l as TaskCard,i as TertiaryButton,ts as TextArea,rs as TextInput,no as ThumbDownIcon,ao as ThumbUpIcon,ns as Tooltip,as as TooltipContent,is as TooltipTrigger,io as TrashCanIcon,Ao as UnorderedList,to as WarningIcon,os as WarningTag,T as dayMonthYearRegex,Us as formatAvstand,Hs as formatBytes,Ws as formatDate,Ks as formatFodselsnummer,b as formatInput,zs as formatKontonummer,Js as formatKortnummer,Os as formatNumber,Xs as formatOrganisasjonsnummer,qs as formatTelefonnummer,Zs as formatValuta,j as getComboboxValuePair,te as getValuePair,ee as initTabListener,L as isBlurTargetOutside,C as isCorrectFormat,A as isWithinLowerBound,S as isWithinUpperBound,$s as mergeProps,oe as mergeRefs,B as parseDateString,Ns as parseNumber,Ps as registerWithFodselsnummerMask,xs as registerWithKontonummerMask,Gs as registerWithKortnummerMask,Ds as registerWithMasks,ys as registerWithTelefonnummerMask,ps as tokens,ws as unicode,us as useAnimatedDetails,ls as useAnimatedHeight,fs as useAnimatedHeightBetween,Ts as useAriaLiveRegion,ds as useAutoAnimatedHeight,Is as useBrowserPreferences,bs as useClickOutside,h as useCookieConsent,Bs as useElementDimensions,Ls as useFocusOutside,Rs as useId,js as useIntersectionObserver,Ms as useKeyListener,vs as useListNavigation,ks as useLocalStorage,Vo as useModal,gs as useMutationObserver,hs as usePreviousValue,Cs as useProgressiveImg,As as useScreen,Ss as useScrollIntoView,Es as useSwipeGesture};
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.9.0",
+    "version": "0.10.1",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -25,6 +25,7 @@
         "./src/components/checkbox/styles",
         "./src/components/combobox/styles",
         "./src/components/cookie-consent/styles",
+        "./src/components/datepicker/styles",
         "./src/components/icon/styles",
         "./src/components/icon-button/styles",
         "./src/components/image/styles",
@@ -36,6 +37,7 @@
         "./src/components/radio-button/styles",
         "./src/components/select/styles",
         "./src/components/tag/styles",
+        "./src/components/text-input/styles",
         "./src/components/tooltip/styles"
     ],
     "exports": {
@@ -74,6 +76,7 @@
         "./styles/checkbox/*": "./src/components/checkbox/styles/*",
         "./styles/combobox/*": "./src/components/combobox/styles/*",
         "./styles/cookie-consent/*": "./src/components/cookie-consent/styles/*",
+        "./styles/datepicker/*": "./src/components/datepicker/styles/*",
         "./styles/icon/*": "./src/components/icon/styles/*",
         "./styles/icon-button/*": "./src/components/icon-button/styles/*",
         "./styles/input-group/*": "./src/components/input-group/styles/*",
@@ -86,6 +89,7 @@
         "./styles/radio-button/*": "./src/components/radio-button/styles/*",
         "./styles/select/*": "./src/components/select/styles/*",
         "./styles/tag/*": "./src/components/tag/styles/*",
+        "./styles/text-input/*": "./src/components/text-input/styles/*",
         "./styles/tooltip/*": "./src/components/tooltip/styles/*"
     },
     "scripts": {
@@ -99,6 +103,7 @@
     },
     "optionalDependencies": {
         "@floating-ui/react": "^0.24.2",
+        "date-fns": "^2.30.0",
         "framer-motion": "^7.10.3",
         "react-a11y-dialog": "^6.2.0"
     },
@@ -127,5 +132,5 @@
     "bugs": {
         "url": "https://github.com/fremtind/jokul/issues"
     },
-    "gitHead": "b7fd36694c50e8bb5cbc728dd1f34c69a1896898"
+    "gitHead": "68c1a048579f405337b81e893be7980e027bd8db"
 }

package/src/components/button/styles/button.css

@@ -127,7 +127,7 @@ html[data-touchnavigation] .jkl-button--pressed {
   inset: 0;
 }
 html[data-touchnavigation] .jkl-button--primary.jkl-button--pressed::before, html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed::before, html[data-touchnavigation] .jkl-button--ghost.jkl-button--pressed::before {
-  animation: cubic-bezier(0, 0, 0.375, 1.17) 400ms jkl-flash-upzc61c;
+  animation: cubic-bezier(0, 0, 0.375, 1.17) 400ms jkl-flash-u7ypeoj;
 }
 .jkl-button--ghost {
   --border-color: transparent;
@@ -175,7 +175,7 @@ html[data-touchnavigation] .jkl-button--primary.jkl-button--pressed::before, htm
   background-color: transparent;
 }
 html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed::before {
-  animation: cubic-bezier(0, 0, 0.375, 1.17) 400ms jkl-tertiary-flash-upzc61i;
+  animation: cubic-bezier(0, 0, 0.375, 1.17) 400ms jkl-tertiary-flash-u7ypeov;
 }
 .jkl-button--tertiary:focus-visible {
   border: none;
@@ -227,7 +227,7 @@ html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed::before {
   }
 }
 
-@keyframes jkl-flash-upzc61c {
+@keyframes jkl-flash-u7ypeoj {
   0% {
     box-shadow: 0 0 0 0 var(--focus-color);
     opacity: 0.5;
@@ -237,7 +237,7 @@ html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed::before {
     opacity: 0;
   }
 }
-@keyframes jkl-tertiary-flash-upzc61i {
+@keyframes jkl-tertiary-flash-u7ypeov {
   0% {
     box-shadow: 0 0 0 0 var(--focus-color);
     background-color: var(--focus-color);

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

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:var(--jkl-body-font-size);--jkl-button-line-height:3rem;--jkl-button-font-weight:700;--jkl-button-min-width:6.5rem;--jkl-button-padding:0 1.5rem;--jkl-button-tertiary-padding:0 0.125rem;--jkl-button-children-padding-with-icon:0.125rem;--jkl-button-tertiary-padding-with-icon:0;--jkl-button-focus-ring-placement:-0.3125rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-line-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:var(--jkl-small-font-size);--jkl-button-line-height:2rem;--jkl-button-font-weight:700;--jkl-button-min-width:4.75rem;--jkl-button-padding:0 0.75rem;--jkl-button-tertiary-padding:0 0.125rem;--jkl-button-children-padding-with-icon:0.125rem;--jkl-button-tertiary-padding-with-icon:0.125rem;--jkl-button-focus-ring-placement:-0.1875rem}a.jkl-button{text-decoration:none}.jkl-button{--border-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-background-action);--focus-color:var(--jkl-color-background-action);--background-color:#0000;background-color:var(--background-color);border-style:none;box-sizing:border-box;color:var(--text-color);cursor:pointer;display:inline-flex;font-size:var(--jkl-button-font-size);font-weight:var(--jkl-button-font-weight);height:var(--jkl-button-line-height);justify-content:center;line-height:var(--jkl-button-line-height);min-width:var(--jkl-button-min-width);overflow:visible;position:relative;transform-origin:50% 90%;transition-duration:.15s;transition-property:transform,background-color;transition-timing-function:ease;-webkit-user-select:none;user-select:none}.jkl-button,.jkl-button:active,.jkl-button:focus,.jkl-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-button{border-style:revert}.jkl-button,.jkl-button:active,.jkl-button:focus,.jkl-button:hover{outline:revert;outline-style:revert}}.jkl-button:focus-visible,html:not([data-touchnavigation]) .jkl-button:hover{transform:scale(1.05)}.jkl-button:active,html:not([data-mousenavigation]) .jkl-button:active,html:not([data-touchnavigation]) .jkl-button:active{transform:scale(1)}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}html[data-touchnavigation] .jkl-button--pressed{-webkit-tap-highlight-color:rgba(0,0,0,0);transform:scale(.95)}.jkl-button__content{height:var(--jkl-button-line-height);overflow:hidden}.jkl-button__slider{transition-duration:.15s;transition-property:transform;transition-timing-function:ease}.jkl-button__slider--show-loader{transform:translateY(-51%)}.jkl-button__loader{align-items:center;display:flex;height:var(--jkl-button-line-height);justify-content:center;padding:0}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{border:.0625rem solid var(--border-color);border-radius:999px;padding:var(--jkl-button-padding)}.jkl-button--ghost:before,.jkl-button--primary:before,.jkl-button--secondary:before{border-radius:999px;content:"";inset:0;position:absolute}html[data-touchnavigation] .jkl-button--ghost.jkl-button--pressed:before,html[data-touchnavigation] .jkl-button--primary.jkl-button--pressed:before,html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed:before{animation:jkl-flash-upzc61c .4s cubic-bezier(0,0,.375,1.17)}.jkl-button--ghost{--border-color:#0000;border-radius:.25rem;padding:0 .25rem}.jkl-button--ghost:focus-visible,html:not([data-touchnavigation]) .jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover);transform:scale(1)}.jkl-button--ghost.jkl-button--icon-left .jkl-button__children{padding-left:var(--jkl-button-children-padding-with-icon)}.jkl-button--ghost.jkl-button--icon-right .jkl-button__children{padding-right:var(--jkl-button-children-padding-with-icon)}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary{transition-property:box-shadow,transform,background-color}.jkl-button--secondary:focus-visible,.jkl-button--secondary:hover,html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed{box-shadow:inset 0 0 0 1px var(--border-color),inset 0 0 0 1px var(--border-color)}.jkl-button--tertiary{border-bottom:.0625rem solid var(--border-color);border-top:.0625rem solid #0000;min-width:unset;padding:var(--jkl-button-tertiary-padding);transition:transform .1s cubic-bezier(.6,.2,.35,1),border .1s cubic-bezier(.6,.2,.35,1)}.jkl-button--tertiary:before{background-color:initial;border-radius:100%;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform:translate3d(-50%,-50%,0);width:1rem}html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed:before{animation:jkl-tertiary-flash-upzc61i .4s cubic-bezier(0,0,.375,1.17)}.jkl-button--tertiary:focus-visible{border:none}@media screen and (forced-colors:active){.jkl-button--tertiary:focus-visible{border:revert}}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:hover,html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed{border-bottom-color:var(--focus-color);border-bottom-width:.125rem;color:var(--focus-color)}.jkl-button--icon-left .jkl-button__icon,.jkl-button--icon-right .jkl-button__icon{display:inline-block;vertical-align:sub}.jkl-button--icon-left{padding-left:.5rem}.jkl-button--icon-left .jkl-button__children{padding-left:var(--jkl-button-children-padding-with-icon)}.jkl-button--icon-left.jkl-button--tertiary{padding-left:var(--jkl-button-tertiary-padding-with-icon)}.jkl-button--icon-right{padding-right:.5rem}.jkl-button--icon-right .jkl-button__children{padding-right:var(--jkl-button-children-padding-with-icon)}.jkl-button--icon-right.jkl-button--tertiary{padding-right:var(--jkl-button-tertiary-padding-with-icon)}@media screen and (forced-colors:active){.jkl-button.jkl-button--primary:focus:not(a),.jkl-button.jkl-button--primary:hover:not(a),.jkl-button.jkl-button--primary:not(a),.jkl-button.jkl-button--secondary:focus:not(a),.jkl-button.jkl-button--secondary:hover:not(a),.jkl-button.jkl-button--secondary:not(a){border-color:ButtonText}.jkl-button .jkl-loader__dot{background-color:ButtonText}.jkl-button.jkl-button--tertiary{border-left-style:none;border-right-style:none;border-top-style:none;outline-offset:.125rem}}@keyframes jkl-flash-upzc61c{0%{box-shadow:0 0 0 0 var(--focus-color);opacity:.5}to{box-shadow:0 0 0 1rem var(--focus-color);opacity:0}}@keyframes jkl-tertiary-flash-upzc61i{0%{background-color:var(--focus-color);box-shadow:0 0 0 0 var(--focus-color);opacity:.5}to{background-color:var(--focus-color);box-shadow:0 0 0 2.5rem var(--focus-color);opacity:0}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:var(--jkl-body-font-size);--jkl-button-line-height:3rem;--jkl-button-font-weight:700;--jkl-button-min-width:6.5rem;--jkl-button-padding:0 1.5rem;--jkl-button-tertiary-padding:0 0.125rem;--jkl-button-children-padding-with-icon:0.125rem;--jkl-button-tertiary-padding-with-icon:0;--jkl-button-focus-ring-placement:-0.3125rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-line-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:var(--jkl-small-font-size);--jkl-button-line-height:2rem;--jkl-button-font-weight:700;--jkl-button-min-width:4.75rem;--jkl-button-padding:0 0.75rem;--jkl-button-tertiary-padding:0 0.125rem;--jkl-button-children-padding-with-icon:0.125rem;--jkl-button-tertiary-padding-with-icon:0.125rem;--jkl-button-focus-ring-placement:-0.1875rem}a.jkl-button{text-decoration:none}.jkl-button{--border-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-background-action);--focus-color:var(--jkl-color-background-action);--background-color:#0000;background-color:var(--background-color);border-style:none;box-sizing:border-box;color:var(--text-color);cursor:pointer;display:inline-flex;font-size:var(--jkl-button-font-size);font-weight:var(--jkl-button-font-weight);height:var(--jkl-button-line-height);justify-content:center;line-height:var(--jkl-button-line-height);min-width:var(--jkl-button-min-width);overflow:visible;position:relative;transform-origin:50% 90%;transition-duration:.15s;transition-property:transform,background-color;transition-timing-function:ease;-webkit-user-select:none;user-select:none}.jkl-button,.jkl-button:active,.jkl-button:focus,.jkl-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-button{border-style:revert}.jkl-button,.jkl-button:active,.jkl-button:focus,.jkl-button:hover{outline:revert;outline-style:revert}}.jkl-button:focus-visible,html:not([data-touchnavigation]) .jkl-button:hover{transform:scale(1.05)}.jkl-button:active,html:not([data-mousenavigation]) .jkl-button:active,html:not([data-touchnavigation]) .jkl-button:active{transform:scale(1)}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}html[data-touchnavigation] .jkl-button--pressed{-webkit-tap-highlight-color:rgba(0,0,0,0);transform:scale(.95)}.jkl-button__content{height:var(--jkl-button-line-height);overflow:hidden}.jkl-button__slider{transition-duration:.15s;transition-property:transform;transition-timing-function:ease}.jkl-button__slider--show-loader{transform:translateY(-51%)}.jkl-button__loader{align-items:center;display:flex;height:var(--jkl-button-line-height);justify-content:center;padding:0}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{border:.0625rem solid var(--border-color);border-radius:999px;padding:var(--jkl-button-padding)}.jkl-button--ghost:before,.jkl-button--primary:before,.jkl-button--secondary:before{border-radius:999px;content:"";inset:0;position:absolute}html[data-touchnavigation] .jkl-button--ghost.jkl-button--pressed:before,html[data-touchnavigation] .jkl-button--primary.jkl-button--pressed:before,html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed:before{animation:jkl-flash-u7ypeoj .4s cubic-bezier(0,0,.375,1.17)}.jkl-button--ghost{--border-color:#0000;border-radius:.25rem;padding:0 .25rem}.jkl-button--ghost:focus-visible,html:not([data-touchnavigation]) .jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover);transform:scale(1)}.jkl-button--ghost.jkl-button--icon-left .jkl-button__children{padding-left:var(--jkl-button-children-padding-with-icon)}.jkl-button--ghost.jkl-button--icon-right .jkl-button__children{padding-right:var(--jkl-button-children-padding-with-icon)}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary{transition-property:box-shadow,transform,background-color}.jkl-button--secondary:focus-visible,.jkl-button--secondary:hover,html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed{box-shadow:inset 0 0 0 1px var(--border-color),inset 0 0 0 1px var(--border-color)}.jkl-button--tertiary{border-bottom:.0625rem solid var(--border-color);border-top:.0625rem solid #0000;min-width:unset;padding:var(--jkl-button-tertiary-padding);transition:transform .1s cubic-bezier(.6,.2,.35,1),border .1s cubic-bezier(.6,.2,.35,1)}.jkl-button--tertiary:before{background-color:initial;border-radius:100%;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform:translate3d(-50%,-50%,0);width:1rem}html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed:before{animation:jkl-tertiary-flash-u7ypeov .4s cubic-bezier(0,0,.375,1.17)}.jkl-button--tertiary:focus-visible{border:none}@media screen and (forced-colors:active){.jkl-button--tertiary:focus-visible{border:revert}}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:hover,html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed{border-bottom-color:var(--focus-color);border-bottom-width:.125rem;color:var(--focus-color)}.jkl-button--icon-left .jkl-button__icon,.jkl-button--icon-right .jkl-button__icon{display:inline-block;vertical-align:sub}.jkl-button--icon-left{padding-left:.5rem}.jkl-button--icon-left .jkl-button__children{padding-left:var(--jkl-button-children-padding-with-icon)}.jkl-button--icon-left.jkl-button--tertiary{padding-left:var(--jkl-button-tertiary-padding-with-icon)}.jkl-button--icon-right{padding-right:.5rem}.jkl-button--icon-right .jkl-button__children{padding-right:var(--jkl-button-children-padding-with-icon)}.jkl-button--icon-right.jkl-button--tertiary{padding-right:var(--jkl-button-tertiary-padding-with-icon)}@media screen and (forced-colors:active){.jkl-button.jkl-button--primary:focus:not(a),.jkl-button.jkl-button--primary:hover:not(a),.jkl-button.jkl-button--primary:not(a),.jkl-button.jkl-button--secondary:focus:not(a),.jkl-button.jkl-button--secondary:hover:not(a),.jkl-button.jkl-button--secondary:not(a){border-color:ButtonText}.jkl-button .jkl-loader__dot{background-color:ButtonText}.jkl-button.jkl-button--tertiary{border-left-style:none;border-right-style:none;border-top-style:none;outline-offset:.125rem}}@keyframes jkl-flash-u7ypeoj{0%{box-shadow:0 0 0 0 var(--focus-color);opacity:.5}to{box-shadow:0 0 0 1rem var(--focus-color);opacity:0}}@keyframes jkl-tertiary-flash-u7ypeov{0%{background-color:var(--focus-color);box-shadow:0 0 0 0 var(--focus-color);opacity:.5}to{background-color:var(--focus-color);box-shadow:0 0 0 2.5rem var(--focus-color);opacity:0}}

package/src/components/checkbox/styles/checkbox.css

@@ -32,7 +32,7 @@
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-u1mu402 {
+@keyframes jkl-checkbox-checked-uj4c9re {
   0% {
     width: 0;
     height: 0;
@@ -46,7 +46,7 @@
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-u1mu40j {
+@keyframes jkl-checkbox-indeterminate-uj4c9s8 {
   0% {
     width: 0;
   }
@@ -74,11 +74,11 @@
   top: -6px;
 }
 .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-u1mu402 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-uj4c9re 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-  animation: jkl-checkbox-indeterminate-u1mu40j 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-uj4c9s8 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

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

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

package/src/components/datepicker/styles/_calendar-date-button.scss

@@ -0,0 +1,100 @@
+@use "../../../core/jkl";
+
+@include jkl.light-mode-variables {
+    --jkl-calendar-adjacent-month-color: #{jkl.$color-stein};
+    --jkl-calendar-disabled-day-color: #{jkl.$color-svaberg};
+    --jkl-calendar-active-day-color: #{jkl.$color-hvit};
+    --jkl-calendar-hover-date-background-color: #{jkl.$color-dis};
+    --jkl-calendar-selected-date-background-color: #{jkl.$color-granitt};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-calendar-adjacent-month-color: #{jkl.$color-svaberg};
+    --jkl-calendar-disabled-day-color: #{jkl.$color-stein};
+    --jkl-calendar-active-day-color: #{jkl.$color-svart};
+    --jkl-calendar-hover-date-background-color: #{jkl.$color-stein};
+    --jkl-calendar-selected-date-background-color: #{jkl.$color-snohvit};
+}
+
+@include jkl.comfortable-density-variables {
+    --jkl-calendar-date-size: #{jkl.rem(38px)};
+    @include jkl.declare-font-variables("jkl-calendar-date", "body");
+
+    @include jkl.small-device {
+        --jkl-calendar-date-size: #{jkl.rem(36px)};
+        @include jkl.declare-font-variables("jkl-calendar-date", "small");
+    }
+
+    // Custom tweaks for iPhone SE
+    @include jkl.screen-to(375px) {
+        --jkl-calendar-date-size: #{jkl.rem(32px)};
+    }
+}
+
+@include jkl.compact-density-variables {
+    --jkl-calendar-date-size: #{jkl.rem(32px)};
+    @include jkl.declare-font-variables("jkl-calendar-date", "small");
+}
+
+.jkl-calendar-date-button {
+    @include jkl.use-font-variables("jkl-calendar-date");
+    appearance: none;
+    position: relative;
+
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--jkl-calendar-date-size);
+    width: var(--jkl-calendar-date-size);
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--jkl-calendar-text-color);
+
+    margin: var(--jkl-calendar-date-margin);
+
+    padding: 0;
+    padding-top: jkl.$spacing-2; // adjust visual alignment of text
+    @include jkl.motion("entrance", "energetic");
+    transition-property: color, background-color, box-shadow;
+
+    @include jkl.reset-outline;
+
+    &[data-adjacent="true"] {
+        @include jkl.text-style("small");
+        padding: 0; // reset vertical alignment of text
+        color: var(--jkl-calendar-adjacent-month-color);
+    }
+
+    &[aria-current="date"] {
+        font-weight: jkl.$typography-weight-bold;
+    }
+
+    // Other dates
+    &:hover:not(:disabled) {
+        background-color: var(--jkl-calendar-hover-date-background-color);
+        cursor: pointer;
+    }
+
+    // Selected date
+    &[aria-pressed="true"] {
+        background-color: var(--jkl-calendar-selected-date-background-color);
+        color: var(--jkl-calendar-active-day-color);
+        cursor: pointer;
+
+        &:hover {
+            color: var(--jkl-calendar-text-color);
+        }
+    }
+
+    &:disabled {
+        color: var(--jkl-calendar-disabled-day-color);
+    }
+
+    @include jkl.keyboard-navigation {
+        &:focus {
+            outline: jkl.rem(2px) solid var(--jkl-calendar-focus-color);
+            outline-offset: jkl.rem(2px);
+        }
+    }
+}

package/src/components/datepicker/styles/_calendar-navigation-dropdown.scss

@@ -0,0 +1,53 @@
+@use "../../../core/jkl";
+
+.jkl-calendar-navigation-dropdown {
+    // Størrelsen til medium ikon
+    --chevron-size: #{jkl.rem(24px)};
+
+    display: inline-flex;
+    align-items: center;
+
+    & > * {
+        cursor: pointer;
+    }
+
+    &__select {
+        appearance: none;
+        @include jkl.text-style("small") {
+            font-weight: jkl.$typography-weight-bold;
+        }
+        background-color: transparent;
+        color: inherit;
+        border-radius: 0;
+        border: none;
+        text-align: end;
+        text-align-last: end;
+        height: jkl.rem(40px);
+        margin: 0;
+        padding: 0;
+        padding-inline-end: var(--chevron-size);
+
+        @include jkl.reset-outline;
+
+        & option {
+            color: var(--jkl-select-text-color);
+            background-color: var(--jkl-select-open-background-color);
+        }
+
+        @include jkl.keyboard-navigation {
+            &:focus {
+                outline: jkl.rem(2px) solid var(--jkl-calendar-focus-color);
+                outline-offset: 1px;
+            }
+        }
+    }
+
+    &__chevron {
+        margin-left: calc(var(--chevron-size) * -1);
+        pointer-events: none;
+    }
+
+    & + & {
+        margin-inline-start: var(--jkl-spacing-8);
+    }
+}

package/src/components/datepicker/styles/_calendar-navigation.scss

@@ -0,0 +1,54 @@
+@use "../../../core/jkl";
+
+@include jkl.light-mode-variables {
+    --jkl-calendar-disabled-day-color: #{jkl.$color-svaberg};
+    --jkl-calendar-navigation-arrow-focus-color: #{jkl.$color-stein};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-calendar-disabled-day-color: #{jkl.$color-stein};
+    --jkl-calendar-navigation-arrow-focus-color: #{jkl.$color-svaberg};
+}
+
+.jkl-calendar-navigation {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+
+    &__arrow {
+        display: inline-flex;
+        position: relative;
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+        margin-left: jkl.rem(-8px);
+        justify-content: center;
+        align-items: center;
+        background-color: transparent;
+        color: var(--jkl-calendar-text-color);
+        width: jkl.rem(40px);
+        height: jkl.rem(40px);
+
+        @include jkl.reset-outline;
+
+        &:hover {
+            color: var(--jkl-calendar-navigation-arrow-focus-color);
+        }
+
+        @include jkl.keyboard-navigation {
+            &:focus {
+                outline: jkl.rem(2px) solid var(--jkl-calendar-focus-color);
+                outline-offset: jkl.rem(-2px);
+            }
+        }
+
+        &:disabled {
+            color: var(--jkl-calendar-disabled-day-color);
+        }
+    }
+}

package/src/components/datepicker/styles/_calendar-table.scss

@@ -0,0 +1,27 @@
+@use "../../../core/jkl";
+
+.jkl-calendar-table {
+    // Calendar table heading (weekday names)
+    // ======================================
+
+    th {
+        @include jkl.text-style("small");
+        padding-bottom: var(--jkl-spacing-8);
+    }
+
+    // Calendar table styles
+    // =====================
+
+    td {
+        text-align: center;
+    }
+
+    td + td,
+    th + th {
+        padding-left: jkl.rem(4px); // space between columns
+    }
+
+    tr + tr > td {
+        padding-top: jkl.rem(4px); // space between rows
+    }
+}