@fremtind/jokul 3.3.0 → 3.4.0

package/build/es/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, type MouseEventHandler } from \"react\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TableHeaderProps } from \"./types.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n    (props, ref) => {\n        const {\n            bold = true,\n            density,\n            sortable,\n            className,\n            scope = \"col\",\n            srOnly,\n            align = \"left\",\n            children,\n            onClick,\n            ...rest\n        } = props;\n        const { density: contextDensity } = useTableContext();\n\n        const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n            onClick?.(e);\n            sortable?.onClick();\n        };\n\n        return (\n            <th\n                className={clsx(\"jkl-table-header\", className, {\n                    [\"jkl-table-header--bold\"]: bold,\n                    [\"jkl-table-header--align-right\"]: align === \"right\",\n                    [\"jkl-table-header--align-center\"]: align === \"center\",\n                    [\"jkl-table-header--sr-only\"]: srOnly,\n                    [\"jkl-table-header--sortable\"]:\n                        typeof sortable !== \"undefined\",\n                })}\n                scope={scope}\n                onClick={handleClick}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                {children}\n                {sortable && (\n                    <div\n                        className={clsx(\"jkl-table-header__arrows\", {\n                            \"jkl-table-header__arrows--active\": Boolean(\n                                sortable.direction,\n                            ),\n                        })}\n                    >\n                        {sortable.direction && (\n                            <ArrowVerticalAnimated\n                                pointingDown={sortable.direction === \"desc\"}\n                                bold\n                            />\n                        )}\n                    </div>\n                )}\n            </th>\n        );\n    },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"+QAQA,MAAMA,EAAcC,EAChB,CAACC,EAAOC,KACJ,MACIC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,IAOpC,OACIC,EAAC,KAAA,CACGT,UAAWU,EAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1DN,IAAUM,GACVZ,GAAUM,cAeFC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAC,MAAA,CACGZ,UAAWU,EAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAACE,EAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,WAUpCJ,EAAYuB,YAAc"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, type MouseEventHandler } from \"react\";\nimport { ChevronDownIcon, ChevronUpIcon, Icon } from \"../icon/index.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TableHeaderProps } from \"./types.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\" | \"none\";\n\nconst SortableArrows = ({ direction }: { direction: TableSortDirection }) => {\n    if (direction === \"desc\") return <ChevronDownIcon variant=\"inherit\" />;\n    if (direction === \"asc\") return <ChevronUpIcon variant=\"inherit\" />;\n\n    return <Icon variant=\"inherit\">unfold_more</Icon>;\n};\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n    (props, ref) => {\n        const {\n            bold = true,\n            density,\n            sortable,\n            className,\n            scope = \"col\",\n            srOnly,\n            align = \"left\",\n            children,\n            onClick,\n            ...rest\n        } = props;\n        const { density: contextDensity } = useTableContext();\n\n        const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n            onClick?.(e);\n            sortable?.onClick();\n        };\n\n        return (\n            <th\n                className={clsx(\"jkl-table-header\", className, {\n                    \"jkl-table-header--bold\": bold,\n                    \"jkl-table-header--align-right\": align === \"right\",\n                    \"jkl-table-header--align-center\": align === \"center\",\n                    \"jkl-table-header--sr-only\": srOnly,\n                    \"jkl-table-header--sortable\":\n                        typeof sortable !== \"undefined\",\n                })}\n                scope={scope}\n                onClick={handleClick}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                <div className=\"jkl-table-header__arrows\">\n                    {children}\n                    {sortable && (\n                        <SortableArrows direction={sortable.direction} />\n                    )}\n                </div>\n            </th>\n        );\n    },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["SortableArrows","direction","jsx","ChevronDownIcon","variant","ChevronUpIcon","Icon","children","TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","onClick","rest","contextDensity","useTableContext","clsx","e","jsxs","displayName"],"mappings":"kmDAQA,MAAMA,EAAiB,EAAGC,UAAAA,KACJ,SAAdA,EAA6BC,EAACC,EAAA,CAAgBC,QAAQ,YACxC,QAAdH,EAA4BC,EAACG,EAAA,CAAcD,QAAQ,YAEhDF,EAACI,EAAA,CAAKF,QAAQ,UAAUG,SAAA,gBAG7BC,EAAcC,EAChB,CAACC,EAAOC,KACJ,MACIC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRX,SAAAA,EACAY,QAAAA,KACGC,GACHV,GACIG,QAASQ,GAAmBC,IAOpC,OACIpB,EAAC,KAAA,CACGa,UAAWQ,EAAK,mBAAoBR,EAAW,CAC3C,yBAA0BH,EAC1B,gCAA2C,UAAVM,EACjC,iCAA4C,WAAVA,EAClC,4BAA6BD,EAC7B,oCACWH,EAAa,MAE5BE,MAAAA,EACAG,QAhBsDK,IAC1DL,IAAUK,GACVV,GAAUK,cAeFC,EACJ,eAAcP,GAAWQ,EACzBV,IAAAA,EAEAJ,SAAAkB,EAAC,MAAA,CAAIV,UAAU,2BACVR,SAAA,CAAAA,EACAO,GACGZ,EAACF,EAAA,CAAeC,UAAWa,EAASb,mBAQ5DO,EAAYkB,YAAc"}

