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

package/styles/components/table/table.css

@@ -369,10 +369,10 @@
   }
   .jkl-table-row--clickable {
     outline: 0;
+    cursor: pointer;
   }
   .jkl-table-row--clickable:hover, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus {
-    cursor: pointer;
-    background-color: var(--jkl-table-row-highlight-color);
+    background-color: color-mix(in srgb, var(--background-color, transparent), var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%));
     border-top: double 0.0625rem var(--jkl-table-row-hover-border-color);
     border-bottom: double 0.0625rem var(--jkl-table-row-hover-border-color);
   }

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

@@ -1,3 +1,3 @@
 @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;width:1px!important;white-space:nowrap!important}.jkl-table-cell{--jkl-table-cell-padding:var(--jkl-unit-15);--jkl-table-expand-padding:var(--jkl-unit-20);padding:var(--jkl-table-cell-padding);position:relative;text-align:left;vertical-align:top;font:var(--jkl-text-style-text-medium)}}@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{display:flex;align-items:center;width:-webkit-fit-content;width:fit-content;margin-left:auto;margin-block:calc(var(--jkl-table-cell-padding)*-1);padding:var(--jkl-table-expand-padding)}.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;width:1px!important;white-space:nowrap!important}.jkl-table-head--sticky>.jkl-table-row{position:-webkit-sticky;position:sticky;top:var(--jkl-table-head-sticky-offset,0);z-index:1;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);background-clip:padding-box;vertical-align:bottom;height:2.3em}}@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{display:flex;gap:var(--jkl-spacing-4);align-items:center}.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;gap:var(--jkl-unit-15);flex-direction:column;width:100%}@media (min-width:680px){.jkl-table-pagination{flex-direction:row;gap:var(--jkl-unit-30);justify-content:space-between;align-items:center}}.jkl-table-pagination__left{flex-shrink:1}.jkl-table-pagination__right{flex-grow:1;display:flex;flex-wrap:nowrap}.jkl-table-pagination__total-rows{white-space:nowrap}.jkl-table-pagination__picker{display:flex;flex-direction:row;align-items:center;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{flex-grow:1;display:flex;flex-direction:column;justify-content:center;flex-wrap:wrap;gap:var(--jkl-unit-20)}@media (min-width:680px){.jkl-table-pagination__nav{flex-direction:row;align-items:center;justify-content:flex-end}}.jkl-table-pagination__nav ul{list-style:none;display:flex;flex-wrap:nowrap;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;color:var(--jkl-link-color);border-radius:.1875rem;-webkit-user-select:none;user-select:none;padding:0;height:2rem;min-width:2rem;outline:0;border-style:none;outline-style: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{outline:revert;border-style: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{text-align:center;vertical-align:bottom;display:inline-block;height:2rem;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-top:.0625rem double var(--jkl-table-row-hover-border-color);border-bottom:.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-top:var(--jkl-unit-15);padding-bottom: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-top:var(--jkl-unit-15);padding-bottom: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-property:border,padding;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive)}.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-property:border;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive)}.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-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.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-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.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{cursor:pointer;background-color:var(--jkl-table-row-highlight-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.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-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{outline:revert;color:ButtonText}.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-timing-function:var(--jkl-motion-easing-exit);transition-duration:var(--jkl-motion-timing-expressive);transition-property:height}.jkl-expandable-table-row__expanded-row--expanded{transition-timing-function:var(--jkl-motion-easing-entrance);transition-duration:var(--jkl-motion-timing-lazy);display:block}}.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;width:1px!important;white-space:nowrap!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;width:1px!important;white-space:nowrap!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}}
