@fremtind/jokul 0.31.5 → 0.32.1

package/build/cjs/components/chip/Chip.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),c=require("../icon/icons/CheckIcon.cjs"),i=require("../icon/icons/CloseIcon.cjs");exports.Chip=({className:s,variant:a,onClick:t,children:r,selected:n,size:o="small",...j})=>e.jsxs("button",{className:l.clsx("jkl-chip",{"jkl-chip--input":"input"===a,"jkl-chip--filter":"filter"===a,"jkl-chip--small":"small"===o,"jkl-chip--large":"large"===o},s),onClick:t,"aria-pressed":n,...j,children:[r,"filter"===a&&n&&e.jsx(c.CheckIcon,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-check-icon"}),"input"===a&&e.jsx(i.CloseIcon,{className:"jkl-chip__icon lol",variant:"small","data-testid":"jkl-close-icon"})]});
+//# sourceMappingURL=Chip.cjs.map

package/build/cjs/components/chip/Chip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.cjs","sources":["../../../../src/components/chip/Chip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, HTMLAttributes } from \"react\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\n\ntype Size = \"small\" | \"large\";\n\nexport type ChipVariant =\n    | {\n          variant: \"input\";\n          selected?: never;\n          size?: Size;\n      }\n    | {\n          variant: \"filter\";\n          selected?: boolean;\n          size?: Size;\n      };\n\nexport type ChipProps = ChipVariant & HTMLAttributes<HTMLButtonElement>;\n\nexport const Chip: FC<ChipProps> = ({\n    className,\n    variant,\n    onClick,\n    children,\n    selected,\n    size = \"small\",\n    ...rest\n}) => {\n    return (\n        <button\n            className={clsx(\n                \"jkl-chip\",\n                {\n                    \"jkl-chip--input\": variant === \"input\",\n                    \"jkl-chip--filter\": variant === \"filter\",\n                    \"jkl-chip--small\": size === \"small\",\n                    \"jkl-chip--large\": size === \"large\",\n                },\n                className,\n            )}\n            onClick={onClick}\n            aria-pressed={selected}\n            {...rest}\n        >\n            {children}\n            {variant === \"filter\" && selected && (\n                <CheckIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-check-icon\"\n                />\n            )}\n            {variant === \"input\" && (\n                <CloseIcon\n                    className=\"jkl-chip__icon lol\"\n                    variant=\"small\"\n                    data-testid=\"jkl-close-icon\"\n                />\n            )}\n        </button>\n    );\n};\n"],"names":["className","variant","onClick","children","selected","size","rest","jsxs","clsx","jsx","CheckIcon","CloseIcon"],"mappings":"4PAqBmC,EAC/BA,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EAAO,WACJC,KAGCC,EAAAA,KAAC,SAAA,CACGP,UAAWQ,EAAAA,KACP,WACA,CACI,kBAA+B,UAAZP,EACnB,mBAAgC,WAAZA,EACpB,kBAA4B,UAATI,EACnB,kBAA4B,UAATA,GAEvBL,GAEJE,QAAAA,EACA,eAAcE,KACVE,EAEHH,SAAA,CAAAA,EACY,WAAZF,GAAwBG,GACrBK,EAAAA,IAACC,EAAAA,UAAA,CACGV,UAAU,iBACVC,QAAQ,QACR,cAAY,mBAGP,UAAZA,GACGQ,EAAAA,IAACE,EAAAA,UAAA,CACGX,UAAU,qBACVC,QAAQ,QACR,cAAY"}

package/build/cjs/components/chip/Chip.d.cts

@@ -0,0 +1,14 @@
+import { FC, HTMLAttributes } from 'react';
+type Size = "small" | "large";
+export type ChipVariant = {
+    variant: "input";
+    selected?: never;
+    size?: Size;
+} | {
+    variant: "filter";
+    selected?: boolean;
+    size?: Size;
+};
+export type ChipProps = ChipVariant & HTMLAttributes<HTMLButtonElement>;
+export declare const Chip: FC<ChipProps>;
+export {};

package/build/cjs/components/chip/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Chip.cjs");exports.Chip=e.Chip;
+//# sourceMappingURL=index.cjs.map

package/build/cjs/components/chip/index.cjs.map

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

package/build/cjs/components/chip/index.d.cts

@@ -0,0 +1 @@
+export { Chip, type ChipProps } from './Chip.cjs';

package/build/cjs/hooks/useScreen/useScreen.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),i=require("../../core/tokens.cjs"),t=require("../mediaQueryUtils.cjs"),r=require("./state.cjs"),{breakpoint:a}=i,s=e=>parseInt(e.replace("px","")),c={isSmallDevice:`(max-width: ${s(a.medium)-1}px))`,isMediumDevice:`(min-width: ${a.medium}) and (max-width: ${s(a.large)-1}px)`,isLargeDevice:`(min-width: ${a.large}) and (max-width: ${s(a.xl)-1}px)`,isXlDevice:`(min-width: ${a.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},n=e=>({type:"isLandscape"===e||"isPortrait"===e?r.ActionType.orientation:r.ActionType.deviceSize,property:e});exports.useScreen=()=>{const[i,a]=e.useState(!1),[s,o]=e.useReducer(r.reducer,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});e.useEffect((()=>{a(!0),Object.entries(c).map((([e,i])=>[e,t.getInitialMediaQueryMatch(i)])).forEach((([e,i])=>{i&&o(n(e))}))}),[]);const d=e.useCallback((e=>i=>{requestAnimationFrame((()=>{i.matches&&o(n(e))}))}),[]);return e.useEffect((()=>{if(!i||!window.matchMedia)return;const e=[];return Object.entries(c).forEach((([i,r])=>{const a=window.matchMedia(r),s=d(i);e.push([a,s]),t.addMediaQueryListener(a,s)})),()=>{e.forEach((([e,i])=>t.removeMediaQueryListener(e,i)))}}),[d,i]),{...s}};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),i=require("../../core/tokens.cjs"),t=require("../mediaQueryUtils.cjs"),r=require("./state.cjs"),{breakpoint:a}=i,s=e=>parseInt(e.replace("px","")),n={isSmallDevice:`(max-width: ${s(a.medium)-1}px)`,isMediumDevice:`(min-width: ${a.medium}) and (max-width: ${s(a.large)-1}px)`,isLargeDevice:`(min-width: ${a.large}) and (max-width: $a{\n        breakpointsAsNumber(breakpoint.xl) - 1\n    }px)`,isXlDevice:`(min-width: ${a.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},c=e=>({type:"isLandscape"===e||"isPortrait"===e?r.ActionType.orientation:r.ActionType.deviceSize,property:e});exports.useScreen=()=>{const[i,a]=e.useState(!1),[s,o]=e.useReducer(r.reducer,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});e.useEffect((()=>{a(!0),Object.entries(n).map((([e,i])=>[e,t.getInitialMediaQueryMatch(i)])).forEach((([e,i])=>{i&&o(c(e))}))}),[]);const d=e.useCallback((e=>i=>{requestAnimationFrame((()=>{i.matches&&o(c(e))}))}),[]);return e.useEffect((()=>{if(!i||!window.matchMedia)return;const e=[];return Object.entries(n).forEach((([i,r])=>{const a=window.matchMedia(r),s=d(i);e.push([a,s]),t.addMediaQueryListener(a,s)})),()=>{e.forEach((([e,i])=>t.removeMediaQueryListener(e,i)))}}),[d,i]),{...s}};
 //# sourceMappingURL=useScreen.cjs.map

package/build/cjs/hooks/useScreen/useScreen.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScreen.cjs","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport { tokens } from \"../../core/index.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport { ScreenAction, ActionType, reducer, ScreenState } from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n    parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n    isSmallDevice: `(max-width: ${\n        breakpointsAsNumber(breakpoint.medium) - 1\n    }px))`,\n    isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.large) - 1\n    }px)`,\n    isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.xl) - 1\n    }px)`,\n    isXlDevice: `(min-width: ${breakpoint.xl})`,\n    isPortrait: \"(orientation: portrait)\",\n    isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n    type:\n        property === \"isLandscape\" || property === \"isPortrait\"\n            ? ActionType.orientation\n            : ActionType.deviceSize,\n    property,\n});\n\n/**\n * Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [device, deviceDispatch] = useReducer(reducer, {\n        isSmallDevice: false,\n        isMediumDevice: false,\n        isLargeDevice: false,\n        isXlDevice: false,\n        isLandscape: false,\n        isPortrait: false,\n    });\n\n    useEffect(() => {\n        setHasMounted(true);\n        Object.entries(MEDIA_RULES)\n            .map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)])\n            .forEach(([key, value]) => {\n                if (value) {\n                    deviceDispatch(createAction(key as keyof ScreenState));\n                }\n            });\n    }, []);\n\n    const createListener = useCallback(\n        (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n            requestAnimationFrame(() => {\n                if (e.matches) {\n                    deviceDispatch(createAction(key));\n                }\n            });\n        },\n        [],\n    );\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const eventListenerPairs: Array<\n            [MediaQueryList, (e: MediaQueryListEvent) => void]\n        > = [];\n\n        Object.entries(MEDIA_RULES).forEach(([key, rule]) => {\n            const queryList = window.matchMedia(rule);\n            const listener = createListener(key as keyof ScreenState);\n            eventListenerPairs.push([queryList, listener]);\n            addMediaQueryListener(queryList, listener);\n        });\n\n        return () => {\n            eventListenerPairs.forEach(([queryList, listener]) =>\n                removeMediaQueryListener(queryList, listener),\n            );\n        };\n    }, [createListener, hasMounted]);\n\n    return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","xl","isXlDevice","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","Object","entries","map","key","rule","getInitialMediaQueryMatch","forEach","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"0MASQA,WAAAA,GAAeC,EAEjBC,EAAuBF,GACzBG,SAASH,EAAWI,QAAQ,KAAM,KAEhCC,EAAiD,CACnDC,cAAe,eACXJ,EAAoBF,EAAWO,QAAU,QAE7CC,eAAgB,eAAeR,EAAWO,2BACtCL,EAAoBF,EAAWS,OAAS,OAE5CC,cAAe,eAAeV,EAAWS,0BACrCP,EAAoBF,EAAWW,IAAM,OAEzCC,WAAY,eAAeZ,EAAWW,MACtCE,WAAY,0BACZC,YAAa,4BAGXC,EAAgBC,KAClBC,KACiB,gBAAbD,GAA2C,eAAbA,EACxBE,aAAWC,YACXD,EAAAA,WAAWE,WACrBJ,SAAAA,sBAOqB,KACrB,MAAOK,EAAYC,GAAiBC,YAAS,IAEtCC,EAAQC,GAAkBC,EAAAA,WAAWC,EAAAA,QAAS,CACjDrB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfE,YAAY,EACZE,aAAa,EACbD,YAAY,IAGhBe,EAAAA,WAAU,KACNN,GAAc,GACPO,OAAAC,QAAQzB,GACV0B,KAAI,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAA0BA,0BAAAD,MACrDE,SAAQ,EAAEH,EAAKI,MACRA,GACeX,EAAAV,EAAaiB,GAAyB,GAE5D,GACN,IAEH,MAAMK,EAAiBC,EAAAA,aAClBN,GAA4BO,IACzBC,uBAAsB,KACdD,EAAEE,SACahB,EAAAV,EAAaiB,GAAI,GAEvC,GAEL,IAGJJ,OAAAA,EAAAA,WAAU,KACN,IAAKP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEG,OAAAf,OAAAC,QAAQzB,GAAa8B,SAAQ,EAAEH,EAAKC,MACjC,MAAAY,EAAYH,OAAOC,WAAWV,GAC9Ba,EAAWT,EAAeL,GAChCY,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,wBAAsBH,EAAWC,EAAQ,IAGtC,KACgBF,EAAAT,SAAQ,EAAEU,EAAWC,KACpCG,EAAAA,yBAAyBJ,EAAWC,IAAQ,CAChD,GAEL,CAACT,EAAgBhB,IAEb,IAAKG"}
+{"version":3,"file":"useScreen.cjs","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport { tokens } from \"../../core/index.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport { ScreenAction, ActionType, reducer, ScreenState } from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n    parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n    isSmallDevice: `(max-width: ${\n        breakpointsAsNumber(breakpoint.medium) - 1\n    }px)`,\n    isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.large) - 1\n    }px)`,\n    isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: $a{\n        breakpointsAsNumber(breakpoint.xl) - 1\n    }px)`,\n    isXlDevice: `(min-width: ${breakpoint.xl})`,\n    isPortrait: \"(orientation: portrait)\",\n    isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n    type:\n        property === \"isLandscape\" || property === \"isPortrait\"\n            ? ActionType.orientation\n            : ActionType.deviceSize,\n    property,\n});\n\n/**\n * Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [device, deviceDispatch] = useReducer(reducer, {\n        isSmallDevice: false,\n        isMediumDevice: false,\n        isLargeDevice: false,\n        isXlDevice: false,\n        isLandscape: false,\n        isPortrait: false,\n    });\n\n    useEffect(() => {\n        setHasMounted(true);\n        Object.entries(MEDIA_RULES)\n            .map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)])\n            .forEach(([key, value]) => {\n                if (value) {\n                    deviceDispatch(createAction(key as keyof ScreenState));\n                }\n            });\n    }, []);\n\n    const createListener = useCallback(\n        (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n            requestAnimationFrame(() => {\n                if (e.matches) {\n                    deviceDispatch(createAction(key));\n                }\n            });\n        },\n        [],\n    );\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const eventListenerPairs: Array<\n            [MediaQueryList, (e: MediaQueryListEvent) => void]\n        > = [];\n\n        Object.entries(MEDIA_RULES).forEach(([key, rule]) => {\n            const queryList = window.matchMedia(rule);\n            const listener = createListener(key as keyof ScreenState);\n            eventListenerPairs.push([queryList, listener]);\n            addMediaQueryListener(queryList, listener);\n        });\n\n        return () => {\n            eventListenerPairs.forEach(([queryList, listener]) =>\n                removeMediaQueryListener(queryList, listener),\n            );\n        };\n    }, [createListener, hasMounted]);\n\n    return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","isXlDevice","xl","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","Object","entries","map","key","rule","getInitialMediaQueryMatch","forEach","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"0MASQA,WAAAA,GAAeC,EAEjBC,EAAuBF,GACzBG,SAASH,EAAWI,QAAQ,KAAM,KAEhCC,EAAiD,CACnDC,cAAe,eACXJ,EAAoBF,EAAWO,QAAU,OAE7CC,eAAgB,eAAeR,EAAWO,2BACtCL,EAAoBF,EAAWS,OAAS,OAE5CC,cAAe,eAAeV,EAAWS,uFAGzCE,WAAY,eAAeX,EAAWY,MACtCC,WAAY,0BACZC,YAAa,4BAGXC,EAAgBC,KAClBC,KACiB,gBAAbD,GAA2C,eAAbA,EACxBE,aAAWC,YACXD,EAAAA,WAAWE,WACrBJ,SAAAA,sBAOqB,KACrB,MAAOK,EAAYC,GAAiBC,YAAS,IAEtCC,EAAQC,GAAkBC,EAAAA,WAAWC,EAAAA,QAAS,CACjDrB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfC,YAAY,EACZG,aAAa,EACbD,YAAY,IAGhBe,EAAAA,WAAU,KACNN,GAAc,GACPO,OAAAC,QAAQzB,GACV0B,KAAI,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAA0BA,0BAAAD,MACrDE,SAAQ,EAAEH,EAAKI,MACRA,GACeX,EAAAV,EAAaiB,GAAyB,GAE5D,GACN,IAEH,MAAMK,EAAiBC,EAAAA,aAClBN,GAA4BO,IACzBC,uBAAsB,KACdD,EAAEE,SACahB,EAAAV,EAAaiB,GAAI,GAEvC,GAEL,IAGJJ,OAAAA,EAAAA,WAAU,KACN,IAAKP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEG,OAAAf,OAAAC,QAAQzB,GAAa8B,SAAQ,EAAEH,EAAKC,MACjC,MAAAY,EAAYH,OAAOC,WAAWV,GAC9Ba,EAAWT,EAAeL,GAChCY,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,wBAAsBH,EAAWC,EAAQ,IAGtC,KACgBF,EAAAT,SAAQ,EAAEU,EAAWC,KACpCG,EAAAA,yBAAyBJ,EAAWC,IAAQ,CAChD,GAEL,CAACT,EAAgBhB,IAEb,IAAKG"}

package/build/es/components/chip/Chip.d.ts

@@ -0,0 +1,14 @@
+import { FC, HTMLAttributes } from 'react';
+type Size = "small" | "large";
+export type ChipVariant = {
+    variant: "input";
+    selected?: never;
+    size?: Size;
+} | {
+    variant: "filter";
+    selected?: boolean;
+    size?: Size;
+};
+export type ChipProps = ChipVariant & HTMLAttributes<HTMLButtonElement>;
+export declare const Chip: FC<ChipProps>;
+export {};

package/build/es/components/chip/Chip.js

@@ -0,0 +1,2 @@
+import{jsxs as l,jsx as s}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{CheckIcon as c}from"../icon/icons/CheckIcon.js";import{CloseIcon as a}from"../icon/icons/CloseIcon.js";const o=({className:o,variant:e,onClick:t,children:n,selected:r,size:m="small",...p})=>l("button",{className:i("jkl-chip",{"jkl-chip--input":"input"===e,"jkl-chip--filter":"filter"===e,"jkl-chip--small":"small"===m,"jkl-chip--large":"large"===m},o),onClick:t,"aria-pressed":r,...p,children:[n,"filter"===e&&r&&s(c,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-check-icon"}),"input"===e&&s(a,{className:"jkl-chip__icon lol",variant:"small","data-testid":"jkl-close-icon"})]});export{o as Chip};
+//# sourceMappingURL=Chip.js.map

package/build/es/components/chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../../src/components/chip/Chip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, HTMLAttributes } from \"react\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\n\ntype Size = \"small\" | \"large\";\n\nexport type ChipVariant =\n    | {\n          variant: \"input\";\n          selected?: never;\n          size?: Size;\n      }\n    | {\n          variant: \"filter\";\n          selected?: boolean;\n          size?: Size;\n      };\n\nexport type ChipProps = ChipVariant & HTMLAttributes<HTMLButtonElement>;\n\nexport const Chip: FC<ChipProps> = ({\n    className,\n    variant,\n    onClick,\n    children,\n    selected,\n    size = \"small\",\n    ...rest\n}) => {\n    return (\n        <button\n            className={clsx(\n                \"jkl-chip\",\n                {\n                    \"jkl-chip--input\": variant === \"input\",\n                    \"jkl-chip--filter\": variant === \"filter\",\n                    \"jkl-chip--small\": size === \"small\",\n                    \"jkl-chip--large\": size === \"large\",\n                },\n                className,\n            )}\n            onClick={onClick}\n            aria-pressed={selected}\n            {...rest}\n        >\n            {children}\n            {variant === \"filter\" && selected && (\n                <CheckIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-check-icon\"\n                />\n            )}\n            {variant === \"input\" && (\n                <CloseIcon\n                    className=\"jkl-chip__icon lol\"\n                    variant=\"small\"\n                    data-testid=\"jkl-close-icon\"\n                />\n            )}\n        </button>\n    );\n};\n"],"names":["Chip","className","variant","onClick","children","selected","size","rest","jsxs","clsx","jsx","CheckIcon","CloseIcon"],"mappings":"8MAqBO,MAAMA,EAAsB,EAC/BC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EAAO,WACJC,KAGCC,EAAC,SAAA,CACGP,UAAWQ,EACP,WACA,CACI,kBAA+B,UAAZP,EACnB,mBAAgC,WAAZA,EACpB,kBAA4B,UAATI,EACnB,kBAA4B,UAATA,GAEvBL,GAEJE,QAAAA,EACA,eAAcE,KACVE,EAEHH,SAAA,CAAAA,EACY,WAAZF,GAAwBG,GACrBK,EAACC,EAAA,CACGV,UAAU,iBACVC,QAAQ,QACR,cAAY,mBAGP,UAAZA,GACGQ,EAACE,EAAA,CACGX,UAAU,qBACVC,QAAQ,QACR,cAAY"}

package/build/es/components/chip/index.d.ts

@@ -0,0 +1 @@
+export { Chip, type ChipProps } from './Chip.js';

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

@@ -0,0 +1,2 @@
+import{Chip as p}from"./Chip.js";export{p as Chip};
+//# sourceMappingURL=index.js.map

package/build/es/components/chip/index.js.map

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

package/build/es/hooks/useScreen/useScreen.js

@@ -1,2 +1,2 @@
-import{useState as e,useReducer as i,useEffect as a,useCallback as t}from"react";import r from"../../core/tokens.js";import{getInitialMediaQueryMatch as s,addMediaQueryListener as n,removeMediaQueryListener as c}from"../mediaQueryUtils.js";import{reducer as o,ActionType as m}from"./state.js";const{breakpoint:d}=r,p=e=>parseInt(e.replace("px","")),u={isSmallDevice:`(max-width: ${p(d.medium)-1}px))`,isMediumDevice:`(min-width: ${d.medium}) and (max-width: ${p(d.large)-1}px)`,isLargeDevice:`(min-width: ${d.large}) and (max-width: ${p(d.xl)-1}px)`,isXlDevice:`(min-width: ${d.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},l=e=>({type:"isLandscape"===e||"isPortrait"===e?m.orientation:m.deviceSize,property:e}),h=()=>{const[r,m]=e(!1),[d,p]=i(o,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});a((()=>{m(!0),Object.entries(u).map((([e,i])=>[e,s(i)])).forEach((([e,i])=>{i&&p(l(e))}))}),[]);const h=t((e=>i=>{requestAnimationFrame((()=>{i.matches&&p(l(e))}))}),[]);return a((()=>{if(!r||!window.matchMedia)return;const e=[];return Object.entries(u).forEach((([i,a])=>{const t=window.matchMedia(a),r=h(i);e.push([t,r]),n(t,r)})),()=>{e.forEach((([e,i])=>c(e,i)))}}),[h,r]),{...d}};export{h as useScreen};
+import{useState as e,useReducer as i,useEffect as a,useCallback as t}from"react";import r from"../../core/tokens.js";import{getInitialMediaQueryMatch as s,addMediaQueryListener as n,removeMediaQueryListener as o}from"../mediaQueryUtils.js";import{reducer as c,ActionType as m}from"./state.js";const{breakpoint:d}=r,p=e=>parseInt(e.replace("px","")),u={isSmallDevice:`(max-width: ${p(d.medium)-1}px)`,isMediumDevice:`(min-width: ${d.medium}) and (max-width: ${p(d.large)-1}px)`,isLargeDevice:`(min-width: ${d.large}) and (max-width: $a{\n        breakpointsAsNumber(breakpoint.xl) - 1\n    }px)`,isXlDevice:`(min-width: ${d.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},l=e=>({type:"isLandscape"===e||"isPortrait"===e?m.orientation:m.deviceSize,property:e}),h=()=>{const[r,m]=e(!1),[d,p]=i(c,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});a((()=>{m(!0),Object.entries(u).map((([e,i])=>[e,s(i)])).forEach((([e,i])=>{i&&p(l(e))}))}),[]);const h=t((e=>i=>{requestAnimationFrame((()=>{i.matches&&p(l(e))}))}),[]);return a((()=>{if(!r||!window.matchMedia)return;const e=[];return Object.entries(u).forEach((([i,a])=>{const t=window.matchMedia(a),r=h(i);e.push([t,r]),n(t,r)})),()=>{e.forEach((([e,i])=>o(e,i)))}}),[h,r]),{...d}};export{h as useScreen};
 //# sourceMappingURL=useScreen.js.map

package/build/es/hooks/useScreen/useScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScreen.js","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport { tokens } from \"../../core/index.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport { ScreenAction, ActionType, reducer, ScreenState } from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n    parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n    isSmallDevice: `(max-width: ${\n        breakpointsAsNumber(breakpoint.medium) - 1\n    }px))`,\n    isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.large) - 1\n    }px)`,\n    isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.xl) - 1\n    }px)`,\n    isXlDevice: `(min-width: ${breakpoint.xl})`,\n    isPortrait: \"(orientation: portrait)\",\n    isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n    type:\n        property === \"isLandscape\" || property === \"isPortrait\"\n            ? ActionType.orientation\n            : ActionType.deviceSize,\n    property,\n});\n\n/**\n * Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [device, deviceDispatch] = useReducer(reducer, {\n        isSmallDevice: false,\n        isMediumDevice: false,\n        isLargeDevice: false,\n        isXlDevice: false,\n        isLandscape: false,\n        isPortrait: false,\n    });\n\n    useEffect(() => {\n        setHasMounted(true);\n        Object.entries(MEDIA_RULES)\n            .map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)])\n            .forEach(([key, value]) => {\n                if (value) {\n                    deviceDispatch(createAction(key as keyof ScreenState));\n                }\n            });\n    }, []);\n\n    const createListener = useCallback(\n        (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n            requestAnimationFrame(() => {\n                if (e.matches) {\n                    deviceDispatch(createAction(key));\n                }\n            });\n        },\n        [],\n    );\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const eventListenerPairs: Array<\n            [MediaQueryList, (e: MediaQueryListEvent) => void]\n        > = [];\n\n        Object.entries(MEDIA_RULES).forEach(([key, rule]) => {\n            const queryList = window.matchMedia(rule);\n            const listener = createListener(key as keyof ScreenState);\n            eventListenerPairs.push([queryList, listener]);\n            addMediaQueryListener(queryList, listener);\n        });\n\n        return () => {\n            eventListenerPairs.forEach(([queryList, listener]) =>\n                removeMediaQueryListener(queryList, listener),\n            );\n        };\n    }, [createListener, hasMounted]);\n\n    return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","xl","isXlDevice","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","useScreen","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","Object","entries","map","key","rule","getInitialMediaQueryMatch","forEach","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"qSASA,MAAQA,WAAAA,GAAeC,EAEjBC,EAAuBF,GACzBG,SAASH,EAAWI,QAAQ,KAAM,KAEhCC,EAAiD,CACnDC,cAAe,eACXJ,EAAoBF,EAAWO,QAAU,QAE7CC,eAAgB,eAAeR,EAAWO,2BACtCL,EAAoBF,EAAWS,OAAS,OAE5CC,cAAe,eAAeV,EAAWS,0BACrCP,EAAoBF,EAAWW,IAAM,OAEzCC,WAAY,eAAeZ,EAAWW,MACtCE,WAAY,0BACZC,YAAa,4BAGXC,EAAgBC,IAA+C,CACjEC,KACiB,gBAAbD,GAA2C,eAAbA,EACxBE,EAAWC,YACXD,EAAWE,WACrBJ,SAAAA,IAOSK,EAAY,KACrB,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCC,EAAQC,GAAkBC,EAAWC,EAAS,CACjDtB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfE,YAAY,EACZE,aAAa,EACbD,YAAY,IAGhBgB,GAAU,KACNN,GAAc,GACPO,OAAAC,QAAQ1B,GACV2B,KAAI,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAA0BD,MACrDE,SAAQ,EAAEH,EAAKI,MACRA,GACeX,EAAAX,EAAakB,GAAyB,GAE5D,GACN,IAEH,MAAMK,EAAiBC,GAClBN,GAA4BO,IACzBC,uBAAsB,KACdD,EAAEE,SACahB,EAAAX,EAAakB,GAAI,GAEvC,GAEL,IAGJ,OAAAJ,GAAU,KACF,IAACP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEG,OAAAf,OAAAC,QAAQ1B,GAAa+B,SAAQ,EAAEH,EAAKC,MACjC,MAAAY,EAAYH,OAAOC,WAAWV,GAC9Ba,EAAWT,EAAeL,GAChCY,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,EAAsBH,EAAWC,EAAQ,IAGtC,KACgBF,EAAAT,SAAQ,EAAEU,EAAWC,KACpCG,EAAyBJ,EAAWC,IAAQ,CAChD,GAEL,CAACT,EAAgBhB,IAEb,IAAKG"}
+{"version":3,"file":"useScreen.js","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport { tokens } from \"../../core/index.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport { ScreenAction, ActionType, reducer, ScreenState } from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n    parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n    isSmallDevice: `(max-width: ${\n        breakpointsAsNumber(breakpoint.medium) - 1\n    }px)`,\n    isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.large) - 1\n    }px)`,\n    isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: $a{\n        breakpointsAsNumber(breakpoint.xl) - 1\n    }px)`,\n    isXlDevice: `(min-width: ${breakpoint.xl})`,\n    isPortrait: \"(orientation: portrait)\",\n    isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n    type:\n        property === \"isLandscape\" || property === \"isPortrait\"\n            ? ActionType.orientation\n            : ActionType.deviceSize,\n    property,\n});\n\n/**\n * Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [device, deviceDispatch] = useReducer(reducer, {\n        isSmallDevice: false,\n        isMediumDevice: false,\n        isLargeDevice: false,\n        isXlDevice: false,\n        isLandscape: false,\n        isPortrait: false,\n    });\n\n    useEffect(() => {\n        setHasMounted(true);\n        Object.entries(MEDIA_RULES)\n            .map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)])\n            .forEach(([key, value]) => {\n                if (value) {\n                    deviceDispatch(createAction(key as keyof ScreenState));\n                }\n            });\n    }, []);\n\n    const createListener = useCallback(\n        (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n            requestAnimationFrame(() => {\n                if (e.matches) {\n                    deviceDispatch(createAction(key));\n                }\n            });\n        },\n        [],\n    );\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const eventListenerPairs: Array<\n            [MediaQueryList, (e: MediaQueryListEvent) => void]\n        > = [];\n\n        Object.entries(MEDIA_RULES).forEach(([key, rule]) => {\n            const queryList = window.matchMedia(rule);\n            const listener = createListener(key as keyof ScreenState);\n            eventListenerPairs.push([queryList, listener]);\n            addMediaQueryListener(queryList, listener);\n        });\n\n        return () => {\n            eventListenerPairs.forEach(([queryList, listener]) =>\n                removeMediaQueryListener(queryList, listener),\n            );\n        };\n    }, [createListener, hasMounted]);\n\n    return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","isXlDevice","xl","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","useScreen","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","Object","entries","map","key","rule","getInitialMediaQueryMatch","forEach","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"qSASA,MAAQA,WAAAA,GAAeC,EAEjBC,EAAuBF,GACzBG,SAASH,EAAWI,QAAQ,KAAM,KAEhCC,EAAiD,CACnDC,cAAe,eACXJ,EAAoBF,EAAWO,QAAU,OAE7CC,eAAgB,eAAeR,EAAWO,2BACtCL,EAAoBF,EAAWS,OAAS,OAE5CC,cAAe,eAAeV,EAAWS,uFAGzCE,WAAY,eAAeX,EAAWY,MACtCC,WAAY,0BACZC,YAAa,4BAGXC,EAAgBC,IAA+C,CACjEC,KACiB,gBAAbD,GAA2C,eAAbA,EACxBE,EAAWC,YACXD,EAAWE,WACrBJ,SAAAA,IAOSK,EAAY,KACrB,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCC,EAAQC,GAAkBC,EAAWC,EAAS,CACjDtB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfC,YAAY,EACZG,aAAa,EACbD,YAAY,IAGhBgB,GAAU,KACNN,GAAc,GACPO,OAAAC,QAAQ1B,GACV2B,KAAI,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAA0BD,MACrDE,SAAQ,EAAEH,EAAKI,MACRA,GACeX,EAAAX,EAAakB,GAAyB,GAE5D,GACN,IAEH,MAAMK,EAAiBC,GAClBN,GAA4BO,IACzBC,uBAAsB,KACdD,EAAEE,SACahB,EAAAX,EAAakB,GAAI,GAEvC,GAEL,IAGJ,OAAAJ,GAAU,KACF,IAACP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEG,OAAAf,OAAAC,QAAQ1B,GAAa+B,SAAQ,EAAEH,EAAKC,MACjC,MAAAY,EAAYH,OAAOC,WAAWV,GAC9Ba,EAAWT,EAAeL,GAChCY,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,EAAsBH,EAAWC,EAAQ,IAGtC,KACgBF,EAAAT,SAAQ,EAAEU,EAAWC,KACpCG,EAAyBJ,EAAWC,IAAQ,CAChD,GAEL,CAACT,EAAgBhB,IAEb,IAAKG"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.31.5",
+    "version": "0.32.1",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -482,6 +482,16 @@
                 "types": "./build/cjs/components/tooltip/index.d.cts",
                 "default": "./build/cjs/components/tooltip/index.cjs"
             }
+        },
+        "./components/chip": {
+            "import": {
+                "types": "./build/es/components/chip/index.d.ts",
+                "default": "./build/es/components/chip/index.js"
+            },
+            "require": {
+                "types": "./build/cjs/components/chip/index.d.cts",
+                "default": "./build/cjs/components/chip/index.cjs"
+            }
         }
     },
     "scripts": {
@@ -546,5 +556,5 @@
             "@babel/preset-react"
         ]
     },
-    "gitHead": "37de12c1fcb081ee9c99fe8a06ff3f47ba4a62af"
+    "gitHead": "f53c356e16a68f00df02f201808822b0fbcf4923"
 }

