@fremtind/jokul 6.1.0-next.4 → 6.1.0-next.5

package/styles/components/loader/loader.css

@@ -19,22 +19,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uptydqj;
+    animation-name: jkl-loader-left-spin-uj439iz;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uptydr0;
+    animation-name: jkl-loader-middle-spin-uj439j3;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uptydrs;
+    animation-name: jkl-loader-right-spin-uj439j8;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uptydqj {
+  @keyframes jkl-loader-left-spin-uj439iz {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -48,7 +48,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uptydr0 {
+  @keyframes jkl-loader-middle-spin-uj439j3 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -65,7 +65,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uptydrs {
+  @keyframes jkl-loader-right-spin-uj439j8 {
     0% {
       transform: rotate(40deg) scale(0);
     }

package/styles/components/loader/loader.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{display:block;transform-origin:center;background-color:currentColor;height:var(--jkl-loader-dot-size);width:var(--jkl-loader-dot-size);animation:2.5s linear infinite}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uptydqj;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uptydr0;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uptydrs}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-uptydqj{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uptydr0{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uptydrs{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}
+@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{display:block;transform-origin:center;background-color:currentColor;height:var(--jkl-loader-dot-size);width:var(--jkl-loader-dot-size);animation:2.5s linear infinite}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uj439iz;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uj439j3;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uj439j8}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-uj439iz{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uj439j3{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uj439j8{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}

package/styles/components/loader/skeleton-loader.css

@@ -26,7 +26,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-ullcsy7;
+      animation: 2s ease infinite jkl-blink-u4jj8nt;
     }
   }
   .jkl-skeleton-input {
@@ -74,10 +74,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-ullcsy7;
+      animation: 2s ease-in-out infinite jkl-blink-u4jj8nt;
     }
   }
-  @keyframes jkl-blink-ullcsy7 {
+  @keyframes jkl-blink-u4jj8nt {
     0% {
       opacity: 1;
     }

package/styles/components/loader/skeleton-loader.min.css

@@ -1 +1 @@
-@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb;-webkit-mask-position:center;mask-position:center;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep}.jkl-skeleton-element{border-radius:.125rem;background-color:var(--jkl-skeleton-element-color)}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{border:1px solid CanvasText;animation:jkl-blink-ullcsy7 2s ease infinite}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid var(--jkl-skeleton-element-color)}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-ullcsy7 2s ease-in-out infinite}}@keyframes jkl-blink-ullcsy7{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}
+@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb;-webkit-mask-position:center;mask-position:center;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep}.jkl-skeleton-element{border-radius:.125rem;background-color:var(--jkl-skeleton-element-color)}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{border:1px solid CanvasText;animation:jkl-blink-u4jj8nt 2s ease infinite}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid var(--jkl-skeleton-element-color)}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-u4jj8nt 2s ease-in-out infinite}}@keyframes jkl-blink-u4jj8nt{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}

package/styles/components/menu/_menu-item.scss

@@ -52,7 +52,7 @@
 
         &:hover,
         &:focus-visible {
-            --background-color: var(--jkl-color-background-container-accent);
+            @include jkl.hover-bg;
         }
     }
 }

package/styles/components/menu/menu.css