+            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-top:.0625rem double var(--jkl-table-row-hover-border-color);border-bottom:.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-top:var(--jkl-unit-15);padding-bottom: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-top:var(--jkl-unit-15);padding-bottom: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-property:border,padding;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive)}.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-property:border;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive)}.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-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.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-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}.jkl-table-row--clickable{outline:0;cursor:pointer}.jkl-table-row--clickable:hover,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus{background-color:color-mix(in srgb,var(--background-color,transparent),var(--hover-accent-color,var(--jkl-color-background-contrast)) var(--jkl-opacity-hover,10%));border-top:.0625rem double var(--jkl-table-row-hover-border-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.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-top:.0625rem solid var(--jkl-table-row-hover-border-color);border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{outline:revert;color:ButtonText}.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-timing-function:var(--jkl-motion-easing-exit);transition-duration:var(--jkl-motion-timing-expressive);transition-property:height}.jkl-expandable-table-row__expanded-row--expanded{transition-timing-function:var(--jkl-motion-easing-entrance);transition-duration:var(--jkl-motion-timing-lazy);display:block}}.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;width:1px!important;white-space:nowrap!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;width:1px!important;white-space:nowrap!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

@@ -56,6 +56,8 @@
     scroll-snap-align: start;
     text-decoration: none;
     white-space: nowrap;
+    display: inline-flex;
+    gap: var(--jkl-unit-10);
   }
   .jkl-tab {
     outline: 0;

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);scroll-snap-type:x proximity;overflow:scroll hidden;scrollbar-width:none;position:relative;display:inline-flex;flex-direction:row;padding:0;margin:0;border-bottom:1px solid var(--line-color);width:-webkit-fit-content;width:fit-content;max-width:100%}@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{content:"";position:absolute;position-anchor:--active-tab;height:2px;width:calc(anchor-size(inline) - var(--padding-inline-end));inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));background-color:var(--indicator-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy)}}.jkl-tab{--padding-inline-end:var(--jkl-unit-50);font:var(--jkl-text-style-text-medium);color:var(--text-color);padding:var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);border:none;background-color:transparent;position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap;outline:0;border-style:none;outline-style:none}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{outline:revert;border-style: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{content:"";position:absolute;height:2px;width:calc(100% - var(--padding-inline-end));inset-block-end:0;inset-inline-start:0;background-color:var(--indicator-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy)}}}
+@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);scroll-snap-type:x proximity;overflow:scroll hidden;scrollbar-width:none;position:relative;display:inline-flex;flex-direction:row;padding:0;margin:0;border-bottom:1px solid var(--line-color);width:-webkit-fit-content;width:fit-content;max-width:100%}@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{content:"";position:absolute;position-anchor:--active-tab;height:2px;width:calc(anchor-size(inline) - var(--padding-inline-end));inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));background-color:var(--indicator-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy)}}.jkl-tab{--padding-inline-end:var(--jkl-unit-50);font:var(--jkl-text-style-text-medium);color:var(--text-color);padding:var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);border:none;background-color:transparent;position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap;display:inline-flex;gap:var(--jkl-unit-10);outline:0;border-style:none;outline-style:none}.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{outline:revert;border-style: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{content:"";position:absolute;height:2px;width:calc(100% - var(--padding-inline-end));inset-block-end:0;inset-inline-start:0;background-color:var(--indicator-color);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy)}}}

package/styles/components/tabs/tabs.scss

@@ -61,6 +61,8 @@
         scroll-snap-align: start;
         text-decoration: none;
         white-space: nowrap;
+        display: inline-flex;
+        gap: var(--jkl-unit-10);
 
         @include jkl.reset-outline;
 

package/styles/components/tag/tag.css

@@ -20,42 +20,22 @@
   padding: var(--padding);
   gap: var(--gap);
 }
-.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 none CanvasText;
     border-bottom-style: dotted;
   }
