@fremtind/jokul 5.0.0-next.9 → 5.0.1

package/styles/components/system-message/system-message.scss

@@ -8,161 +8,153 @@ $_dismiss-animation-duration: jkl.timing("lazy");
 @layer jokul.components {
     .jkl-system-message {
         --jkl-system-message-icon-height: var(--jkl-unit-30);
-        --jkl-system-message-icon-padding: #{jkl.rem(3px)} 0 0 0;
         --jkl-system-message-content-padding: var(--jkl-unit-30);
         --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
-        --jkl-system-message-dismiss-button-margin: -#{jkl.rem(
- 6.5px)
-    }
-
-    -#{jkl.rem(18px)} -#{jkl.rem(6.5px)} auto;
-    --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
-    --background-color: var(--jkl-color-background-container);
-    --text-color: var(--jkl-color-text-default);
-    --border-color: var(--jkl-color-border-subdued);
-
-    width: 100%;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    border: 1px solid var(--border-color);
-    transition-behavior: allow-discrete;
-    box-sizing: border-box;
+        --jkl-system-message-dismiss-button-margin: -#{jkl.rem(6.5px)} -#{jkl.rem(18px)} -#{jkl.rem(6.5px)} auto;
+        --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
+        --icon-color: var(--jkl-color-background-contrast);
+        --background-color: var(--jkl-color-background-container);
+        --text-color: var(--jkl-color-text-default);
 
-    &__content {
-        box-sizing: border-box;
-        padding: var(--jkl-system-message-content-padding);
-        display: grid;
-        grid-template-columns: min-content 1fr min-content;
-        align-items: flex-start;
         width: 100%;
-        margin: 0 auto;
-    }
-
-    &__icon {
-        height: var(--jkl-system-message-icon-height);
-        margin: var(--jkl-system-message-icon-padding);
-        flex-shrink: 0;
-
-        @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
-    }
-
-    &__message {
-        @include jkl.text-style("text-medium");
-        margin: var(--jkl-system-message-message-margin);
-    }
+        background-color: var(--background-color);
+        color: var(--text-color);
+        transition-behavior: allow-discrete;
+        box-sizing: border-box;
 