@@ -63,7 +63,7 @@
     flex-shrink: 0;
   }
   .jkl-menu-item:hover, .jkl-menu-item:focus-visible {
-    --background-color: var(--jkl-color-background-container-accent);
+    background-color: color-mix(in srgb, var(--background-color, transparent), var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%));
   }
 }
 @layer jokul.components {

package/styles/components/menu/menu.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-menu-item{--jkl-menu-item-height:var(--jkl-unit-60);--jkl-menu-item-padding:var(--jkl-unit-15) var(--jkl-unit-20);--background-color:transparent;background-color:var(--background-color);color:var(--jkl-color-text-default);text-decoration:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;font:var(--jkl-text-style-text-medium);display:flex;align-items:center;gap:var(--jkl-unit-10);width:100%;height:var(--jkl-menu-item-height);padding:var(--jkl-menu-item-padding);outline:0;border-style:none;outline-style:none}.jkl-menu-item:active,.jkl-menu-item:focus,.jkl-menu-item:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-menu-item{outline:revert;border-style:revert;outline-style:revert}.jkl-menu-item:active,.jkl-menu-item:focus,.jkl-menu-item:hover{outline:revert;outline-style:revert}}.jkl-menu-item__content{display:flex;gap:var(--jkl-unit-05);justify-content:flex-start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;max-width:100%}.jkl-menu-item__icon{flex-shrink:0}.jkl-menu-item__arrow,.jkl-menu-item__icon{display:flex;align-items:center}.jkl-menu-item__chevron{flex-shrink:0}.jkl-menu-item:focus-visible,.jkl-menu-item:hover{--background-color:var(--jkl-color-background-container-accent)}}@layer jokul.components{.jkl-menu-divider{width:100%;margin-block:0;border:none;border-bottom:.0625rem solid var(--jkl-color-border-subdued)}.jkl-menu{--border-color:transparent;--border-color:light-dark(transparent, var(--jkl-color-border-strong));background-color:var(--jkl-color-background-container);width:100%;max-width:21rem;display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;box-shadow:0 .25rem 1.25rem rgba(49,48,48,.2);border-radius:var(--jkl-border-radius-s);border:2px solid var(--border-color);z-index:7000;padding-block:var(--jkl-unit-15)}}@layer jokul.components{.jkl-menu:focus-visible{outline:none}.jkl-menu .jkl-menu[data-placement=bottom-start]{box-shadow:0 -1px 2px 0 rgba(0,0,0,.2),-1px 2px 2px 0 rgba(0,0,0,.14),3px 1px 5px 0 rgba(0,0,0,.12)}}
+@layer jokul.components{.jkl-menu-item{--jkl-menu-item-height:var(--jkl-unit-60);--jkl-menu-item-padding:var(--jkl-unit-15) var(--jkl-unit-20);--background-color:transparent;background-color:var(--background-color);color:var(--jkl-color-text-default);text-decoration:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;font:var(--jkl-text-style-text-medium);display:flex;align-items:center;gap:var(--jkl-unit-10);width:100%;height:var(--jkl-menu-item-height);padding:var(--jkl-menu-item-padding);outline:0;border-style:none;outline-style:none}.jkl-menu-item:active,.jkl-menu-item:focus,.jkl-menu-item:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-menu-item{outline:revert;border-style:revert;outline-style:revert}.jkl-menu-item:active,.jkl-menu-item:focus,.jkl-menu-item:hover{outline:revert;outline-style:revert}}.jkl-menu-item__content{display:flex;gap:var(--jkl-unit-05);justify-content:flex-start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;max-width:100%}.jkl-menu-item__icon{flex-shrink:0}.jkl-menu-item__arrow,.jkl-menu-item__icon{display:flex;align-items:center}.jkl-menu-item__chevron{flex-shrink:0}.jkl-menu-item:focus-visible,.jkl-menu-item:hover{background-color:color-mix(in srgb,var(--background-color,transparent),var(--hover-accent-color,var(--jkl-color-background-contrast)) var(--jkl-opacity-hover,10%))}}@layer jokul.components{.jkl-menu-divider{width:100%;margin-block:0;border:none;border-bottom:.0625rem solid var(--jkl-color-border-subdued)}.jkl-menu{--border-color:transparent;--border-color:light-dark(transparent, var(--jkl-color-border-strong));background-color:var(--jkl-color-background-container);width:100%;max-width:21rem;display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;box-shadow:0 .25rem 1.25rem rgba(49,48,48,.2);border-radius:var(--jkl-border-radius-s);border:2px solid var(--border-color);z-index:7000;padding-block:var(--jkl-unit-15)}}@layer jokul.components{.jkl-menu:focus-visible{outline:none}.jkl-menu .jkl-menu[data-placement=bottom-start]{box-shadow:0 -1px 2px 0 rgba(0,0,0,.2),-1px 2px 2px 0 rgba(0,0,0,.14),3px 1px 5px 0 rgba(0,0,0,.12)}}

package/styles/components/message/message.css

@@ -126,28 +126,8 @@
   .jkl-message--full {
     max-width: 100%;
   }