-  .jkl-tag--info {
+  .jkl-tag[data-color=info] {
     border-style: dotted;
   }
-  .jkl-tag--warning {
+  .jkl-tag[data-color=warning] {
     border-style: dashed;
   }
-  .jkl-tag--error {
+  .jkl-tag[data-color=error] {
     border-style: double;
     border-width: 4px;
   }
-  .jkl-tag--success {
+  .jkl-tag[data-color=success] {
     border-style: solid;
   }
 }

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);font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:.25rem;display:inline-flex;inline-size:-webkit-fit-content;inline-size:fit-content;align-items:center;white-space:nowrap;padding:var(--padding);gap:var(--gap)}.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}}
+.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);font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:.25rem;display:inline-flex;inline-size:-webkit-fit-content;inline-size:fit-content;align-items:center;white-space:nowrap;padding:var(--padding);gap:var(--gap)}@media screen and (forced-colors:active){.jkl-tag{border:2px CanvasText;border-style:none none dotted}.jkl-tag[data-color=info]{border-style:dotted}.jkl-tag[data-color=warning]{border-style:dashed}.jkl-tag[data-color=error]{border-style:double;border-width:4px}.jkl-tag[data-color=success]{border-style:solid}}

package/styles/components/tag/tag.scss

@@ -23,48 +23,24 @@
     padding: var(--padding);
     gap: var(--gap);
 