package/build/es/components/table/utils.d.ts

@@ -1,10 +1,10 @@
 import { TableSortDirection } from './TableHeader.js';
 export type TableSortProps = ReturnType<ReturnType<typeof useSortableTableHeader>["getSortProps"]>["sortable"];
 export declare const useSortableTableHeader: (activeSortKey: string, activeSortDirection: TableSortDirection, onChange: (newSortKey: string, newSortDirection: TableSortDirection) => void) => {
-    getSortProps: (sortKey: string) => {
+    getSortProps: (columnKey: string) => {
         sortable: {
             onClick: () => void;
-            direction: TableSortDirection | undefined;
+            direction: TableSortDirection;
         };
     };
 };

package/build/es/components/table/utils.js

@@ -1,2 +1,2 @@
-const e=(e,o,s)=>{const t=t=>{const r=(s=>s===e&&"desc"===o?"asc":"desc")(t);s(t,r)};return{getSortProps:s=>({sortable:{onClick:()=>t(s),direction:e===s?o:void 0}})}};export{e as useSortableTableHeader};
+const e=(e,o,n)=>({getSortProps:s=>{const c=e===s?o:"none",r={asc:"desc",desc:"none",none:"asc"}[c]??"asc";return{sortable:{onClick:()=>n(s,r),direction:c}}}});export{e as useSortableTableHeader};
 //# sourceMappingURL=utils.js.map

package/build/es/components/table/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import type { TableSortDirection } from \"./TableHeader.js\";\n\nexport type TableSortProps = ReturnType<\n    ReturnType<typeof useSortableTableHeader>[\"getSortProps\"]\n>[\"sortable\"];\n\nexport const useSortableTableHeader = (\n    activeSortKey: string,\n    activeSortDirection: TableSortDirection,\n    onChange: (\n        newSortKey: string,\n        newSortDirection: TableSortDirection,\n    ) => void,\n) => {\n    const calculateNewSortParameters = (\n        sortKey: string,\n    ): TableSortDirection => {\n        if (sortKey === activeSortKey && activeSortDirection === \"desc\") {\n            return \"asc\";\n        }\n\n        return \"desc\";\n    };\n\n    const handleClick = (sortKey: string) => {\n        const newSortParameters = calculateNewSortParameters(sortKey);\n        onChange(sortKey, newSortParameters);\n    };\n\n    const getSortProps = (sortKey: string) => {\n        return {\n            sortable: {\n                onClick: () => handleClick(sortKey),\n                direction:\n                    activeSortKey === sortKey ? activeSortDirection : undefined,\n            },\n        };\n    };\n\n    return {\n        getSortProps,\n    };\n};\n"],"names":["useSortableTableHeader","activeSortKey","activeSortDirection","onChange","handleClick","sortKey","newSortParameters","calculateNewSortParameters","getSortProps","sortable","onClick","direction"],"mappings":"AAMO,MAAMA,EAAyB,CAClCC,EACAC,EACAC,KAKA,MAUMC,EAAeC,IACjB,MAAMC,EAXyB,CAC/BD,GAEIA,IAAYJ,GAAyC,SAAxBC,EACtB,MAGJ,OAImBK,CAA2BF,GACrDF,EAASE,EAASC,IAatB,MAAO,CACHE,aAXkBH,IAAAA,CAEdI,SAAU,CACNC,QAAS,IAAMN,EAAYC,GAC3BM,UACIV,IAAkBI,EAAUH,OAAsB"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import type { TableSortDirection } from \"./TableHeader.js\";\n\nexport type TableSortProps = ReturnType<\n    ReturnType<typeof useSortableTableHeader>[\"getSortProps\"]\n>[\"sortable\"];\n\nexport const useSortableTableHeader = (\n    activeSortKey: string,\n    activeSortDirection: TableSortDirection,\n    onChange: (\n        newSortKey: string,\n        newSortDirection: TableSortDirection,\n    ) => void,\n) => {\n    const getSortProps = (columnKey: string) => {\n        const isCurrentSortKey = activeSortKey === columnKey;\n        const currentDirection = isCurrentSortKey\n            ? activeSortDirection\n            : \"none\";\n\n        const nextDirectionMap: Record<string, TableSortDirection> = {\n            asc: \"desc\",\n            desc: \"none\",\n            none: \"asc\",\n        };\n\n        const nextDirection = nextDirectionMap[currentDirection] ?? \"asc\";\n\n        return {\n            sortable: {\n                onClick: () => onChange(columnKey, nextDirection),\n                direction: currentDirection,\n            },\n        };\n    };\n\n    return {\n        getSortProps,\n    };\n};\n"],"names":["useSortableTableHeader","activeSortKey","activeSortDirection","onChange","getSortProps","columnKey","currentDirection","nextDirection","asc","desc","none","sortable","onClick","direction"],"mappings":"AAMO,MAAMA,EAAyB,CAClCC,EACAC,EACAC,KAAAA,CA4BIC,aAvBkBC,IAElB,MAAMC,EADmBL,IAAkBI,EAErCH,EACA,OAQAK,EANuD,CACzDC,IAAK,OACLC,KAAM,OACNC,KAAM,OAG6BJ,IAAqB,MAE5D,MAAO,CACHK,SAAU,CACNC,QAAS,IAAMT,EAASE,EAAWE,GACnCM,UAAWP"}