-  .jkl-message--info {
-    --background-color: var(--jkl-color-info-background-container);
-    --text-color: var(--jkl-color-info-text-default);
-    --icon-color: var(--jkl-color-info-background-contrast);
-  }
-  .jkl-message--warning {
-    --background-color: var(--jkl-color-warning-background-container);
-    --text-color: var(--jkl-color-warning-text-default);
-    --icon-color: var(--jkl-color-warning-background-contrast);
-  }
-  .jkl-message--error {
-    --background-color: var(--jkl-color-error-background-container);
-    --text-color: var(--jkl-color-error-text-default);
-    --icon-color: var(--jkl-color-error-background-contrast);
-  }
-  .jkl-message--success {
-    --background-color: var(--jkl-color-success-background-container);
-    --text-color: var(--jkl-color-success-text-default);
-    --icon-color: var(--jkl-color-success-background-contrast);
-  }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u19jtxu var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-u08gys9 var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -155,13 +135,13 @@
     .jkl-message {
       border: 2px solid CanvasText;
     }
-    .jkl-message--info {
+    .jkl-message[data-color=info] {
       border-style: dotted;
     }
-    .jkl-message--warning {
+    .jkl-message[data-color=warning] {
       border-style: dashed;
     }
-    .jkl-message--error {
+    .jkl-message[data-color=error] {
       border-style: double;
       border-width: 4px;
     }
@@ -169,7 +149,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-u19jtxu {
+  @keyframes jkl-dismiss-u08gys9 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

package/styles/components/message/message.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-message{--jkl-message-icon-left:var(--jkl-unit-20);--jkl-message-icon-top:var(--jkl-unit-30);--jkl-message-title-margin:0 0 var(--jkl-unit-05) 0;--jkl-message-dismiss-button-size:var(--jkl-unit-50);--jkl-message-gap:var(--jkl-unit-20);--jkl-message-padding:var(--jkl-unit-25) var(--jkl-unit-15);--icon-color:var(--jkl-color-background-contrast);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);width:100%;max-width:35rem;padding:var(--jkl-message-padding);background-color:var(--background-color);color:var(--text-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;display:grid;align-items:start;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;font:var(--jkl-text-style-paragraph-medium)}.jkl-message:has(.jkl-message__title){font:var(--jkl-text-style-heading-5)}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);color:var(--icon-color)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font:var(--jkl-text-style-paragraph-medium);margin-top:-.125rem}.jkl-message__title{font:var(--jkl-text-style-heading-5);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{grid-area:dismiss;justify-self:end;position:relative;background-color:transparent;padding:0;color:inherit;display:grid;place-content:center;outline:0;border-style:none;outline-style:none}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{outline:revert;border-style:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{content:"";position:absolute;display:block;width:var(--jkl-message-dismiss-button-size);height:var(--jkl-message-dismiss-button-size);top:50%;left:50%;transform:translate(-50%,-50%)}.jkl-message__dismiss-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--icon-color:var(--jkl-color-info-background-contrast)}.jkl-message--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--icon-color:var(--jkl-color-warning-background-contrast)}.jkl-message--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--icon-color:var(--jkl-color-error-background-contrast)}.jkl-message--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--icon-color:var(--jkl-color-success-background-contrast)}.jkl-message--dismissed{animation:jkl-dismiss-u19jtxu var(--jkl-motion-timing-lazy) ease-in-out forwards;transition:visibility 0s var(--jkl-motion-timing-lazy);visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}.jkl-form-error-message{padding-bottom:var(--jkl-unit-50)}@keyframes jkl-dismiss-u19jtxu{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}}
+@layer jokul.components{.jkl-message{--jkl-message-icon-left:var(--jkl-unit-20);--jkl-message-icon-top:var(--jkl-unit-30);--jkl-message-title-margin:0 0 var(--jkl-unit-05) 0;--jkl-message-dismiss-button-size:var(--jkl-unit-50);--jkl-message-gap:var(--jkl-unit-20);--jkl-message-padding:var(--jkl-unit-25) var(--jkl-unit-15);--icon-color:var(--jkl-color-background-contrast);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);width:100%;max-width:35rem;padding:var(--jkl-message-padding);background-color:var(--background-color);color:var(--text-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;display:grid;align-items:start;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;font:var(--jkl-text-style-paragraph-medium)}.jkl-message:has(.jkl-message__title){font:var(--jkl-text-style-heading-5)}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);color:var(--icon-color)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font:var(--jkl-text-style-paragraph-medium);margin-top:-.125rem}.jkl-message__title{font:var(--jkl-text-style-heading-5);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{grid-area:dismiss;justify-self:end;position:relative;background-color:transparent;padding:0;color:inherit;display:grid;place-content:center;outline:0;border-style:none;outline-style:none}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{outline:revert;border-style:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{content:"";position:absolute;display:block;width:var(--jkl-message-dismiss-button-size);height:var(--jkl-message-dismiss-button-size);top:50%;left:50%;transform:translate(-50%,-50%)}.jkl-message__dismiss-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-message--full{max-width:100%}.jkl-message--dismissed{animation:jkl-dismiss-u08gys9 var(--jkl-motion-timing-lazy) ease-in-out forwards;transition:visibility 0s var(--jkl-motion-timing-lazy);visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message[data-color=info]{border-style:dotted}.jkl-message[data-color=warning]{border-style:dashed}.jkl-message[data-color=error]{border-style:double;border-width:4px}}.jkl-form-error-message{padding-bottom:var(--jkl-unit-50)}@keyframes jkl-dismiss-u08gys9{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}}

package/styles/components/message/message.scss

@@ -112,30 +112,6 @@ $_message-width--compact: jkl.rem(440px);
             max-width: 100%;
         }
 