-    &--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);
-    }
-
-    &--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);
-    }
-
-    &--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);
-    }
-
-    &--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);
-    }
-
     @include jkl.forced-colors-mode {
         border: 2px none CanvasText;
         border-bottom-style: dotted;
 
-        &--info {
+        &[data-color="info"] {
             border-style: dotted;
         }
 
-        &--warning {
+        &[data-color="warning"] {
             border-style: dashed;
         }
 
-        &--error {
+        &[data-color="error"] {
             border-style: double;
             border-width: 4px;
         }
 
-        &--success {
+        &[data-color="success"] {
             border-style: solid;
         }
     }

package/styles/components/text-area/text-area.css

@@ -46,6 +46,31 @@
       border: 0.125rem solid ButtonText;
     }
   }
+  .jkl-text-area-wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-text-area-wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-text-area-wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-text-area-wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-text-area-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-text-area-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-text-area-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-text-area-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;

package/styles/components/text-area/text-area.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-text-area-wrapper{overflow:hidden;--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-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-text-area-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-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-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-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-area-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-text-area-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-text-area-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{--text-input-height:var(--jkl-unit-60);--progress-bar-height:0.25rem;height:auto;width:100%}.jkl-text-area__text-area{scrollbar-color:var(--jkl-color) transparent;box-sizing:border-box;resize:none;width:100%;padding:var(--jkl-text-input-padding);max-height:var(--text-input-height);height:var(--text-input-height);min-height:var(--text-input-height);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:height,min-height,max-height,padding;background:none;-webkit-appearance:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{outline:revert;border-style:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-area__text-area{outline:none;border:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper{position:relative;padding-bottom:calc(var(--text-input-height) + var(--progress-bar-height))}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{pointer-events:none;position:absolute;bottom:0;left:0;right:0}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{padding:var(--jkl-text-input-padding);color:var(--text-color);font:var(--jkl-text-style-text-small)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:var(--progress-bar-height);width:100%;overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{content:"";width:var(--progress-width,100%);display:block;height:var(--progress-bar-height);background-color:var(--border-color);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy)}.jkl-text-area--start-open .jkl-text-area__text-area--3-rows,.jkl-text-area__text-area--3-rows:focus,.jkl-text-area__text-area--3-rows:not(:placeholder-shown){--height:3lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:4lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:5lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:6lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:7lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:8lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:9lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:10lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}}
+@layer jokul.components{.jkl-text-area-wrapper{overflow:hidden;--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-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-text-area-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-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-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-text-area-wrapper:focus-within,.jkl-text-area-wrapper:has([data-focused=true]),.jkl-text-area-wrapper:hover{border:.125rem solid ButtonText}}.jkl-text-area-wrapper:has(>:is(input,textarea):disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-text-area-wrapper:has(>:is(input,textarea):disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-text-area-wrapper:has(>:is(input,textarea):disabled){opacity:1;color:GrayText;border-color:GrayText}}.jkl-text-area-wrapper:has(>:is(input,textarea):read-only:not(:disabled)){--border-color:var(--jkl-color-border-subdued);--background-color:transparent;cursor:default}.jkl-text-area-wrapper:has(>:is(input,textarea):read-only:not(:disabled)):focus-within,.jkl-text-area-wrapper:has(>:is(input,textarea):read-only:not(:disabled)):has([data-focused=true]),.jkl-text-area-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-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-area-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-text-area-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-text-area-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-text-area-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-area-wrapper{border:.125rem inset ButtonText}}.jkl-text-area{--text-input-height:var(--jkl-unit-60);--progress-bar-height:0.25rem;height:auto;width:100%}.jkl-text-area__text-area{scrollbar-color:var(--jkl-color) transparent;box-sizing:border-box;resize:none;width:100%;padding:var(--jkl-text-input-padding);max-height:var(--text-input-height);height:var(--text-input-height);min-height:var(--text-input-height);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:height,min-height,max-height,padding;background:none;-webkit-appearance:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{outline:revert;border-style:revert;outline-style:revert}.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-area__text-area{outline:none;border:none}.jkl-text-area__text-area:focus-visible{outline:none}}.jkl-text-area__text-area::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-text-area .jkl-text-area-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-area-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper{position:relative;padding-bottom:calc(var(--text-input-height) + var(--progress-bar-height))}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{pointer-events:none;position:absolute;bottom:0;left:0;right:0}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{padding:var(--jkl-text-input-padding);color:var(--text-color);font:var(--jkl-text-style-text-small)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:transparent;height:var(--progress-bar-height);width:100%;overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{content:"";width:var(--progress-width,100%);display:block;height:var(--progress-bar-height);background-color:var(--border-color);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-lazy)}.jkl-text-area--start-open .jkl-text-area__text-area--3-rows,.jkl-text-area__text-area--3-rows:focus,.jkl-text-area__text-area--3-rows:not(:placeholder-shown){--height:3lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:4lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:5lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:6lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:7lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:8lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:9lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:10lh;--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);min-height:calc(var(--height) + var(--vertical-padding));height:calc(var(--height) + var(--vertical-padding));max-height:100%}}

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

@@ -45,6 +45,31 @@
       border: 0.125rem solid ButtonText;
     }
   }
+  .jkl-text-input-wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-text-input-wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-text-input-wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-text-input-wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-text-input-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-text-input-wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-text-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-text-input-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible) {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-text-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-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-text-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-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-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-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-text-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-text-input-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-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-text-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-text-input-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-input-wrapper{border:.125rem inset ButtonText}}.jkl-text-input{display:flex;flex-direction:column;align-items:flex-start}.jkl-text-input__input{padding:var(--jkl-text-input-padding);width:100%;background:none;-webkit-appearance:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input__input{outline:revert;border-style:revert;outline-style:revert}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:revert;outline-style:revert}}.jkl-text-input__input input[type=number]::-webkit-inner-spin-button,.jkl-text-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-input__input{outline:none;border:none}.jkl-text-input__input:focus-visible{outline:none}}.jkl-text-input__input::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{-webkit-padding-end:var(--jkl-text-input-horizontal-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding);padding-block:var(--jkl-text-input-vertical-padding)}.jkl-text-input__action-button{-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;vertical-align:middle;margin:-.125rem .25rem}}
+@layer jokul.components{.jkl-text-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-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-text-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-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-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-text-input-wrapper:focus-within,.jkl-text-input-wrapper:has([data-focused=true]),.jkl-text-input-wrapper:hover{border:.125rem solid ButtonText}}.jkl-text-input-wrapper:has(>:is(input,textarea):disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-text-input-wrapper:has(>:is(input,textarea):disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-text-input-wrapper:has(>:is(input,textarea):disabled){opacity:1;color:GrayText;border-color:GrayText}}.jkl-text-input-wrapper:has(>:is(input,textarea):read-only:not(:disabled)){--border-color:var(--jkl-color-border-subdued);--background-color:transparent;cursor:default}.jkl-text-input-wrapper:has(>:is(input,textarea):read-only:not(:disabled)):focus-within,.jkl-text-input-wrapper:has(>:is(input,textarea):read-only:not(:disabled)):has([data-focused=true]),.jkl-text-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-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-text-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-text-input-wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-text-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-text-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-text-input-wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-text-input-wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-text-input-wrapper{border:.125rem inset ButtonText}}.jkl-text-input{display:flex;flex-direction:column;align-items:flex-start}.jkl-text-input__input{padding:var(--jkl-text-input-padding);width:100%;background:none;-webkit-appearance:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input__input{outline:revert;border-style:revert;outline-style:revert}.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:revert;outline-style:revert}}.jkl-text-input__input input[type=number]::-webkit-inner-spin-button,.jkl-text-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-text-input__input{outline:none;border:none}.jkl-text-input__input:focus-visible{outline:none}}.jkl-text-input__input::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{-webkit-padding-end:var(--jkl-text-input-horizontal-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding);padding-block:var(--jkl-text-input-vertical-padding)}.jkl-text-input__action-button{-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;vertical-align:middle;margin:-.125rem .25rem}}