package/package.json

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

package/styles/components/autosuggest/autosuggest.css

@@ -1,48 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-autosuggest-text-color: #1b1917;
-    --jkl-autosuggest-menu-background-color: #fff;
-    --jkl-autosuggest-focus-color: #1b1917;
-    --jkl-autosuggest-error-text-color: #1b1917;
-    --jkl-autosuggest-error-placeholder-color: #636060;
-    --jkl-autosuggest-hover-option-color: #1b1917;
-    --jkl-autosuggest-hover-option-background-color: #e0dbd4;
-  }
-}
-[data-theme=light] {
-  --jkl-autosuggest-text-color: #1b1917;
-  --jkl-autosuggest-menu-background-color: #fff;
-  --jkl-autosuggest-focus-color: #1b1917;
-  --jkl-autosuggest-error-text-color: #1b1917;
-  --jkl-autosuggest-error-placeholder-color: #636060;
-  --jkl-autosuggest-hover-option-color: #1b1917;
-  --jkl-autosuggest-hover-option-background-color: #e0dbd4;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-autosuggest-text-color: #f9f9f9;
-    --jkl-autosuggest-menu-background-color: #000;
-    --jkl-autosuggest-focus-color: #f9f9f9;
-    --jkl-autosuggest-error-text-color: #1b1917;
-    --jkl-autosuggest-error-placeholder-color: #636060;
-    --jkl-autosuggest-hover-option-color: #f9f9f9;
-    --jkl-autosuggest-hover-option-background-color: #636060;
-  }
-}
-[data-theme=dark] {
-  --jkl-autosuggest-text-color: #f9f9f9;
-  --jkl-autosuggest-menu-background-color: #000;
-  --jkl-autosuggest-focus-color: #f9f9f9;
-  --jkl-autosuggest-error-text-color: #1b1917;
-  --jkl-autosuggest-error-placeholder-color: #636060;
-  --jkl-autosuggest-hover-option-color: #f9f9f9;
-  --jkl-autosuggest-hover-option-background-color: #636060;
-}
-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
@@ -80,27 +38,16 @@
 .jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper {
   border-radius: 0.1875rem 0.1875rem 0 0;
 }