-        &--info {
-            --background-color: var(--jkl-color-info-background-container);
-            --text-color: var(--jkl-color-info-text-default);
-            --icon-color: var(--jkl-color-info-background-contrast);
-        }
-
-        &--warning {
-            --background-color: var(--jkl-color-warning-background-container);
-            --text-color: var(--jkl-color-warning-text-default);
-            --icon-color: var(--jkl-color-warning-background-contrast);
-        }
-
-        &--error {
-            --background-color: var(--jkl-color-error-background-container);
-            --text-color: var(--jkl-color-error-text-default);
-            --icon-color: var(--jkl-color-error-background-contrast);
-        }
-
-        &--success {
-            --background-color: var(--jkl-color-success-background-container);
-            --text-color: var(--jkl-color-success-text-default);
-            --icon-color: var(--jkl-color-success-background-contrast);
-        }
-
         &--dismissed {
             animation: $_dismiss-animation-name $_dismiss-animation-duration ease-in-out forwards;
             transition: visibility 0ms $_dismiss-animation-duration;
@@ -145,15 +121,15 @@ $_message-width--compact: jkl.rem(440px);
         @include jkl.forced-colors-mode {
             border: 2px solid CanvasText;
 
-            &--info {
+            &[data-color="info"] {
                 border-style: dotted;
             }
 
-            &--warning {
+            &[data-color="warning"] {
                 border-style: dashed;
             }
 
-            &--error {
+            &[data-color="error"] {
                 border-style: double;
                 border-width: 4px;
             }

package/styles/components/notification-badge/_index.scss

@@ -0,0 +1 @@
+@forward "notification-badge";

package/styles/components/notification-badge/notification-badge.css

@@ -0,0 +1,45 @@
+@layer jokul.components {
+  .jkl-notification-badge {
+    --jkl-notification-badge-color: var(--jkl-color-background-contrast);
+    position-anchor: var(--jkl-notification-badge-anchor-name);
+    background: var(--jkl-notification-badge-color);
+    color: var(--jkl-color-text-on-contrast);
+    text-box-trim: trim-both;
+    overflow: hidden;
+    display: inline-block;
+    border-radius: var(--jkl-border-radius-full);
+    font: var(--jkl-text-style-text-micro);
+    font-weight: var(--jkl-font-weight-bold);
+    min-inline-size: 2ch;
+    text-align: center;
+    padding: var(--jkl-spacing-2);
+    pointer-events: none;
+    align-self: center;
+  }
+  .jkl-notification-badge--dot {
+    min-inline-size: unset;
+    inline-size: 1ch;
+    padding: 0;
+    aspect-ratio: 1;
+  }
+  .jkl-notification-badge[data-urgent=true] {
+    --jkl-notification-badge-color: var(
+        --jkl-color-error-background-contrast
+    );
+  }
+  .jkl-notification-badge-anchor {
+    anchor-name: var(--jkl-notification-badge-anchor-name);
+  }
+  @supports (position-anchor: --jkl-notification-badge-anchor) {
+    .jkl-notification-badge-anchor + .jkl-notification-badge {
+      position: absolute;
+      inset-inline-end: calc(anchor(end) - 0.5ch);
+      inset-block-start: calc(anchor(start) - 1ch);
+    }
+    .jkl-notification-badge-anchor + .jkl-notification-badge--dot {
+      --dot-inset: min(1ch, anchor-size(inline) / 8);
+      inset-inline-end: calc(anchor(end) + var(--dot-inset));
+      inset-block-start: calc(anchor(start) - 0.3ch);
+    }
+  }
+}

package/styles/components/notification-badge/notification-badge.min.css

@@ -0,0 +1,3 @@
+@layer jokul.components{.jkl-notification-badge{--jkl-notification-badge-color:var(--jkl-color-background-contrast);position-anchor:var(--jkl-notification-badge-anchor-name);background:var(--jkl-notification-badge-color);color:var(--jkl-color-text-on-contrast);text-box-trim:trim-both;overflow:hidden;display:inline-block;border-radius:var(--jkl-border-radius-full);font:var(--jkl-text-style-text-micro);font-weight:var(--jkl-font-weight-bold);min-inline-size:2ch;text-align:center;padding:var(--jkl-spacing-2);pointer-events:none;align-self:center}.jkl-notification-badge--dot{min-inline-size:unset;inline-size:1ch;padding:0;aspect-ratio:1}.jkl-notification-badge[data-urgent=true]{--jkl-notification-badge-color:var(
+        --jkl-color-error-background-contrast
+    )}.jkl-notification-badge-anchor{anchor-name:var(--jkl-notification-badge-anchor-name)}@supports (position-anchor:--jkl-notification-badge-anchor){.jkl-notification-badge-anchor+.jkl-notification-badge{position:absolute;inset-inline-end:calc(anchor(end) - .5ch);inset-block-start:calc(anchor(start) - 1ch)}.jkl-notification-badge-anchor+.jkl-notification-badge--dot{--dot-inset:min(1ch, anchor-size(inline) / 8);inset-inline-end:calc(anchor(end) + var(--dot-inset));inset-block-start:calc(anchor(start) - .3ch)}}}

package/styles/components/notification-badge/notification-badge.scss

@@ -0,0 +1,58 @@
+@layer jokul.components {
+    .jkl-notification-badge {
+        --jkl-notification-badge-color: var(--jkl-color-background-contrast);
+
+        position-anchor: var(--jkl-notification-badge-anchor-name);
+        background: var(--jkl-notification-badge-color);
+        color: var(--jkl-color-text-on-contrast);
+        text-box-trim: trim-both;
+        overflow: hidden;
+        display: inline-block;
+        border-radius: var(--jkl-border-radius-full);
+        font: var(--jkl-text-style-text-micro);
+        font-weight: var(--jkl-font-weight-bold);
+        min-inline-size: 2ch;
+        text-align: center;
+        padding: var(--jkl-spacing-2);
+        pointer-events: none;
+        align-self: center;
+
+        &--dot {
+            min-inline-size: unset;
+            inline-size: 1ch;
+            padding: 0;
+            aspect-ratio: 1;
+        }
+
+        &[data-urgent="true"] {
+            --jkl-notification-badge-color: var(
+                --jkl-color-error-background-contrast
+            );
+        }
+    }
+
+    .jkl-notification-badge-anchor {
+        anchor-name: var(--jkl-notification-badge-anchor-name);
+
+        // Uten ankerstøtte faller varselet tilbake til å flyte inline etter
+        // ankeret. En wrapper med position: relative er ikke et alternativ —
+        // anker og varsel er søsken i konsumentens layout.
+        @supports (position-anchor: --jkl-notification-badge-anchor) {
+            + .jkl-notification-badge {
+                position: absolute;
+                inset-inline-end: calc(anchor(end) - 0.5ch);
+                inset-block-start: calc(anchor(start) - 1ch);
+
+                &--dot {
+                    // Prikken skal ligge i ankerets hjørne. Et fast innrykk
+                    // ville dyttet den mot midten på smale ankere, som
+                    // ikonknapper.
+                    --dot-inset: min(1ch, anchor-size(inline) / 8);
+
+                    inset-inline-end: calc(anchor(end) + var(--dot-inset));
+                    inset-block-start: calc(anchor(start) - 0.3ch);
+                }
+            }
+        }
+    }
+}

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

@@ -50,6 +50,31 @@
       border: 0.125rem solid ButtonText;
     }
   }
+  .jkl-number-input__wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-number-input__wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-number-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-number-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-number-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-number-input__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-area__text-area:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
@@ -195,9 +220,20 @@
     inset-block: 0.0625rem;
   }
   .jkl-number-input button[data-direction]:disabled {
-    opacity: 0.4;
+    opacity: var(--jkl-nested-disabled-opacity, 0.4);
+    cursor: not-allowed;
+  }
+  .jkl-number-input button[data-direction]:disabled * {
+    --jkl-nested-disabled-opacity: 1;
     cursor: not-allowed;
   }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input button[data-direction]:disabled {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
   .jkl-number-input button[data-direction=decrement]::before {
     inset-inline-end: 0;
   }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-number-input{display:flex;flex-direction:column;align-items:flex-start}.jkl-number-input__wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;max-width:100%;position:relative;display:flex;align-items:center;font:var(--jkl-text-style-text-medium);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;background-color:var(--background-color);color:var(--text-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent}.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-number-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--placeholder-color:var(--jkl-color-error-text-subdued)}.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-number-input__wrapper>.jkl-text-input-action-button{flex-shrink:0;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--jkl-text-input-action-button-padding);height:var(--jkl-text-input-action-button-size);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-number-input__wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-number-input__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-number-input__wrapper{border:.125rem inset ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-number-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper:has(.jkl-number-input__input:invalid):not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b / 75%)}.jkl-number-input__wrapper--stepper{--jkl-number-input-stepper-min-width:calc(3ch + var(--jkl-text-input-horizontal-padding)*2);--jkl-number-input-stepper-text-color:var(--text-color);display:grid;grid-template-columns:-webkit-max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) -webkit-max-content;grid-template-columns:max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) max-content;overflow:hidden}.jkl-number-input__wrapper--stepper:has(button[data-direction]:focus-visible){overflow:visible}.jkl-number-input__input{padding:var(--jkl-text-input-padding);width:100%;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;background:none;-webkit-appearance:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-number-input__input{outline:revert;border-style:revert;outline-style:revert}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:revert;outline-style:revert}}.jkl-number-input__input input[type=number]::-webkit-inner-spin-button,.jkl-number-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-number-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-number-input__input{outline:none;border:none}.jkl-number-input__input:focus-visible{outline:none}}.jkl-number-input__input::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-number-input__input::-webkit-inner-spin-button,.jkl-number-input__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.jkl-number-input__input--align-right{text-align:right}.jkl-number-input__input--stepper{box-sizing:border-box;min-inline-size:var(--jkl-number-input-stepper-min-width);text-align:center}.jkl-number-input button[data-direction]{--text-color:var(--jkl-number-input-stepper-text-color);aspect-ratio:1;padding:0;display:inline-grid;place-items:center;text-align:center;height:100%}.jkl-number-input button[data-direction]:before{content:"";position:absolute;width:1px;inset-block:20%;background-color:var(--jkl-color-border-separator);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:inset}.jkl-number-input button[data-direction]:focus-visible:before,.jkl-number-input button[data-direction]:hover:before{inset-block:.0625rem}.jkl-number-input button[data-direction]:disabled{opacity:.4;cursor:not-allowed}.jkl-number-input button[data-direction=decrement]:before{inset-inline-end:0}.jkl-number-input button[data-direction=increment]:before{inset-inline-start:0}.jkl-number-input button[data-direction].jkl-button{border-radius:0}.jkl-number-input button[data-direction].jkl-button .jkl-icon{-webkit-margin-before:.4ex;margin-block-start:.4ex}}