package/styles/components/toast/toast.css

@@ -29,7 +29,8 @@
   .jkl-toast {
     --background-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
-    --border-color: transparent;
+    --icon-color: var(--jkl-color-background-contrast);
+    --border-color: var(--jkl-color-border-subdued);
     --jkl-toast-padding: var(--jkl-unit-20);
     color: var(--text-color);
     background-color: var(--background-color);
@@ -60,6 +61,9 @@
       stroke: CanvasText;
     }
   }
+  .jkl-toast__icon {
+    color: var(--icon-color);
+  }
   .jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon {
     margin-block-start: 0.0625rem;
   }
@@ -100,73 +104,29 @@
     position: absolute;
     inset: calc((var(--tap-size) - 100%) / 2 * -1);
   }
-  .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 {
+    .jkl-toast[data-color=info] {
       border-style: dotted;
     }
-    .jkl-toast--warning {
+    .jkl-toast[data-color=warning] {
       border-style: dashed;
     }
-    .jkl-toast--error {
+    .jkl-toast[data-color=error] {
       border-style: double;
       border-width: 4px;
     }
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uhla08e var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-u01fn5y var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uhla08j var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-u01fn6j var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uhla08e {
+  @keyframes jkl-entering-u01fn5y {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -176,7 +136,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uhla08j {
+  @keyframes jkl-exiting-u01fn6j {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{z-index:10000;background:transparent;display:flex;justify-content:center;position:fixed;bottom:var(--jkl-unit-30);right:0;left:0;width:100%;pointer-events:none}.jkl-toast-region__toasts{min-width:18rem;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:var(--jkl-unit-20)}.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);color:var(--text-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;align-items:start;overflow:hidden;width:clamp(15em,100%,min(30rem,85vw));padding:var(--jkl-toast-padding);position:relative;font:var(--jkl-text-style-paragraph-medium)}.jkl-toast__progress{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,.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-grow:1;flex-basis:100vw}.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;padding:0;color:inherit}@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:"";position:absolute;inset:calc((var(--tap-size) - 100%)/2*-1)}.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-uhla08e var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uhla08j var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-uhla08e{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uhla08j{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{z-index:10000;background:transparent;display:flex;justify-content:center;position:fixed;bottom:var(--jkl-unit-30);right:0;left:0;width:100%;pointer-events:none}.jkl-toast-region__toasts{min-width:18rem;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:var(--jkl-unit-20)}.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);--icon-color:var(--jkl-color-background-contrast);--border-color:var(--jkl-color-border-subdued);--jkl-toast-padding:var(--jkl-unit-20);color:var(--text-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;align-items:start;overflow:hidden;width:clamp(15em,100%,min(30rem,85vw));padding:var(--jkl-toast-padding);position:relative;font:var(--jkl-text-style-paragraph-medium)}.jkl-toast__progress{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,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__icon{color:var(--icon-color)}.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-grow:1;flex-basis:100vw}.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;padding:0;color:inherit}@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:"";position:absolute;inset:calc((var(--tap-size) - 100%)/2*-1)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast[data-color=info]{border-style:dotted}.jkl-toast[data-color=warning]{border-style:dashed}.jkl-toast[data-color=error]{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-u01fn5y var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u01fn6j var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-u01fn5y{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u01fn6j{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}

package/styles/components/toast/toast.scss

@@ -33,7 +33,8 @@
     .jkl-toast {
         --background-color: var(--jkl-color-background-container);
         --text-color: var(--jkl-color-text-default);
-        --border-color: transparent;
+        --icon-color: var(--jkl-color-background-contrast);
+        --border-color: var(--jkl-color-border-subdued);
         --jkl-toast-padding: var(--jkl-unit-20);
 
         color: var(--text-color);
@@ -62,6 +63,7 @@
 
         &__icon {
             @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
+            color: var(--icon-color);
 
             .jkl-toast:not(:has(.jkl-toast__title)) & {
                 margin-block-start: jkl.rem(1px);
@@ -106,74 +108,18 @@
             }
         }
 
-        &--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-countdown {
-                --bar-color: var(--jkl-color-info-background-contrast);
-            }
-
-            .jkl-toast__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);
-            --border-color: var(--jkl-color-warning-border-subdued);
-
-            .jkl-countdown {
-                --bar-color: var(--jkl-color-warning-background-contrast);
-            }
-
-            .jkl-toast__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);
-            --border-color: var(--jkl-color-error-border-subdued);
-
-            .jkl-countdown {
-                --bar-color: var(--jkl-color-error-background-contrast);
-            }
-
-            .jkl-toast__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);
-            --border-color: var(--jkl-color-success-border-subdued);
-
-            .jkl-countdown {
-                --bar-color: var(--jkl-color-success-background-contrast);
-            }
-
-            .jkl-toast__icon {
-                color: var(--jkl-color-success-background-contrast);
-            }
-        }
-
         @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/toggle-switch/toggle-switch.css

@@ -159,14 +159,19 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --knob-position: calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding) * 2);
 }
 .jkl-toggle-switch[disabled] {
-  cursor: revert;
-  --text-color: var(--jkl-color-text-subdued);
-  --switch-border-color: var(--jkl-color-border-subdued);
-  --knob-border-color: var(--jkl-color-border-subdued);
+  opacity: var(--jkl-nested-disabled-opacity, 0.5);
+  cursor: not-allowed;
 }