-.jkl-autosuggest__input-group > input[aria-invalid=true] ~ .jkl-autosuggest__controller-button {
-  color: var(--jkl-autosuggest-error-placeholder-color);
-}
-.jkl-autosuggest__input-group > input[aria-invalid=true] ~ .jkl-autosuggest__controller-button:hover {
-  color: var(--jkl-autosuggest-error-text-color);
-}
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__input-group > input[aria-invalid=true] ~ .jkl-autosuggest__controller-button:focus::after {
-  box-shadow: inset 0 0 0 0.125rem var(--jkl-autosuggest-error-text-color);
-}
-
 .jkl-autosuggest__no-hits-message {
   font-size: var(--jkl-autosuggest-no-hits-message-font-size);
   padding: var(--jkl-autosuggest-option-padding);
 }
 .jkl-autosuggest__menu {
-  background-color: var(--jkl-autosuggest-menu-background-color);
-  border: 0.125rem solid var(--jkl-autosuggest-focus-color);
+  background-color: var(--jkl-color-background-container-high);
+  border: 0.125rem solid var(--jkl-color-border-input-focus);
   border-top: none;
   border-radius: 0 0 0.1875rem 0.1875rem;
   box-sizing: border-box;
-  color: var(--jkl-autosuggest-text-color);
   position: absolute;
   inset: 100% -0.0625rem auto;
   margin: 0;
@@ -124,7 +71,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__i
   display: flex;
   align-items: center;
   border: 0;
-  background-color: inherit;
+  background-color: var(--jkl-color-background-interactive);
   min-height: var(--jkl-autosuggest-option-height);
   text-align: left;
   transition-timing-function: ease;
@@ -135,6 +82,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__i
   cursor: pointer;
 }
 .jkl-autosuggest__item:focus, .jkl-autosuggest__item--active, .jkl-autosuggest__item:hover {
-  color: var(--jkl-autosuggest-hover-option-color);
-  background-color: var(--jkl-autosuggest-hover-option-background-color);
+  color: var(--jkl-color-text-default);
+  background-color: var(--jkl-color-background-interactive-hover);
 }