-    &__dismiss-button {
-        background-color: transparent;
-        padding: 0;
-        cursor: pointer;
-        display: grid;
-        place-content: center;
-        position: relative;
-        flex-shrink: 0;
-        margin-top: jkl.rem(3px); // visual alignment with text
-        color: inherit;
-
-        // Sørg for å ha en stor nok touch target.
-        &::after {
-            content: "";
-            position: absolute;
-            display: block;
-            width: var(--jkl-system-message-dismiss-button-size);
-            height: var(--jkl-system-message-dismiss-button-size);
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
+        &__content {
+            box-sizing: border-box;
+            padding: var(--jkl-system-message-content-padding);
+            display: grid;
+            grid-template-columns: min-content 1fr min-content;
+            align-items: flex-start;
+            width: 100%;
+            margin: 0 auto;
         }
 
-        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+        &__icon {
+            height: var(--jkl-system-message-icon-height);
+            color: var(--icon-color);
+            flex-shrink: 0;
 
-        @include jkl.forced-colors-mode {
-            background-color: ButtonFace;
+            @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
         }
 
-        @include jkl.reset-outline;
+        &__message {
+            @include jkl.text-style("text-medium");
+            margin: var(--jkl-system-message-message-margin);
+        }
 
-        &:hover {
-            color: var(--jkl-color-text-subdued);
+        &__dismiss-button {
+            background-color: transparent;
+            padding: 0;
+            display: grid;
+            place-content: center;
+            position: relative;
+            flex-shrink: 0;
+            color: inherit;
+
+            // Sørg for å ha en stor nok touch target.
+            &::after {
+                content: "";
+                position: absolute;
+                display: block;
+                width: var(--jkl-system-message-dismiss-button-size);
+                height: var(--jkl-system-message-dismiss-button-size);
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
 
             @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
-        }
-
-        &:focus-visible {
-            @include jkl.focus-outline;
 
             @include jkl.forced-colors-mode {
-                outline: 2px solid ButtonText;
-                outline-offset: 2px;
+                background-color: ButtonFace;
             }
-        }
-    }
 
-    &__message,
-    &__message:last-child {
-        margin-bottom: 0;
-    }
+            @include jkl.reset-outline;
 
-    &--dismissed {
-        animation: $_dismiss-animation-name jkl.timing("lazy") forwards;
-        transition: block jkl.timing("lazy") jkl.timing("lazy");
-    }
+            &:hover {
+                color: var(--jkl-color-text-subdued);
 
-    &--info {
-        --background-color: var(--jkl-color-info-background-container);
-        --text-color: var(--jkl-color-info-text-default);
-        --border-color: var(--jkl-color-info-border-subdued);
-    }
+                @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+            }
 
-    &--warning {
-        --background-color: var(--jkl-color-warning-background-container);
-        --text-color: var(--jkl-color-warning-text-default);
-        --border-color: var(--jkl-color-warning-border-subdued);
-    }
+            &:focus-visible {
+                @include jkl.focus-outline;
 
-    &--error {
-        --background-color: var(--jkl-color-error-background-container);
-        --text-color: var(--jkl-color-error-text-default);
-        --border-color: var(--jkl-color-error-border-subdued);
-    }
+                @include jkl.forced-colors-mode {
+                    outline: 2px solid ButtonText;
+                    outline-offset: 2px;
+                }
+            }
+        }
 
-    &--success {
-        --background-color: var(--jkl-color-success-background-container);
-        --text-color: var(--jkl-color-success-text-default);
-        --border-color: var(--jkl-color-success-border-subdued);
-    }
+        &__message,
+        &__message:last-child {
+            margin-bottom: 0;
+        }
 
-    @include jkl.forced-colors-mode {
-        border: 2px solid CanvasText;
+        &--dismissed {
+            animation: $_dismiss-animation-name jkl.timing("lazy") forwards;
+            transition: block jkl.timing("lazy") jkl.timing("lazy");
+        }
 
         &--info {
-            border-style: dotted;
+            --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 {
-            border-style: dashed;
+            --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 {
-            border-style: double;
-            border-width: 4px;
+            --background-color: var(--jkl-color-error-background-container);
+            --text-color: var(--jkl-color-error-text-default);
+            --icon-color: var(--jkl-color-error-background-contrast);
         }
-    }
-}
 
-@keyframes #{$_dismiss-animation-name} {
-    from {
-        opacity: 1;
-        transform: translateY(0);
-        filter: saturate(1);
-        display: block;
+        &--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);
+        }
+
+        @include jkl.forced-colors-mode {
+            border: 2px solid CanvasText;
+
+            &--info {
+                border-style: dotted;
+            }
+
+            &--warning {
+                border-style: dashed;
+            }
+
+            &--error {
+                border-style: double;
+                border-width: 4px;
+            }
+        }
     }
 
-    to {
-        opacity: 0;
-        transform: translateY(-10%);
-        filter: saturate(0.7);
-        display: none;
+    @keyframes #{$_dismiss-animation-name} {
+        from {
+            opacity: 1;
+            transform: translateY(0);
+            filter: saturate(1);
+            display: block;
+        }
+
+        to {
+            opacity: 0;
+            transform: translateY(-10%);
+            filter: saturate(0.7);
+            display: none;
+        }
     }
 }
-}

package/styles/components/table/_table-pagination.scss

@@ -88,7 +88,6 @@
             background: transparent;
             color: var(--jkl-link-color);
             border-radius: jkl.rem(3px);
-            cursor: pointer;
             user-select: none;
             padding: 0;
             height: $_button-size;

package/styles/components/table/table.css

@@ -223,7 +223,6 @@
     background: transparent;
     color: var(--jkl-link-color);
     border-radius: 0.1875rem;
-    cursor: pointer;
     user-select: none;
     padding: 0;
     height: 2rem;