-.jkl-toggle-switch[disabled][aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch[disabled] {
-  --indicator-color: var(--jkl-color-border-subdued);
-  --switch-border-color: var(--indicator-color);
+.jkl-toggle-switch[disabled] * {
+  --jkl-nested-disabled-opacity: 1;
+  cursor: not-allowed;
+}
+@media screen and (forced-colors: active) {
+  .jkl-toggle-switch[disabled] {
+    opacity: 1;
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 
 .jkl-toggle-switch-widget {

package/styles/components/toggle-switch/toggle-switch.min.css

@@ -1 +1 @@
-.jkl-toggle-slider{--jkl-slider-bg:var(--jkl-color-background-page);--jkl-slider-pill:var(--jkl-color-background-container);--jkl-slider-text:var(--jkl-color-text-default);--jkl-slider-text--active:var(--jkl-color-text-default);--jkl-slider-focus-color:var(--jkl-color-border-strong);--jkl-slider-hover-color:var(--jkl-color-border-strong);font-size:var(--jkl-slider-font-size);line-height:var(--jkl-slider-line-height);font-weight:var(--jkl-slider-font-weight);position:relative;overflow:hidden;display:flex;align-items:flex-start;width:100%;flex-direction:column;-webkit-user-select:none;user-select:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill{box-shadow:inset 0 0 0 .125rem var(--jkl-slider-focus-color)}.jkl-toggle-slider__legend{margin-bottom:var(--jkl-spacing-8);font-size:var(--jkl-slider-legend-font-size);line-height:var(--jkl-slider-legend-line-height);font-weight:var(--jkl-slider-legend-font-weight)}.jkl-toggle-slider__legend--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;width:1px!important;white-space:nowrap!important}.jkl-toggle-slider__inputs{display:flex;position:relative;overflow:hidden;background-color:var(--jkl-slider-bg);border-radius:6.25rem;border:2px solid var(--jkl-slider-bg)}.jkl-toggle-slider__input{position:absolute;opacity:0}.jkl-toggle-slider__label{display:flex;align-items:center;justify-content:center;z-index:1;cursor:pointer;padding:var(--jkl-unit-02) var(--jkl-unit-20);color:var(--jkl-slider-pill-text);-webkit-tap-highlight-color:transparent;min-width:30px}.jkl-toggle-slider__label:hover{color:var(--jkl-slider-hover-color)}.jkl-toggle-slider__label--selected{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em;color:var(--jkl-slider-pill-text--active)}.jkl-toggle-slider__pill{height:100%;background-color:var(--jkl-slider-pill);position:absolute;transition-property:width,transform;border-radius:6.25rem;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive)}@media (min-width:680px){.jkl-toggle-slider{flex-direction:row;align-items:center}.jkl-toggle-slider__legend{margin-bottom:0;margin-right:1.2em}}@media screen and (forced-colors:active){.jkl-toggle-slider .jkl-toggle-slider__inputs{background-color:Canvas}.jkl-toggle-slider .jkl-toggle-slider__pill{background-color:ButtonFace}}.jkl-toggle-switch{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--border-width:0.0625rem;--switch-padding:var(--jkl-unit-05);--knob-position:0;--switch-border-color:var(--jkl-color-border-strong);--indicator-color:var(--jkl-color-background-container);--knob-border-color:var(--jkl-color-border-strong);--knob-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-on-contrast);background:transparent;color:var(--text-color);padding:0;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:row-reverse;align-items:center;gap:var(--jkl-unit-10);touch-action:none;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-toggle-switch{outline:revert;border-style:revert;outline-style:revert}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-toggle-switch{border-color:transparent;border-style:none}}.jkl-toggle-switch[aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch{--indicator-color:var(--jkl-color-background-contrast);--knob-color:var(--jkl-color-text-on-contrast);--switch-border-color:var(--indicator-color);--knob-border-color:var(--knob-color);--knob-position:calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding)*2)}.jkl-toggle-switch[disabled]{cursor:revert;--text-color:var(--jkl-color-text-subdued);--switch-border-color:var(--jkl-color-border-subdued);--knob-border-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch[disabled][aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch[disabled]{--indicator-color:var(--jkl-color-border-subdued);--switch-border-color:var(--indicator-color)}.jkl-toggle-switch-widget{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;height:var(--jkl-toggle-switch-height);width:var(--jkl-toggle-switch-width);border-radius:9999px;border:var(--border-width) solid var(--switch-border-color);overflow:hidden;-webkit-user-select:none;user-select:none;padding:var(--switch-padding);background-color:var(--indicator-color);pointer-events:none}@media screen and (forced-colors:active){.jkl-toggle-switch-widget{border:.0625rem solid ButtonText}}.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-toggle-switch-widget__slider{position:relative;box-sizing:border-box;height:var(--jkl-toggle-switch-knob-size);width:var(--jkl-toggle-switch-knob-size);color:var(--icon-color);font-size:var(--jkl-font-size-1);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:translate;translate:var(--knob-position)}.jkl-toggle-switch-widget__knob{position:absolute;inset:0;border-radius:9999px;border:var(--border-width) solid var(--knob-border-color);background-color:var(--knob-color)}.jkl-toggle-switch-widget__indicator{position:absolute;top:50%;right:100%;font-size:var(--jkl-unit-20);transform:translateY(-50%)}
+.jkl-toggle-slider{--jkl-slider-bg:var(--jkl-color-background-page);--jkl-slider-pill:var(--jkl-color-background-container);--jkl-slider-text:var(--jkl-color-text-default);--jkl-slider-text--active:var(--jkl-color-text-default);--jkl-slider-focus-color:var(--jkl-color-border-strong);--jkl-slider-hover-color:var(--jkl-color-border-strong);font-size:var(--jkl-slider-font-size);line-height:var(--jkl-slider-line-height);font-weight:var(--jkl-slider-font-weight);position:relative;overflow:hidden;display:flex;align-items:flex-start;width:100%;flex-direction:column;-webkit-user-select:none;user-select:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill{box-shadow:inset 0 0 0 .125rem var(--jkl-slider-focus-color)}.jkl-toggle-slider__legend{margin-bottom:var(--jkl-spacing-8);font-size:var(--jkl-slider-legend-font-size);line-height:var(--jkl-slider-legend-line-height);font-weight:var(--jkl-slider-legend-font-weight)}.jkl-toggle-slider__legend--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;width:1px!important;white-space:nowrap!important}.jkl-toggle-slider__inputs{display:flex;position:relative;overflow:hidden;background-color:var(--jkl-slider-bg);border-radius:6.25rem;border:2px solid var(--jkl-slider-bg)}.jkl-toggle-slider__input{position:absolute;opacity:0}.jkl-toggle-slider__label{display:flex;align-items:center;justify-content:center;z-index:1;cursor:pointer;padding:var(--jkl-unit-02) var(--jkl-unit-20);color:var(--jkl-slider-pill-text);-webkit-tap-highlight-color:transparent;min-width:30px}.jkl-toggle-slider__label:hover{color:var(--jkl-slider-hover-color)}.jkl-toggle-slider__label--selected{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em;color:var(--jkl-slider-pill-text--active)}.jkl-toggle-slider__pill{height:100%;background-color:var(--jkl-slider-pill);position:absolute;transition-property:width,transform;border-radius:6.25rem;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive)}@media (min-width:680px){.jkl-toggle-slider{flex-direction:row;align-items:center}.jkl-toggle-slider__legend{margin-bottom:0;margin-right:1.2em}}@media screen and (forced-colors:active){.jkl-toggle-slider .jkl-toggle-slider__inputs{background-color:Canvas}.jkl-toggle-slider .jkl-toggle-slider__pill{background-color:ButtonFace}}.jkl-toggle-switch{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--border-width:0.0625rem;--switch-padding:var(--jkl-unit-05);--knob-position:0;--switch-border-color:var(--jkl-color-border-strong);--indicator-color:var(--jkl-color-background-container);--knob-border-color:var(--jkl-color-border-strong);--knob-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-on-contrast);background:transparent;color:var(--text-color);padding:0;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:row-reverse;align-items:center;gap:var(--jkl-unit-10);touch-action:none;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-toggle-switch{outline:revert;border-style:revert;outline-style:revert}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-toggle-switch{border-color:transparent;border-style:none}}.jkl-toggle-switch[aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch{--indicator-color:var(--jkl-color-background-contrast);--knob-color:var(--jkl-color-text-on-contrast);--switch-border-color:var(--indicator-color);--knob-border-color:var(--knob-color);--knob-position:calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding)*2)}.jkl-toggle-switch[disabled]{opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-toggle-switch[disabled] *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-toggle-switch[disabled]{opacity:1;color:GrayText;border-color:GrayText}}.jkl-toggle-switch-widget{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;height:var(--jkl-toggle-switch-height);width:var(--jkl-toggle-switch-width);border-radius:9999px;border:var(--border-width) solid var(--switch-border-color);overflow:hidden;-webkit-user-select:none;user-select:none;padding:var(--switch-padding);background-color:var(--indicator-color);pointer-events:none}@media screen and (forced-colors:active){.jkl-toggle-switch-widget{border:.0625rem solid ButtonText}}.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-toggle-switch-widget__slider{position:relative;box-sizing:border-box;height:var(--jkl-toggle-switch-knob-size);width:var(--jkl-toggle-switch-knob-size);color:var(--icon-color);font-size:var(--jkl-font-size-1);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:translate;translate:var(--knob-position)}.jkl-toggle-switch-widget__knob{position:absolute;inset:0;border-radius:9999px;border:var(--border-width) solid var(--knob-border-color);background-color:var(--knob-color)}.jkl-toggle-switch-widget__indicator{position:absolute;top:50%;right:100%;font-size:var(--jkl-unit-20);transform:translateY(-50%)}