package/styles/components/autosuggest/autosuggest.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-autosuggest-text-color:#1b1917;--jkl-autosuggest-menu-background-color:#fff;--jkl-autosuggest-focus-color:#1b1917;--jkl-autosuggest-error-text-color:#1b1917;--jkl-autosuggest-error-placeholder-color:#636060;--jkl-autosuggest-hover-option-color:#1b1917;--jkl-autosuggest-hover-option-background-color:#e0dbd4}}[data-theme=light]{--jkl-autosuggest-text-color:#1b1917;--jkl-autosuggest-menu-background-color:#fff;--jkl-autosuggest-focus-color:#1b1917;--jkl-autosuggest-error-text-color:#1b1917;--jkl-autosuggest-error-placeholder-color:#636060;--jkl-autosuggest-hover-option-color:#1b1917;--jkl-autosuggest-hover-option-background-color:#e0dbd4}@media screen and (prefers-color-scheme:dark){:root{--jkl-autosuggest-text-color:#f9f9f9;--jkl-autosuggest-menu-background-color:#000;--jkl-autosuggest-focus-color:#f9f9f9;--jkl-autosuggest-error-text-color:#1b1917;--jkl-autosuggest-error-placeholder-color:#636060;--jkl-autosuggest-hover-option-color:#f9f9f9;--jkl-autosuggest-hover-option-background-color:#636060}}[data-theme=dark]{--jkl-autosuggest-text-color:#f9f9f9;--jkl-autosuggest-menu-background-color:#000;--jkl-autosuggest-focus-color:#f9f9f9;--jkl-autosuggest-error-text-color:#1b1917;--jkl-autosuggest-error-placeholder-color:#636060;--jkl-autosuggest-hover-option-color:#f9f9f9;--jkl-autosuggest-hover-option-background-color:#636060}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-autosuggest-item-font-size:var(--jkl-body-font-size);--jkl-autosuggest-item-line-height:var(--jkl-body-line-height);--jkl-autosuggest-item-font-weight:var(--jkl-body-font-weight);--jkl-autosuggest-menu-padding:1rem 0.5rem 0;--jkl-autosuggest-controller-button-width:auto;--jkl-autosuggest-controller-button-padding:0 0.75rem;--jkl-autosuggest-controller-button-icon-size:1.25rem;--jkl-autosuggest-option-padding:0 0.75rem;--jkl-autosuggest-option-height:3rem}[data-density=compact],[data-layout-density=compact]{--jkl-autosuggest-item-font-size:var(--jkl-small-font-size);--jkl-autosuggest-item-line-height:var(--jkl-small-line-height);--jkl-autosuggest-item-font-weight:var(--jkl-small-font-weight);--jkl-autosuggest-menu-padding:0.25rem;--jkl-autosuggest-controller-button-width:1.5rem;--jkl-autosuggest-controller-button-padding:0;--jkl-autosuggest-controller-button-icon-size:1.125rem;--jkl-autosuggest-no-hits-message-font-size:var(--jkl-small-font-size);--jkl-autosuggest-option-padding:0 0.5rem;--jkl-autosuggest-option-height:2rem}.jkl-autosuggest{align-items:flex-start;display:flex;flex-direction:column;position:relative}.jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper{border-radius:.1875rem .1875rem 0 0}.jkl-autosuggest__input-group>input[aria-invalid=true]~.jkl-autosuggest__controller-button{color:var(--jkl-autosuggest-error-placeholder-color)}.jkl-autosuggest__input-group>input[aria-invalid=true]~.jkl-autosuggest__controller-button:hover{color:var(--jkl-autosuggest-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__input-group>input[aria-invalid=true]~.jkl-autosuggest__controller-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-autosuggest-error-text-color)}.jkl-autosuggest__no-hits-message{font-size:var(--jkl-autosuggest-no-hits-message-font-size);padding:var(--jkl-autosuggest-option-padding)}.jkl-autosuggest__menu{background-color:var(--jkl-autosuggest-menu-background-color);border:.125rem solid var(--jkl-autosuggest-focus-color);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;color:var(--jkl-autosuggest-text-color);inset:100% -.0625rem auto;margin:0;max-height:60vh;overflow-y:auto;padding:0;position:absolute;width:calc(100% + .125rem);z-index:7000;-webkit-overflow-scrolling:touch}.jkl-autosuggest__item-list{list-style-type:none;margin:0;padding:0}.jkl-autosuggest__item{align-items:center;background-color:inherit;border:0;color:unset;cursor:pointer;display:flex;font-size:var(--jkl-autosuggest-item-font-size);font-weight:var(--jkl-autosuggest-item-font-weight);line-height:var(--jkl-autosuggest-item-line-height);min-height:var(--jkl-autosuggest-option-height);padding:var(--jkl-autosuggest-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease}.jkl-autosuggest__item--active,.jkl-autosuggest__item:focus,.jkl-autosuggest__item:hover{background-color:var(--jkl-autosuggest-hover-option-background-color);color:var(--jkl-autosuggest-hover-option-color)}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-autosuggest-item-font-size:var(--jkl-body-font-size);--jkl-autosuggest-item-line-height:var(--jkl-body-line-height);--jkl-autosuggest-item-font-weight:var(--jkl-body-font-weight);--jkl-autosuggest-menu-padding:1rem 0.5rem 0;--jkl-autosuggest-controller-button-width:auto;--jkl-autosuggest-controller-button-padding:0 0.75rem;--jkl-autosuggest-controller-button-icon-size:1.25rem;--jkl-autosuggest-option-padding:0 0.75rem;--jkl-autosuggest-option-height:3rem}[data-density=compact],[data-layout-density=compact]{--jkl-autosuggest-item-font-size:var(--jkl-small-font-size);--jkl-autosuggest-item-line-height:var(--jkl-small-line-height);--jkl-autosuggest-item-font-weight:var(--jkl-small-font-weight);--jkl-autosuggest-menu-padding:0.25rem;--jkl-autosuggest-controller-button-width:1.5rem;--jkl-autosuggest-controller-button-padding:0;--jkl-autosuggest-controller-button-icon-size:1.125rem;--jkl-autosuggest-no-hits-message-font-size:var(--jkl-small-font-size);--jkl-autosuggest-option-padding:0 0.5rem;--jkl-autosuggest-option-height:2rem}.jkl-autosuggest{align-items:flex-start;display:flex;flex-direction:column;position:relative}.jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper{border-radius:.1875rem .1875rem 0 0}.jkl-autosuggest__no-hits-message{font-size:var(--jkl-autosuggest-no-hits-message-font-size);padding:var(--jkl-autosuggest-option-padding)}.jkl-autosuggest__menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;inset:100% -.0625rem auto;margin:0;max-height:60vh;overflow-y:auto;padding:0;position:absolute;width:calc(100% + .125rem);z-index:7000;-webkit-overflow-scrolling:touch}.jkl-autosuggest__item-list{list-style-type:none;margin:0;padding:0}.jkl-autosuggest__item{align-items:center;background-color:var(--jkl-color-background-interactive);border:0;color:unset;cursor:pointer;display:flex;font-size:var(--jkl-autosuggest-item-font-size);font-weight:var(--jkl-autosuggest-item-font-weight);line-height:var(--jkl-autosuggest-item-line-height);min-height:var(--jkl-autosuggest-option-height);padding:var(--jkl-autosuggest-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease}.jkl-autosuggest__item--active,.jkl-autosuggest__item:focus,.jkl-autosuggest__item:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}