package/styles/components/table/table.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-table-caption--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-cell{--jkl-table-cell-padding:var(--jkl-unit-15);--jkl-table-expand-padding:var(--jkl-unit-20);font:var(--jkl-text-style-text-medium);padding:var(--jkl-table-cell-padding);position:relative;text-align:left;vertical-align:top}}@layer jokul.components{.jkl-table-cell:has(.jkl-button){--jkl-table-cell-padding:var(--jkl-unit-05)}.jkl-table-cell:has(.jkl-button) .jkl-button{padding-block:var(--jkl-unit-10)}.jkl-table-cell:has(.jkl-button) .jkl-button .jkl-button__text{overflow:visible}.jkl-table-cell--vertical-align-center{vertical-align:baseline}.jkl-table-cell--align-center{text-align:center}.jkl-table-cell--align-right{text-align:right}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell--align-right{text-align:unset}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell--align-right{text-align:unset}.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{display:none}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font:var(--jkl-text-style-heading-5)}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font:var(--jkl-text-style-heading-5)}@media (min-width:680px){.jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text{display:none}}.jkl-table-cell .jkl-table-row-expand-button{align-items:center;display:flex;margin-left:auto;margin-block:calc(var(--jkl-table-cell-padding)*-1);padding:var(--jkl-table-expand-padding);width:-webkit-fit-content;width:fit-content}.jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):hover .jkl-table-row-expand-button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):focus .jkl-table-row-expand-button{color:var(--expand-button-focus-color)}}@layer jokul.components{.jkl-table-head--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-head--sticky>.jkl-table-row{background-clip:padding-box;background-color:var(--jkl-table-head-sticky-color,var(--jkl-color-background-page));border-bottom:none;box-shadow:inset 0 0 0 #000,inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-strong);height:2.3em;position:-webkit-sticky;position:sticky;top:var(--jkl-table-head-sticky-offset,0);vertical-align:bottom;z-index:1}}@layer jokul.components{.jkl-table-header{--jkl-table-header-padding-inline:var(--jkl-unit-15);--jkl-table-header-padding-block:var(--jkl-unit-10);font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);padding-block:var(--jkl-table-header-padding-block);padding-inline:var(--jkl-table-header-padding-inline);text-align:left;white-space:nowrap}.jkl-table-header--align-center{text-align:center}.jkl-table-header--align-right{text-align:right}.jkl-table-header--bold{font-weight:var(--jkl-font-weight-bold)}.jkl-table-header__arrows{align-items:center;display:flex;gap:var(--jkl-spacing-4)}.jkl-table-header__arrows[data-align=center]{justify-content:center}.jkl-table-header__arrows[data-align=right]{justify-content:end}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-header{display:none}}}@layer jokul.components{.jkl-table-pagination{display:flex;flex-direction:column;gap:var(--jkl-unit-15);width:100%}@media (min-width:680px){.jkl-table-pagination{align-items:center;flex-direction:row;gap:var(--jkl-unit-30);justify-content:space-between}}.jkl-table-pagination__left{flex-shrink:1}.jkl-table-pagination__right{display:flex;flex-grow:1;flex-wrap:nowrap}.jkl-table-pagination__total-rows{white-space:nowrap}.jkl-table-pagination__picker{align-items:center;display:flex;flex-direction:row;white-space:nowrap}.jkl-table-pagination__picker--page{-webkit-padding-end:var(--jkl-unit-30);padding-inline-end:var(--jkl-unit-30);width:min(12rem,100%)}@media (min-width:680px){.jkl-table-pagination__picker--page{justify-content:flex-end}}.jkl-table-pagination__picker--page .jkl-table-pagination__picker-input{width:min(4rem,100%)}.jkl-table-pagination__picker-label{-webkit-margin-end:var(--jkl-unit-10);margin-inline-end:var(--jkl-unit-10)}.jkl-table-pagination__nav{display:flex;flex-direction:column;flex-grow:1;flex-wrap:wrap;gap:var(--jkl-unit-20);justify-content:center}@media (min-width:680px){.jkl-table-pagination__nav{align-items:center;flex-direction:row;justify-content:flex-end}}.jkl-table-pagination__nav ul{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-table-pagination__nav li{margin:0;padding:0}.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{background:transparent;border-radius:.1875rem;border-style:none;color:var(--jkl-link-color);cursor:pointer;height:2rem;min-width:2rem;outline:0;outline-style:none;padding:0;-webkit-user-select:none;user-select:none}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{border-style:revert;outline:revert;outline-style:revert}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:revert;outline-style:revert}}.jkl-table-pagination__next:hover:not(:focus),.jkl-table-pagination__page:hover:not(:focus),.jkl-table-pagination__previous:hover:not(:focus){color:var(--jkl-link-hover-color)}html:not([data-mousenavigation]) .jkl-table-pagination__next:focus,html:not([data-mousenavigation]) .jkl-table-pagination__page:focus,html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus{outline:.125rem solid var(--jkl-link-active-color)}.jkl-table-pagination__next,.jkl-table-pagination__previous{padding-top:.125rem}.jkl-table-pagination__ellipsis{display:inline-block;height:2rem;text-align:center;vertical-align:bottom;width:2rem}.jkl-table-pagination__page--active{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-table-row{--jkl-table-row-border-color:var(--jkl-color-border-subdued);--jkl-table-row-border-none-color:transparent;--jkl-table-row-hover-border-color:var(--jkl-color-border-strong);--jkl-table-row-highlight-color:color-mix(in srgb,currentColor 15%,transparent);border-bottom:.0625rem solid var(--jkl-table-row-border-color)}}@layer jokul.components{.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row{border-top:.0625rem solid transparent}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row:hover{border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse]>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row{padding-bottom:var(--jkl-unit-15);padding-top:var(--jkl-unit-15)}.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row{padding-bottom:var(--jkl-unit-15);padding-top:var(--jkl-unit-15)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:var(--jkl-motion-timing-productive);transition-property:border,padding;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded{border-bottom-color:var(--jkl-table-row-border-none-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable .jkl-table-row-expand-button{margin-left:auto}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr{background-color:var(--jkl-table-row-highlight-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr .jkl-table-row{border-bottom-color:var(--jkl-table-row-hover-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:var(--jkl-motion-timing-productive);transition-property:border;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+[aria-hidden=false] .jkl-table-row{border-top-color:var(--jkl-table-row-border-none-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}.jkl-table-row--clickable{outline:0}.jkl-table-row--clickable:hover,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus{background-color:var(--jkl-table-row-highlight-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color);cursor:pointer}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{color:ButtonText;outline:revert}.jkl-table-row--clickable:hover{background-color:ButtonFace}}.jkl-table-row--clicked{background-color:var(--jkl-table-row-highlight-color)}.jkl-table-row--clicked.jkl-table-row--expandable+[aria-hidden=false]{background-color:var(--jkl-table-row-highlight-color)}@media screen and (forced-colors:active){.jkl-table-row--clicked{background-color:ButtonFace}}.jkl-expandable-table-row__expanded-row{display:none;transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-expandable-table-row__expanded-row--expanded{display:block;transition-duration:var(--jkl-motion-timing-lazy);transition-timing-function:var(--jkl-motion-easing-entrance)}}.jkl-table{border-collapse:collapse;position:relative}.jkl-table--full-width{width:100%}.jkl-table--collapse-to-list[data-collapse]{display:block}.jkl-table--collapse-to-list[data-collapse]>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list[data-collapse]>thead,.jkl-table--collapse-to-list[data-collapse]>thead>tr,.jkl-table--collapse-to-list[data-collapse]>thead>tr>th{display:none}.jkl-table--collapse-to-list[data-collapse]>tbody,.jkl-table--collapse-to-list[data-collapse]>tbody>tr,.jkl-table--collapse-to-list[data-collapse]>tbody>tr>td{display:block}.jkl-table--collapse-to-list[data-collapse]>tfoot,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr>td{display:block}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list{display:block}.jkl-table--collapse-to-list>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list>thead,.jkl-table--collapse-to-list>thead>tr,.jkl-table--collapse-to-list>thead>tr>th{display:none}.jkl-table--collapse-to-list>tbody,.jkl-table--collapse-to-list>tbody>tr,.jkl-table--collapse-to-list>tbody>tr>td{display:block}.jkl-table--collapse-to-list>tfoot,.jkl-table--collapse-to-list>tfoot>tr,.jkl-table--collapse-to-list>tfoot>tr>td{display:block}}
+@layer jokul.components{.jkl-table-caption--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-cell{--jkl-table-cell-padding:var(--jkl-unit-15);--jkl-table-expand-padding:var(--jkl-unit-20);font:var(--jkl-text-style-text-medium);padding:var(--jkl-table-cell-padding);position:relative;text-align:left;vertical-align:top}}@layer jokul.components{.jkl-table-cell:has(.jkl-button){--jkl-table-cell-padding:var(--jkl-unit-05)}.jkl-table-cell:has(.jkl-button) .jkl-button{padding-block:var(--jkl-unit-10)}.jkl-table-cell:has(.jkl-button) .jkl-button .jkl-button__text{overflow:visible}.jkl-table-cell--vertical-align-center{vertical-align:baseline}.jkl-table-cell--align-center{text-align:center}.jkl-table-cell--align-right{text-align:right}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell--align-right{text-align:unset}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell--align-right{text-align:unset}.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{display:none}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font:var(--jkl-text-style-heading-5)}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font:var(--jkl-text-style-heading-5)}@media (min-width:680px){.jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text{display:none}}.jkl-table-cell .jkl-table-row-expand-button{align-items:center;display:flex;margin-left:auto;margin-block:calc(var(--jkl-table-cell-padding)*-1);padding:var(--jkl-table-expand-padding);width:-webkit-fit-content;width:fit-content}.jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):hover .jkl-table-row-expand-button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):focus .jkl-table-row-expand-button{color:var(--expand-button-focus-color)}}@layer jokul.components{.jkl-table-head--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-head--sticky>.jkl-table-row{background-clip:padding-box;background-color:var(--jkl-table-head-sticky-color,var(--jkl-color-background-page));border-bottom:none;box-shadow:inset 0 0 0 #000,inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-strong);height:2.3em;position:-webkit-sticky;position:sticky;top:var(--jkl-table-head-sticky-offset,0);vertical-align:bottom;z-index:1}}@layer jokul.components{.jkl-table-header{--jkl-table-header-padding-inline:var(--jkl-unit-15);--jkl-table-header-padding-block:var(--jkl-unit-10);font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);padding-block:var(--jkl-table-header-padding-block);padding-inline:var(--jkl-table-header-padding-inline);text-align:left;white-space:nowrap}.jkl-table-header--align-center{text-align:center}.jkl-table-header--align-right{text-align:right}.jkl-table-header--bold{font-weight:var(--jkl-font-weight-bold)}.jkl-table-header__arrows{align-items:center;display:flex;gap:var(--jkl-spacing-4)}.jkl-table-header__arrows[data-align=center]{justify-content:center}.jkl-table-header__arrows[data-align=right]{justify-content:end}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-header{display:none}}}@layer jokul.components{.jkl-table-pagination{display:flex;flex-direction:column;gap:var(--jkl-unit-15);width:100%}@media (min-width:680px){.jkl-table-pagination{align-items:center;flex-direction:row;gap:var(--jkl-unit-30);justify-content:space-between}}.jkl-table-pagination__left{flex-shrink:1}.jkl-table-pagination__right{display:flex;flex-grow:1;flex-wrap:nowrap}.jkl-table-pagination__total-rows{white-space:nowrap}.jkl-table-pagination__picker{align-items:center;display:flex;flex-direction:row;white-space:nowrap}.jkl-table-pagination__picker--page{-webkit-padding-end:var(--jkl-unit-30);padding-inline-end:var(--jkl-unit-30);width:min(12rem,100%)}@media (min-width:680px){.jkl-table-pagination__picker--page{justify-content:flex-end}}.jkl-table-pagination__picker--page .jkl-table-pagination__picker-input{width:min(4rem,100%)}.jkl-table-pagination__picker-label{-webkit-margin-end:var(--jkl-unit-10);margin-inline-end:var(--jkl-unit-10)}.jkl-table-pagination__nav{display:flex;flex-direction:column;flex-grow:1;flex-wrap:wrap;gap:var(--jkl-unit-20);justify-content:center}@media (min-width:680px){.jkl-table-pagination__nav{align-items:center;flex-direction:row;justify-content:flex-end}}.jkl-table-pagination__nav ul{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-table-pagination__nav li{margin:0;padding:0}.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{background:transparent;border-radius:.1875rem;border-style:none;color:var(--jkl-link-color);height:2rem;min-width:2rem;outline:0;outline-style:none;padding:0;-webkit-user-select:none;user-select:none}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{border-style:revert;outline:revert;outline-style:revert}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:revert;outline-style:revert}}.jkl-table-pagination__next:hover:not(:focus),.jkl-table-pagination__page:hover:not(:focus),.jkl-table-pagination__previous:hover:not(:focus){color:var(--jkl-link-hover-color)}html:not([data-mousenavigation]) .jkl-table-pagination__next:focus,html:not([data-mousenavigation]) .jkl-table-pagination__page:focus,html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus{outline:.125rem solid var(--jkl-link-active-color)}.jkl-table-pagination__next,.jkl-table-pagination__previous{padding-top:.125rem}.jkl-table-pagination__ellipsis{display:inline-block;height:2rem;text-align:center;vertical-align:bottom;width:2rem}.jkl-table-pagination__page--active{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-table-row{--jkl-table-row-border-color:var(--jkl-color-border-subdued);--jkl-table-row-border-none-color:transparent;--jkl-table-row-hover-border-color:var(--jkl-color-border-strong);--jkl-table-row-highlight-color:color-mix(in srgb,currentColor 15%,transparent);border-bottom:.0625rem solid var(--jkl-table-row-border-color)}}@layer jokul.components{.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row{border-top:.0625rem solid transparent}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row:hover{border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse]>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row{padding-bottom:var(--jkl-unit-15);padding-top:var(--jkl-unit-15)}.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row{padding-bottom:var(--jkl-unit-15);padding-top:var(--jkl-unit-15)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:var(--jkl-motion-timing-productive);transition-property:border,padding;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded{border-bottom-color:var(--jkl-table-row-border-none-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable .jkl-table-row-expand-button{margin-left:auto}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr{background-color:var(--jkl-table-row-highlight-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr .jkl-table-row{border-bottom-color:var(--jkl-table-row-hover-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:var(--jkl-motion-timing-productive);transition-property:border;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+[aria-hidden=false] .jkl-table-row{border-top-color:var(--jkl-table-row-border-none-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}.jkl-table-row--clickable{outline:0}.jkl-table-row--clickable:hover,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus{background-color:var(--jkl-table-row-highlight-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color);cursor:pointer}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{color:ButtonText;outline:revert}.jkl-table-row--clickable:hover{background-color:ButtonFace}}.jkl-table-row--clicked{background-color:var(--jkl-table-row-highlight-color)}.jkl-table-row--clicked.jkl-table-row--expandable+[aria-hidden=false]{background-color:var(--jkl-table-row-highlight-color)}@media screen and (forced-colors:active){.jkl-table-row--clicked{background-color:ButtonFace}}.jkl-expandable-table-row__expanded-row{display:none;transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-expandable-table-row__expanded-row--expanded{display:block;transition-duration:var(--jkl-motion-timing-lazy);transition-timing-function:var(--jkl-motion-easing-entrance)}}.jkl-table{border-collapse:collapse;position:relative}.jkl-table--full-width{width:100%}.jkl-table--collapse-to-list[data-collapse]{display:block}.jkl-table--collapse-to-list[data-collapse]>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list[data-collapse]>thead,.jkl-table--collapse-to-list[data-collapse]>thead>tr,.jkl-table--collapse-to-list[data-collapse]>thead>tr>th{display:none}.jkl-table--collapse-to-list[data-collapse]>tbody,.jkl-table--collapse-to-list[data-collapse]>tbody>tr,.jkl-table--collapse-to-list[data-collapse]>tbody>tr>td{display:block}.jkl-table--collapse-to-list[data-collapse]>tfoot,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr>td{display:block}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list{display:block}.jkl-table--collapse-to-list>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list>thead,.jkl-table--collapse-to-list>thead>tr,.jkl-table--collapse-to-list>thead>tr>th{display:none}.jkl-table--collapse-to-list>tbody,.jkl-table--collapse-to-list>tbody>tr,.jkl-table--collapse-to-list>tbody>tr>td{display:block}.jkl-table--collapse-to-list>tfoot,.jkl-table--collapse-to-list>tfoot>tr,.jkl-table--collapse-to-list>tfoot>tr>td{display:block}}

package/styles/components/tabs/tabs.css

@@ -51,7 +51,6 @@
     padding: var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);
     border: none;
     background-color: transparent;
-    cursor: pointer;
     position: relative;
     scroll-margin-inline-start: var(--jkl-unit-20);
     scroll-snap-align: start;

package/styles/components/tabs/tabs.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-tabs{width:100%}.jkl-tablist{--padding-inline-end:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--line-color:var(--jkl-color-border-subdued);--indicator-color:var(--jkl-color-border-default);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;max-width:100%;overflow:scroll hidden;padding:0;position:relative;scroll-snap-type:x proximity;scrollbar-width:none;width:-webkit-fit-content;width:fit-content}@media screen and (forced-colors:active){.jkl-tablist{border-color:GrayText}}.jkl-tablist::-webkit-scrollbar{display:none}@supports (position-anchor:--active-tab){.jkl-tablist:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));position:absolute;position-anchor:--active-tab;transition-duration:var(--jkl-motion-timing-lazy);transition-timing-function:var(--jkl-motion-easing-standard);width:calc(anchor-size(inline) - var(--padding-inline-end))}}.jkl-tab{--padding-inline-end:var(--jkl-unit-50);background-color:transparent;border:none;border-style:none;color:var(--text-color);cursor:pointer;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;padding:var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert;outline:revert;outline-style:revert}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-subdued)}.jkl-tab:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-2px}.jkl-tab[aria-selected=true]{anchor-name:--active-tab;--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}@supports not (position-anchor:--active-tab){.jkl-tab[aria-selected=true]{position:relative}.jkl-tab[aria-selected=true]:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-end:0;inset-inline-start:0;position:absolute;transition-duration:var(--jkl-motion-timing-lazy);transition-timing-function:var(--jkl-motion-easing-standard);width:calc(100% - var(--padding-inline-end))}}}
+@layer jokul.components{.jkl-tabs{width:100%}.jkl-tablist{--padding-inline-end:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--line-color:var(--jkl-color-border-subdued);--indicator-color:var(--jkl-color-border-default);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;max-width:100%;overflow:scroll hidden;padding:0;position:relative;scroll-snap-type:x proximity;scrollbar-width:none;width:-webkit-fit-content;width:fit-content}@media screen and (forced-colors:active){.jkl-tablist{border-color:GrayText}}.jkl-tablist::-webkit-scrollbar{display:none}@supports (position-anchor:--active-tab){.jkl-tablist:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));position:absolute;position-anchor:--active-tab;transition-duration:var(--jkl-motion-timing-lazy);transition-timing-function:var(--jkl-motion-easing-standard);width:calc(anchor-size(inline) - var(--padding-inline-end))}}.jkl-tab{--padding-inline-end:var(--jkl-unit-50);background-color:transparent;border:none;border-style:none;color:var(--text-color);font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;padding:var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert;outline:revert;outline-style:revert}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-subdued)}.jkl-tab:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-2px}.jkl-tab[aria-selected=true]{anchor-name:--active-tab;--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}@supports not (position-anchor:--active-tab){.jkl-tab[aria-selected=true]{position:relative}.jkl-tab[aria-selected=true]:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-end:0;inset-inline-start:0;position:absolute;transition-duration:var(--jkl-motion-timing-lazy);transition-timing-function:var(--jkl-motion-easing-standard);width:calc(100% - var(--padding-inline-end))}}}