+@layer jokul.components{.jkl-number-input{display:flex;flex-direction:column;align-items:flex-start}.jkl-number-input__wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;max-width:100%;position:relative;display:flex;align-items:center;font:var(--jkl-text-style-text-medium);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;background-color:var(--background-color);color:var(--text-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent}.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-number-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--placeholder-color:var(--jkl-color-error-text-subdued)}.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__wrapper:hover{border:.125rem solid ButtonText}}.jkl-number-input__wrapper:has(>:is(input,textarea):disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-number-input__wrapper:has(>:is(input,textarea):disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-number-input__wrapper:has(>:is(input,textarea):disabled){opacity:1;color:GrayText;border-color:GrayText}}.jkl-number-input__wrapper:has(>:is(input,textarea):read-only:not(:disabled)){--border-color:var(--jkl-color-border-subdued);--background-color:transparent;cursor:default}.jkl-number-input__wrapper:has(>:is(input,textarea):read-only:not(:disabled)):focus-within,.jkl-number-input__wrapper:has(>:is(input,textarea):read-only:not(:disabled)):has([data-focused=true]),.jkl-number-input__wrapper:has(>:is(input,textarea):read-only:not(:disabled)):hover{--border-color:var(--jkl-color-border-subdued);--background-color:transparent;box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-number-input__wrapper>.jkl-text-input-action-button{flex-shrink:0;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--jkl-text-input-action-button-padding);height:var(--jkl-text-input-action-button-size);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-number-input__wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-number-input__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-number-input__wrapper{border:.125rem inset ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-number-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper:has(.jkl-number-input__input:invalid):not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b / 75%)}.jkl-number-input__wrapper--stepper{--jkl-number-input-stepper-min-width:calc(3ch + var(--jkl-text-input-horizontal-padding)*2);--jkl-number-input-stepper-text-color:var(--text-color);display:grid;grid-template-columns:-webkit-max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) -webkit-max-content;grid-template-columns:max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) max-content;overflow:hidden}.jkl-number-input__wrapper--stepper:has(button[data-direction]:focus-visible){overflow:visible}.jkl-number-input__input{padding:var(--jkl-text-input-padding);width:100%;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;background:none;-webkit-appearance:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-number-input__input{outline:revert;border-style:revert;outline-style:revert}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:revert;outline-style:revert}}.jkl-number-input__input input[type=number]::-webkit-inner-spin-button,.jkl-number-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-number-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-number-input__input{outline:none;border:none}.jkl-number-input__input:focus-visible{outline:none}}.jkl-number-input__input::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-number-input__input::-webkit-inner-spin-button,.jkl-number-input__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.jkl-number-input__input--align-right{text-align:right}.jkl-number-input__input--stepper{box-sizing:border-box;min-inline-size:var(--jkl-number-input-stepper-min-width);text-align:center}.jkl-number-input button[data-direction]{--text-color:var(--jkl-number-input-stepper-text-color);aspect-ratio:1;padding:0;display:inline-grid;place-items:center;text-align:center;height:100%}.jkl-number-input button[data-direction]:before{content:"";position:absolute;width:1px;inset-block:20%;background-color:var(--jkl-color-border-separator);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:inset}.jkl-number-input button[data-direction]:focus-visible:before,.jkl-number-input button[data-direction]:hover:before{inset-block:.0625rem}.jkl-number-input button[data-direction]:disabled{opacity:var(--jkl-nested-disabled-opacity,.4);cursor:not-allowed}.jkl-number-input button[data-direction]:disabled *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-number-input button[data-direction]:disabled{opacity:1;color:GrayText;border-color:GrayText}}.jkl-number-input button[data-direction=decrement]:before{inset-inline-end:0}.jkl-number-input button[data-direction=increment]:before{inset-inline-start:0}.jkl-number-input button[data-direction].jkl-button{border-radius:0}.jkl-number-input button[data-direction].jkl-button .jkl-icon{-webkit-margin-before:.4ex;margin-block-start:.4ex}}