package/styles/components/autosuggest/autosuggest.scss

@@ -1,25 +1,5 @@
 @use "../../core/jkl";
 
-@include jkl.light-mode-variables {
-    --jkl-autosuggest-text-color: #{jkl.$color-granitt};
-    --jkl-autosuggest-menu-background-color: #{jkl.$color-hvit};
-    --jkl-autosuggest-focus-color: #{jkl.$color-granitt};
-    --jkl-autosuggest-error-text-color: #{jkl.$color-granitt};
-    --jkl-autosuggest-error-placeholder-color: #{jkl.$color-stein};
-    --jkl-autosuggest-hover-option-color: #{jkl.$color-granitt};
-    --jkl-autosuggest-hover-option-background-color: #{jkl.$color-varde};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-autosuggest-text-color: #{jkl.$color-snohvit};
-    --jkl-autosuggest-menu-background-color: #{jkl.$color-svart};
-    --jkl-autosuggest-focus-color: #{jkl.$color-snohvit};
-    --jkl-autosuggest-error-text-color: #{jkl.$color-granitt};
-    --jkl-autosuggest-error-placeholder-color: #{jkl.$color-stein};
-    --jkl-autosuggest-hover-option-color: #{jkl.$color-snohvit};
-    --jkl-autosuggest-hover-option-background-color: #{jkl.$color-stein};
-}
-
 @include jkl.comfortable-density-variables {
     @include jkl.declare-font-variables("jkl-autosuggest-item", "body");
 
@@ -53,35 +33,17 @@
         border-radius: jkl.rem(3px) jkl.rem(3px) 0 0;
     }
 