package/styles/components/tabs/tabs.scss

@@ -56,7 +56,6 @@
         padding: var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);
         border: none;
         background-color: transparent;
-        cursor: pointer;
         position: relative;
         scroll-margin-inline-start: var(--jkl-unit-20);
         scroll-snap-align: start;

package/styles/components/tag/tag.css

@@ -20,22 +20,22 @@
   gap: var(--gap);
 }
 .jkl-tag--info {
-  --background-color: var(--jkl-color-info-background-container);
+  --background-color: var(--jkl-color-info-background-container-accent);
   --text-color: var(--jkl-color-info-text-default);
   --border-color: var(--jkl-color-info-border-subdued);
 }
 .jkl-tag--warning {
-  --background-color: var(--jkl-color-warning-background-container);
+  --background-color: var(--jkl-color-warning-background-container-accent);
   --text-color: var(--jkl-color-warning-text-default);
   --border-color: var(--jkl-color-warning-border-subdued);
 }
 .jkl-tag--error {
-  --background-color: var(--jkl-color-error-background-container);
+  --background-color: var(--jkl-color-error-background-container-accent);
   --text-color: var(--jkl-color-error-text-default);
   --border-color: var(--jkl-color-error-border-subdued);
 }
 .jkl-tag--success {
-  --background-color: var(--jkl-color-success-background-container);
+  --background-color: var(--jkl-color-success-background-container-accent);
   --text-color: var(--jkl-color-success-text-default);
   --border-color: var(--jkl-color-success-border-subdued);
 }