package/styles/components/button/button.css

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

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

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

package/styles/components/checkbox/checkbox.css

@@ -32,7 +32,7 @@
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-uug8u9k {
+@keyframes jkl-checkbox-checked-urnrgnl {
   0% {
     width: 0;
     height: 0;
@@ -46,7 +46,7 @@
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-uug8ua8 {
+@keyframes jkl-checkbox-indeterminate-urnrgo4 {
   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-uug8u9k 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-urnrgnl 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-uug8ua8 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-urnrgo4 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

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

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

package/styles/components/chip/_index.scss

@@ -0,0 +1,3 @@
+@forward "chip";
+
+@use "../icon";

package/styles/components/chip/chip.css

@@ -0,0 +1,105 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ */
+.jkl .jkl-chip[data-layout-density=compact],
+.jkl .jkl-chip[data-density=compact],
+.jkl [data-layout-density=compact] .jkl-chip,
+.jkl [data-density=compact] .jkl-chip,
+.jkl[data-layout-density=compact] .jkl-chip,
+.jkl[data-density=compact] .jkl-chip {
+  --padding-inline-s: 0.5rem;
+  --padding-inline-l: 0.75rem;
+  --padding-icon-s: 0.25rem;
+  --padding-icon-l: 0.5rem;
+  --height-l: 2rem;
+  --height-s: 1.5rem;
+  --gap-s: 0.125rem;
+  --gap-l: 0.25rem;
+}
+
+.jkl .jkl-chip,
+.jkl .jkl-chip[data-layout-density=comfortable],
+.jkl .jkl-chip[data-density=comfortable],
+.jkl [data-layout-density=comfortable] .jkl-chip,
+.jkl [data-density=comfortable] .jkl-chip,
+.jkl[data-layout-density=comfortable] .jkl-chip,
+.jkl[data-density=comfortable] .jkl-chip {
+  --padding-inline-s: 0.75rem;
+  --padding-inline-l: 1rem;
+  --padding-icon-s: 0.5rem;
+  --padding-icon-l: 0.75rem;
+  --height-l: 2.5rem;
+  --height-s: 2rem;
+  --gap-s: 0.25rem;
+  --gap-l: 0.5rem;
+}
+
+.jkl-chip {
+  --text-color: var(--jkl-color-text-default);
+  --border-color: var(--jkl-color-border-separator);
+  --background-color: transparent;
+  --border-width: 0.0625rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  --jkl-icon-weight: 500;
+  --jkl-icon-size: 1.25rem;
+  --jkl-icon-opsz: 20;
+  cursor: pointer;
+  position: relative;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: 99999px;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: var(--gap, var(--gap-s));
+  padding: 0 var(--padding-inline, var(--padding-inline-s));
+  height: var(--height, var(--height-s));
+}
+@media screen and (forced-colors: active) {
+  .jkl-chip {
+    border: 2px none CanvasText;
+    border-bottom-style: dotted;
+  }
+}
+.jkl-chip::after {
+  content: "";
+  opacity: 0;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--text-color);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: opacity;
+}
+.jkl-chip:focus-visible {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+.jkl-chip:hover::after {
+  opacity: 0.15;
+}
+.jkl-chip--filter[aria-pressed=true] {
+  --background-color: var(--jkl-color-background-action);
+  --text-color: var(--jkl-color-text-on-action);
+  --border-color: var(--text-color);
+}
+.jkl-chip--small {
+  --padding-inline: var(--padding-inline-s);
+  --gap: var(--gap-s);
+  --padding-icon: var(--padding-icon-s);
+  --height: var(--height-s);
+}
+.jkl-chip--large {
+  --padding-inline: var(--padding-inline-l);
+  --gap: var(--gap-l);
+  --padding-icon: var(--padding-icon-l);
+  --height: var(--height-l);
+}
+.jkl-chip:has(.jkl-icon) {
+  padding-inline-end: var(--padding-icon);
+}

package/styles/components/chip/chip.min.css

@@ -0,0 +1 @@
+.jkl .jkl-chip[data-density=compact],.jkl .jkl-chip[data-layout-density=compact],.jkl [data-density=compact] .jkl-chip,.jkl [data-layout-density=compact] .jkl-chip,.jkl[data-density=compact] .jkl-chip,.jkl[data-layout-density=compact] .jkl-chip{--padding-inline-s:0.5rem;--padding-inline-l:0.75rem;--padding-icon-s:0.25rem;--padding-icon-l:0.5rem;--height-l:2rem;--height-s:1.5rem;--gap-s:0.125rem;--gap-l:0.25rem}.jkl .jkl-chip,.jkl .jkl-chip[data-density=comfortable],.jkl .jkl-chip[data-layout-density=comfortable],.jkl [data-density=comfortable] .jkl-chip,.jkl [data-layout-density=comfortable] .jkl-chip,.jkl[data-density=comfortable] .jkl-chip,.jkl[data-layout-density=comfortable] .jkl-chip{--padding-inline-s:0.75rem;--padding-inline-l:1rem;--padding-icon-s:0.5rem;--padding-icon-l:0.75rem;--height-l:2.5rem;--height-s:2rem;--gap-s:0.25rem;--gap-l:0.5rem}.jkl-chip{--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-separator);--background-color:transparent;--border-width:0.0625rem;font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:500;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;align-items:center;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:99999px;color:var(--text-color);cursor:pointer;display:inline-flex;gap:var(--gap,var(--gap-s));height:var(--height,var(--height-s));padding:0 var(--padding-inline,var(--padding-inline-s));position:relative;white-space:nowrap}@media screen and (forced-colors:active){.jkl-chip{border:2px CanvasText;border-style:none none dotted}}.jkl-chip:after{background-color:var(--text-color);border-radius:inherit;content:"";inset:0;opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-chip:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-chip:hover:after{opacity:.15}.jkl-chip--filter[aria-pressed=true]{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action);--border-color:var(--text-color)}.jkl-chip--small{--padding-inline:var(--padding-inline-s);--gap:var(--gap-s);--padding-icon:var(--padding-icon-s);--height:var(--height-s)}.jkl-chip--large{--padding-inline:var(--padding-inline-l);--gap:var(--gap-l);--padding-icon:var(--padding-icon-l);--height:var(--height-l)}.jkl-chip:has(.jkl-icon){padding-inline-end:var(--padding-icon)}

package/styles/components/chip/chip.scss

@@ -0,0 +1,96 @@
+@charset "UTF-8";
+@use "../../core/jkl";
+
+@include jkl.compact-density(".jkl-chip") {
+    --padding-inline-s: #{jkl.$spacing-8};
+    --padding-inline-l: #{jkl.$spacing-12};
+    --padding-icon-s: #{jkl.$spacing-4};
+    --padding-icon-l: #{jkl.$spacing-8};
+    --height-l: #{jkl.$spacing-32};
+    --height-s: #{jkl.$spacing-24};
+    --gap-s: #{jkl.$spacing-2};
+    --gap-l: #{jkl.$spacing-4};
+}
+
+@include jkl.comfortable-density(".jkl-chip") {
+    --padding-inline-s: #{jkl.$spacing-12};
+    --padding-inline-l: #{jkl.$spacing-16};
+    --padding-icon-s: #{jkl.$spacing-8};
+    --padding-icon-l: #{jkl.$spacing-12};
+    --height-l: #{jkl.$spacing-40};
+    --height-s: #{jkl.$spacing-32};
+    --gap-s: #{jkl.$spacing-4};
+    --gap-l: #{jkl.$spacing-8};
+}
+
+.jkl-chip {
+    --text-color: var(--jkl-color-text-default);
+    --border-color: var(--jkl-color-border-separator);
+    --background-color: transparent;
+    --border-width: #{jkl.rem(1px)};
+
+    @include jkl.text-style("heading-5");
+    cursor: pointer;
+    position: relative;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    border: var(--border-width) solid var(--border-color);
+    border-radius: 99999px;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    gap: var(--gap, var(--gap-s));
+    padding: 0 var(--padding-inline, var(--padding-inline-s));
+    height: var(--height, var(--height-s));
+
+    @include jkl.forced-colors-mode {
+        border: 2px none CanvasText;
+        border-bottom-style: dotted;
+    }
+
+    &::after {
+        content: "";
+        opacity: 0;
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background-color: var(--text-color);
+        @include jkl.motion("standard", "productive", opacity);
+    }
+
+    &:focus-visible {
+        @include jkl.focus-outline;
+    }
+
+    &:hover {
+        &::after {
+            opacity: 0.15;
+        }
+    }
+
+    &--filter {
+        &[aria-pressed="true"] {
+            --background-color: var(--jkl-color-background-action);
+            --text-color: var(--jkl-color-text-on-action);
+            --border-color: var(--text-color);
+        }
+    }
+
+    &--small {
+        --padding-inline: var(--padding-inline-s);
+        --gap: var(--gap-s);
+        --padding-icon: var(--padding-icon-s);
+        --height: var(--height-s);
+    }
+
+    &--large {
+        --padding-inline: var(--padding-inline-l);
+        --gap: var(--gap-l);
+        --padding-icon: var(--padding-icon-l);
+        --height: var(--height-l);
+    }
+
+    &:has(.jkl-icon) {
+        padding-inline-end: var(--padding-icon);
+    }
+}

package/styles/components/feedback/feedback.css

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible),.jkl-input-panel:hover{--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-separator-hover)}.jkl-input-panel:has(:checked){--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-action);--background-color:var(--jkl-color-background-container-high)}@keyframes jkl-checkbox-checked-u0cq8ep{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.jkl-checkbox-panel{--checkbox-background-color:transparent;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-u0cq8ep .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(--jkl-color-background-alert-error);--checkbox-check-color:var(--jkl-color-text-on-alert)}
+.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible),.jkl-input-panel:hover{--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-separator-hover)}.jkl-input-panel:has(:checked){--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-action);--background-color:var(--jkl-color-background-container-high)}@keyframes jkl-checkbox-checked-ula108g{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.jkl-checkbox-panel{--checkbox-background-color:transparent;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-ula108g .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(--jkl-color-background-alert-error);--checkbox-check-color:var(--jkl-color-text-on-alert)}