-    &__input-group > input[aria-invalid="true"] {
-        & ~ .jkl-autosuggest__controller-button {
-            color: var(--jkl-autosuggest-error-placeholder-color);
-
-            &:hover {
-                color: var(--jkl-autosuggest-error-text-color);
-            }
-
-            @include jkl.keyboard-navigation {
-                &:focus::after {
-                    box-shadow: inset 0 0 0 jkl.rem(2px)
-                        var(--jkl-autosuggest-error-text-color);
-                }
-            }
-        }
-    }
-
     &__no-hits-message {
         font-size: var(--jkl-autosuggest-no-hits-message-font-size);
         padding: var(--jkl-autosuggest-option-padding);
     }
 
     &__menu {
-        background-color: var(--jkl-autosuggest-menu-background-color);
-        border: jkl.rem(2px) solid var(--jkl-autosuggest-focus-color);
+        background-color: var(--jkl-color-background-container-high);
+        border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
         border-top: none;
         border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
         box-sizing: border-box;
-        color: var(--jkl-autosuggest-text-color);
         position: absolute;
         inset: 100% jkl.rem(-1px) auto;
         margin: 0;
@@ -105,7 +67,7 @@
         display: flex; // avoids wrapping long names "under" the focus arrow
         align-items: center;
         border: 0; // removes native styling
-        background-color: inherit;
+        background-color: var(--jkl-color-background-interactive);
         min-height: var(--jkl-autosuggest-option-height);
         text-align: left;
 
@@ -118,10 +80,8 @@
         &:focus,
         &--active,
         &:hover {
-            color: var(--jkl-autosuggest-hover-option-color);
-            background-color: var(
-                --jkl-autosuggest-hover-option-background-color
-            );
+            color: var(--jkl-color-text-default);
+            background-color: var(--jkl-color-background-interactive-hover);
         }
     }
-}
+}

package/styles/components/checkbox/checkbox.css

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

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

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

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