package/styles/components/tag/tag.min.css

@@ -1 +1 @@
-.jkl-tag{--padding:var(--jkl-unit-02) var(--jkl-unit-10);--gap:var(--jkl-unit-05);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:.25rem;color:var(--text-color);display:inline-flex;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);gap:var(--gap);padding:var(--padding);white-space:nowrap}.jkl-tag--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-tag--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-tag--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-tag--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@media screen and (forced-colors:active){.jkl-tag{border:2px CanvasText;border-style:none none dotted}.jkl-tag--info{border-style:dotted}.jkl-tag--warning{border-style:dashed}.jkl-tag--error{border-style:double;border-width:4px}.jkl-tag--success{border-style:solid}}
+.jkl-tag{--padding:var(--jkl-unit-02) var(--jkl-unit-10);--gap:var(--jkl-unit-05);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-subdued);align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:.25rem;color:var(--text-color);display:inline-flex;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);gap:var(--gap);padding:var(--padding);white-space:nowrap}.jkl-tag--info{--background-color:var(--jkl-color-info-background-container-accent);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-tag--warning{--background-color:var(--jkl-color-warning-background-container-accent);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-tag--error{--background-color:var(--jkl-color-error-background-container-accent);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-tag--success{--background-color:var(--jkl-color-success-background-container-accent);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@media screen and (forced-colors:active){.jkl-tag{border:2px CanvasText;border-style:none none dotted}.jkl-tag--info{border-style:dotted}.jkl-tag--warning{border-style:dashed}.jkl-tag--error{border-style:double;border-width:4px}.jkl-tag--success{border-style:solid}}

package/styles/components/tag/tag.scss

@@ -23,25 +23,25 @@
     gap: var(--gap);
 
     &--info {
-        --background-color: var(--jkl-color-info-background-container);
+        --background-color: var(--jkl-color-info-background-container-accent);
         --text-color: var(--jkl-color-info-text-default);
         --border-color: var(--jkl-color-info-border-subdued);
     }
 
     &--warning {
-        --background-color: var(--jkl-color-warning-background-container);
+        --background-color: var(--jkl-color-warning-background-container-accent);
         --text-color: var(--jkl-color-warning-text-default);
         --border-color: var(--jkl-color-warning-border-subdued);
     }
 
     &--error {
-        --background-color: var(--jkl-color-error-background-container);
+        --background-color: var(--jkl-color-error-background-container-accent);
         --text-color: var(--jkl-color-error-text-default);
         --border-color: var(--jkl-color-error-border-subdued);
     }
 
     &--success {
-        --background-color: var(--jkl-color-success-background-container);
+        --background-color: var(--jkl-color-success-background-container-accent);
         --text-color: var(--jkl-color-success-text-default);
         --border-color: var(--jkl-color-success-border-subdued);
     }

package/styles/components/toast/toast.css

@@ -34,7 +34,7 @@
     color: var(--text-color);
     background-color: var(--background-color);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     align-items: start;
     overflow: hidden;
@@ -44,12 +44,14 @@
     font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-toast__progress {
-    --bar-color: var(--jkl-color-background-contrast);
-    --track-color: transparent;
-    border-radius: 0;
     position: absolute;
     inset: 0 0 auto;
   }
+  .jkl-toast .jkl-countdown {
+    --track-color: transparent;
+    --bar-color: var(--jkl-color-background-contrast);
+    border-radius: 0;
+  }
   @media screen and (forced-colors: active) {
     .jkl-toast__icon {
       stroke: CanvasText;
@@ -77,7 +79,6 @@
   .jkl-toast__dismiss-button {
     background-color: transparent;
     padding: 0;
-    cursor: pointer;
     color: inherit;
   }
   @media screen and (forced-colors: active) {
@@ -104,21 +105,45 @@
     --text-color: var(--jkl-color-info-text-default);
     --border-color: var(--jkl-color-info-border-subdued);
   }
+  .jkl-toast--info .jkl-countdown {
+    --bar-color: var(--jkl-color-info-background-contrast);
+  }
+  .jkl-toast--info .jkl-toast__icon {
+    color: var(--jkl-color-info-background-contrast);
+  }
   .jkl-toast--warning {
     --background-color: var(--jkl-color-warning-background-container);
     --text-color: var(--jkl-color-warning-text-default);
     --border-color: var(--jkl-color-warning-border-subdued);
   }
+  .jkl-toast--warning .jkl-countdown {
+    --bar-color: var(--jkl-color-warning-background-contrast);
+  }
+  .jkl-toast--warning .jkl-toast__icon {
+    color: var(--jkl-color-warning-background-contrast);
+  }
   .jkl-toast--error {
     --background-color: var(--jkl-color-error-background-container);
     --text-color: var(--jkl-color-error-text-default);
     --border-color: var(--jkl-color-error-border-subdued);
   }
+  .jkl-toast--error .jkl-countdown {
+    --bar-color: var(--jkl-color-error-background-contrast);
+  }
+  .jkl-toast--error .jkl-toast__icon {
+    color: var(--jkl-color-error-background-contrast);
+  }
   .jkl-toast--success {
     --background-color: var(--jkl-color-success-background-container);
     --text-color: var(--jkl-color-success-text-default);
     --border-color: var(--jkl-color-success-border-subdued);
   }
+  .jkl-toast--success .jkl-countdown {
+    --bar-color: var(--jkl-color-success-background-contrast);
+  }
+  .jkl-toast--success .jkl-toast__icon {
+    color: var(--jkl-color-success-background-contrast);
+  }
   @media screen and (forced-colors: active) {
     .jkl-toast {
       border: 2px solid CanvasText;
@@ -136,12 +161,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uvfs4va var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-ufhq3rr var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uvfs4vx var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-ufhq3ry var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uvfs4va {
+  @keyframes jkl-entering-ufhq3rr {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -151,7 +176,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uvfs4vx {
+  @keyframes jkl-exiting-ufhq3ry {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

package/styles/components/toast/toast.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:transparent;--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{--bar-color:var(--jkl-color-background-contrast);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-uvfs4va var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uvfs4vx var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-uvfs4va{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uvfs4vx{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:transparent;--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{inset:0 0 auto;position:absolute}.jkl-toast .jkl-countdown{--track-color:transparent;--bar-color:var(--jkl-color-background-contrast);border-radius:0}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--info .jkl-countdown{--bar-color:var(--jkl-color-info-background-contrast)}.jkl-toast--info .jkl-toast__icon{color:var(--jkl-color-info-background-contrast)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--warning .jkl-countdown{--bar-color:var(--jkl-color-warning-background-contrast)}.jkl-toast--warning .jkl-toast__icon{color:var(--jkl-color-warning-background-contrast)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--error .jkl-countdown{--bar-color:var(--jkl-color-error-background-contrast)}.jkl-toast--error .jkl-toast__icon{color:var(--jkl-color-error-background-contrast)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}.jkl-toast--success .jkl-countdown{--bar-color:var(--jkl-color-success-background-contrast)}.jkl-toast--success .jkl-toast__icon{color:var(--jkl-color-success-background-contrast)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-ufhq3rr var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-ufhq3ry var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-ufhq3rr{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-ufhq3ry{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}