package/styles/components/number-input/number-input.scss

@@ -91,8 +91,7 @@
             }
 
             &:disabled {
-                opacity: 0.4;
-                cursor: not-allowed;
+                @include jkl.disabled-control(0.4);
             }
         }
 

package/styles/components/progress-bar/progress-bar.css

@@ -54,7 +54,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uzl4qqj {
+  @keyframes jkl-downcount-uofhsnc {
     from {
       width: 100%;
     }

package/styles/components/progress-bar/progress-bar.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);width:100%;overflow:hidden}.jkl-progress-bar__tracker{display:block;height:var(--bar-height);background-color:var(--bar-color)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar{outline:0;border-style:none;outline-style:none}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-progress-bar{outline:revert;border-style:revert;outline-style:revert}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:revert;outline-style:revert}}.jkl-progress-bar:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-progress-bar__tracker{transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive)}@keyframes jkl-downcount-uzl4qqj{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);width:100%;overflow:hidden}.jkl-progress-bar__tracker{display:block;height:var(--bar-height);background-color:var(--bar-color)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar{outline:0;border-style:none;outline-style:none}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-progress-bar{outline:revert;border-style:revert;outline-style:revert}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:revert;outline-style:revert}}.jkl-progress-bar:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-progress-bar__tracker{transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive)}@keyframes jkl-downcount-uofhsnc{0%{width:100%}to{width:0}}}