@@ -1,77 +1,81 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-.jkl-input-panel {
-  --outer-border-color: var(--jkl-color-border-input);
-  --outer-border-thickness: 0.0625rem;
-  --padding-inline: var(--jkl-unit-20) var(--jkl-unit-30);
-  --padding-label-block: var(--jkl-unit-25);
-  --background-color: transparent;
-  box-shadow: inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);
-  border-radius: 4px;
-  background-color: var(--background-color);
-}
-.jkl-input-panel__input {
-  opacity: 0;
-  position: absolute;
-  top: -6px;
-}
-.jkl-input-panel__label {
-  display: grid;
-  grid-template-columns: min-content 1fr max-content;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  padding-inline: var(--padding-inline);
-}
-.jkl-input-panel__main-label {
-  padding-block: 1.5rem;
-}
-.jkl-input-panel__extra-label {
-  align-self: stretch;
-}
-.jkl-input-panel__extra-label > :first-child {
-  box-sizing: content-box;
-  padding-right: 1rem;
-}
-.jkl-input-panel__extra-label--text {
-  display: flex;
-  height: 100%;
-  align-items: center;
-}
-.jkl-input-panel__content {
-  height: 0;
-  overflow: hidden;
-  padding-inline: var(--padding-inline);
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-}
-@media (min-width: 680px) {
-  .jkl-input-panel__content {
-    font-size: 1.25rem;
-    line-height: 2rem;
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+@layer components {
+  .jkl-input-panel {
+    --outer-border-color: var(--jkl-color-border-input);
+    --outer-border-thickness: 0.0625rem;
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);
+    border-radius: 4px;
+    background-color: var(--background-color);
+    display: flex;
+    flex-direction: column;
+    interpolate-size: allow-keywords;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: box-shadow;
+  }
+  .jkl-input-panel__header {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    position: relative;
+    padding: var(--jkl-spacing-s) var(--jkl-spacing-m);
+  }
+  .jkl-input-panel__header__amount {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    font-size: var(--jkl-checkbox-font-size);
+    line-height: var(--jkl-checkbox-line-height);
+    font-weight: var(--jkl-checkbox-font-weight);
+  }
+  .jkl-input-panel__header label,
+  .jkl-input-panel__header .jkl-radio-button,
+  .jkl-input-panel__header .jkl-checkbox {
+    position: unset;
+  }
+  .jkl-input-panel__header label::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  .jkl-input-panel__description {
+    height: 0;
+    overflow: hidden;
+    padding-inline: var(--jkl-spacing-m);
+    padding-block-end: var(--jkl-spacing-none);
+    line-height: initial;
+    font-size: var(--jkl-checkbox-font-size);
+    line-height: var(--jkl-checkbox-line-height);
+    font-weight: var(--jkl-checkbox-font-weight);
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: height;
+  }
+  .jkl-input-panel:has(:focus-visible) {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
+  .jkl-input-panel:has(:checked), .jkl-input-panel[data-always-open=true], .jkl-input-panel:not([data-always-open]) {
+    --background-color: var(--jkl-color-background-container-high);
+  }
+  .jkl-input-panel:has(:checked) .jkl-input-panel__description, .jkl-input-panel[data-always-open=true] .jkl-input-panel__description, .jkl-input-panel:not([data-always-open]) .jkl-input-panel__description {
+    height: auto;
+    padding-block-end: var(--jkl-spacing-s);
+  }
+  .jkl-input-panel:has(input:hover) {
+    --outer-border-color: var(--jkl-color-border-separator-hover);
+    --outer-border-thickness: 0.125rem;
+    cursor: pointer;
   }
 }
-.jkl-input-panel__content[data-alwaysopen=true], .jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content {
-  padding-bottom: 24px;
-  height: auto;
-}
-.jkl-input-panel:has(:focus-visible) {
-  outline: 3px solid var(--jkl-color-border-action);
-  outline-offset: 3px;
-}
-.jkl-input-panel:has(:checked) {
-  --background-color: var(--jkl-color-background-container-high);
-}
-.jkl-input-panel:has(label:hover) {
-  --outer-border-color: var(--jkl-color-border-separator-hover);
-  --outer-border-thickness: 0.125rem;
-}
-
 @layer jokul.components {
   :root,
   [data-layout-density=comfortable],
@@ -101,7 +105,7 @@
     --jkl-checkbox-box-size: 1.125rem;
     --jkl-checkbox-line-height: 1.5rem;
   }
-  @keyframes jkl-checkbox-checked-u7wsvk9 {
+  @keyframes jkl-checkbox-checked-ulf0oap {
     0% {
       width: 0;
       height: 0;
@@ -115,7 +119,7 @@
       height: 58%;
     }
   }
-  @keyframes jkl-checkbox-indeterminate-u7wsvkh {
+  @keyframes jkl-checkbox-indeterminate-ulf0oba {
     0% {
       width: 0;
     }
@@ -144,11 +148,11 @@
     left: calc(-0.5 * var(--jkl-checkbox-box-size));
   }
   .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-    animation: jkl-checkbox-checked-u7wsvk9 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-ulf0oap 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-u7wsvkh 150ms ease-in-out forwards;
+    animation: jkl-checkbox-indeterminate-ulf0oba 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -259,7 +263,7 @@
     --check-color: var(--jkl-color-text-on-alert);
   }
 }
-@keyframes jkl-checkbox-checked-u7wsvks {
+@keyframes jkl-checkbox-checked-ulf0obj {
   0% {
     width: 0;
     height: 0;
@@ -323,7 +327,7 @@
     }
   }
   .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-    animation: jkl-checkbox-checked-u7wsvks 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-ulf0obj 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox-panel:has([aria-invalid=true]) {

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

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

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

@@ -1,6 +1,6 @@
 @use "../../core/jkl" as jkl;
 @use "sass:string";
-@use "../../shared/input-panel/shared";
+@use "../input-panel/input-panel";
 @use "../checkbox/checkbox.scss";
 
 $_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};