package/styles/components/radio-button/radio-button.css

@@ -118,4 +118,19 @@
     margin-top: 0.25lh;
     margin-bottom: var(--jkl-unit-10);
   }
+  .jkl-radio-button:has(> .jkl-radio-button__input:disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-radio-button:has(> .jkl-radio-button__input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-radio-button:has(> .jkl-radio-button__input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
 }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-radio-button{display:flex;position:relative;--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{outline:revert;border-style:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:1lh;inline-size:1lh;margin:0;padding:0;cursor:pointer;z-index:1;-webkit-appearance:none;appearance:none;background:transparent;border:0;outline:0;border-style:none;outline-style:none}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{outline:revert;border-style:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{cursor:pointer;display:flex;color:var(--text-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color}.jkl-radio-button__label:before{color:var(--icon-color);content:"radio_button_unchecked"/"";-webkit-margin-end:.25em;margin-inline-end:.25em;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"/""}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-left:1.75em;margin-top:.25lh;margin-bottom:var(--jkl-unit-10)}}
+@layer jokul.components{.jkl-radio-button{display:flex;position:relative;--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-background-contrast);font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{outline:revert;border-style:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:1lh;inline-size:1lh;margin:0;padding:0;cursor:pointer;z-index:1;-webkit-appearance:none;appearance:none;background:transparent;border:0;outline:0;border-style:none;outline-style:none}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{outline:revert;border-style:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{cursor:pointer;display:flex;color:var(--text-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color}.jkl-radio-button__label:before{color:var(--icon-color);content:"radio_button_unchecked"/"";-webkit-margin-end:.25em;margin-inline-end:.25em;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"/""}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-left:1.75em;margin-top:.25lh;margin-bottom:var(--jkl-unit-10)}.jkl-radio-button:has(>.jkl-radio-button__input:disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-radio-button:has(>.jkl-radio-button__input:disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-radio-button:has(>.jkl-radio-button__input:disabled){opacity:1;color:GrayText;border-color:GrayText}}}

package/styles/components/radio-button/radio-button.scss

@@ -94,4 +94,8 @@
             margin-bottom: jkl.$unit-10;
         }
     }
+
+    .jkl-radio-button:has(> .jkl-radio-button__input:disabled) {
+        @include jkl.disabled-control;
+    }
 }

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

@@ -83,6 +83,23 @@
     --outer-border-thickness: 0.125rem;
     cursor: pointer;
   }
+  .jkl-input-panel:has(.jkl-input-panel__header input:disabled) {
+    --outer-border-color: var(--jkl-color-border-default);
+    --outer-border-thickness: 0.0625rem;
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-input-panel:has(.jkl-input-panel__header input:disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-input-panel:has(.jkl-input-panel__header input:disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
 }
 @layer jokul.components {
   .jkl-radio-panel .jkl-radio-button {

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

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