@fremtind/jokul 4.7.0 → 4.7.1

package/styles/components/select/select.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-select{--jkl-select-arrow-right:var(--jkl-unit-05);--border-width:0.0625rem;--border-radius:var(--jkl-border-radius-s);--min-option-height:min(var(--jkl-unit-60),3rem);--button-padding:calc(var(--jkl-unit-15) - var(--border-width)) calc(0.75em - var(--border-width));--option-padding:var(--jkl-unit-05) 0.75em;border-style:none;display:block;outline:0;outline-style:none;position:relative}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select{border-style:revert;outline:revert;outline-style:revert}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:revert;outline-style:revert}}.jkl-select :focus-visible{outline:none}.jkl-select .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-select select{-webkit-appearance:none;appearance:none}.jkl-select select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--jkl-color-text-subdued)}.jkl-select select option{background-color:var(--jkl-color-background-container-high);color:var(--jkl-color-text-subdued);font-family:sans-serif;font-weight:400}.jkl-select__outer-wrapper{max-width:100%;min-width:7rem;position:relative;width:15rem}.jkl-select__search-input{box-sizing:border-box;color:var(--jkl-color-text-subdued)}.jkl-select__button,.jkl-select__search-input{background-color:transparent;border:var(--border-width) solid var(--jkl-color-border-input);border-radius:var(--border-radius);box-shadow:0 0 0 .0625rem transparent;color:var(--jkl-color-text-subdued);cursor:pointer;height:var(--jkl-select-input-height);overflow:hidden;padding:var(--button-padding);text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;-webkit-padding-end:2.05em;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);padding-inline-end:2.05em;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-color-text-default)}.jkl-select__button:hover,.jkl-select__search-input:hover{border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button:focus-visible,.jkl-select__search-input:focus-visible{outline:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-select__arrow{color:var(--jkl-color-text-default);pointer-events:none;position:absolute;right:.75em;top:50%;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-select:has([aria-invalid=true]) .jkl-select__arrow{color:var(--jkl-color-text-on-alert)}.jkl-select__options-menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 var(--border-radius) var(--border-radius);border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--min-option-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-select__option-wrapper{list-style-type:none;margin:0;padding:0;-webkit-overflow-scrolling:touch}.jkl-select__option{background-color:inherit;border:0;color:unset;cursor:pointer;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);min-height:var(--min-option-height);padding:var(--option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%;--jkl-icon-weight:300}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}.jkl-select__option-description{color:var(--jkl-color-text-subdued);display:block;font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);width:100%;--jkl-icon-weight:300}.jkl-select--inline{display:inline-block;vertical-align:top}.jkl-select--open .jkl-select__button,.jkl-select--open .jkl-select__search-input{background-color:var(--jkl-color-background-container-high);border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select--open .jkl-select__button:hover~.jkl-select__arrow,.jkl-select--open .jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-select--invalid .jkl-select__button,.jkl-select--invalid .jkl-select__search-input{background-color:var(--jkl-color-background-alert-error);color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--invalid .jkl-select__button--active-value,.jkl-select--invalid .jkl-select__search-input--active-value{color:revert}@media screen and (forced-colors:active){.jkl-select .jkl-select__button,.jkl-select .jkl-select__search-input{background-color:Canvas;border:2px solid ButtonText;color:CanvasText;outline:revert}.jkl-select .jkl-select__button:hover,.jkl-select .jkl-select__search-input:hover{border-color:Highlight}.jkl-select .jkl-select__option{border-bottom:1px solid Canvas;border-top:1px solid Canvas;color:CanvasText}.jkl-select .jkl-select__option:focus,.jkl-select .jkl-select__option:hover{border-bottom:1px solid SelectedItem;border-top:1px solid SelectedItem;--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}}}
+@layer jokul.components{.jkl-select{--jkl-select-arrow-right:var(--jkl-unit-05);--border-width:0.0625rem;--border-radius:var(--jkl-border-radius-s);--min-option-height:min(var(--jkl-unit-60),3rem);--button-padding:calc(var(--jkl-unit-15) - var(--border-width)) calc(0.75em - var(--border-width));--option-padding:var(--jkl-unit-05) 0.75em;border-style:none;display:block;outline:0;outline-style:none;position:relative}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select{border-style:revert;outline:revert;outline-style:revert}.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:revert;outline-style:revert}}.jkl-select :focus-visible{outline:none}.jkl-select .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-select select{-webkit-appearance:none;appearance:none}.jkl-select select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--jkl-color-text-subdued)}.jkl-select select option{background-color:var(--jkl-color-background-container-high);color:var(--jkl-color-text-subdued);font-family:sans-serif;font-weight:400}.jkl-select__outer-wrapper{max-width:100%;min-width:7rem;position:relative;width:15rem}.jkl-select__search-input{box-sizing:border-box;color:var(--jkl-color-text-subdued)}.jkl-select__button,.jkl-select__search-input{background-color:transparent;border:var(--border-width) solid var(--jkl-color-border-input);border-radius:var(--border-radius);box-shadow:0 0 0 .0625rem transparent;color:var(--jkl-color-text-subdued);cursor:pointer;height:var(--jkl-select-input-height);overflow:hidden;padding:var(--button-padding);text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;-webkit-padding-end:2.05em;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);padding-inline-end:2.05em;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-color-text-default)}.jkl-select__button:hover,.jkl-select__search-input:hover{border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button:focus-visible,.jkl-select__search-input:focus-visible{outline:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-select__arrow{color:var(--jkl-color-text-default);pointer-events:none;position:absolute;right:.75em;top:50%;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-select:has([aria-invalid=true]) .jkl-select__arrow{color:var(--jkl-color-text-on-alert)}.jkl-select__options-menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);box-sizing:border-box;margin-inline:-.0625rem;width:calc(100% + .125rem);--min-option-height:min(var(--jkl-unit-60),3rem);--option-padding:var(--jkl-unit-05) 0.75em;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--min-option-height));overflow-y:auto}.jkl-select__options-menu[data-popover-placement=bottom]{border-radius:0 0 var(--jkl-border-radius-s) var(--jkl-border-radius-s);border-top:none}.jkl-select__options-menu[data-popover-placement=top]{border-bottom:none;border-radius:var(--jkl-border-radius-s) var(--jkl-border-radius-s) 0 0}.jkl-select__option-wrapper{list-style-type:none;margin:0;padding:0;-webkit-overflow-scrolling:touch}.jkl-select__option{background-color:inherit;border:0;color:unset;cursor:pointer;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);min-height:var(--min-option-height);padding:var(--option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%;--jkl-icon-weight:300}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}.jkl-select__option-description{color:var(--jkl-color-text-subdued);display:block;font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);width:100%;--jkl-icon-weight:300}.jkl-select--inline{display:inline-block;vertical-align:top}.jkl-select--open .jkl-select__button,.jkl-select--open .jkl-select__search-input{background-color:var(--jkl-color-background-container-high);border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-select--open .jkl-select__button:hover~.jkl-select__arrow,.jkl-select--open .jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=bottom] .jkl-select__button,.jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=bottom] .jkl-select__search-input{border-bottom-left-radius:0;border-bottom-right-radius:0}.jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=top] .jkl-select__button,.jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=top] .jkl-select__search-input{border-top-left-radius:0;border-top-right-radius:0}.jkl-select--invalid .jkl-select__button,.jkl-select--invalid .jkl-select__search-input{background-color:var(--jkl-color-background-alert-error);color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--invalid .jkl-select__button--active-value,.jkl-select--invalid .jkl-select__search-input--active-value{color:revert}@media screen and (forced-colors:active){.jkl-select .jkl-select__button,.jkl-select .jkl-select__search-input{background-color:Canvas;border:2px solid ButtonText;color:CanvasText;outline:revert}.jkl-select .jkl-select__button:hover,.jkl-select .jkl-select__search-input:hover{border-color:Highlight}}@media screen and (forced-colors:active){.jkl-select__option{border-bottom:1px solid Canvas;border-top:1px solid Canvas;color:CanvasText}.jkl-select__option:focus,.jkl-select__option:hover{border-bottom:1px solid SelectedItem;border-top:1px solid SelectedItem;--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}}.jkl-popover.jkl-select__popover{background:none;border-radius:0;box-shadow:none;z-index:7000}@media (prefers-reduced-motion:no-preference){.jkl-select__options-menu{animation:jkl-select-options-menu-in var(--jkl-motion-timing-snappy) var(--jkl-motion-easing-standard)}.jkl-select__options-menu[data-popover-placement=top]{animation-name:jkl-select-options-menu-in-from-top}}@keyframes jkl-select-options-menu-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes jkl-select-options-menu-in-from-top{0%{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:translateY(0)}}.jkl-select__option:focus-visible{outline:none}}

package/styles/components/select/select.scss

@@ -141,17 +141,18 @@
         }
 
         &__options-menu {
-            position: absolute;
-            left: jkl.rem(-1px);
-            right: jkl.rem(-1px);
-            top: 100%;
-            z-index: jkl.$z-index--dropdown;
-
             background-color: var(--jkl-color-background-container-high);
             border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
-            border-top: none;
-            border-radius: 0 0 var(--border-radius) var(--border-radius);
             box-sizing: border-box;
+            // Strekker seg ut over kantene på trigger-knappen for å dekke
+            // den 1px brede borderen, slik at listen visuelt henger sammen
+            // med inputfeltet.
+            margin-inline: jkl.rem(-1px);
+            width: calc(100% + #{jkl.rem(2px)});
+            // Definerer egne tokens her fordi listen rendres i en portal og
+            // ikke arver kaskaderte custom properties fra `.jkl-select`.
+            --min-option-height: min(var(--jkl-unit-60), 3rem);
+            --option-padding: var(--jkl-unit-05) 0.75em;
 
             overflow-y: auto;
             // Sett makshøyde på listen til høyden av (maxShownOptions + 0.5) ganger høyden på ett enlinjes valg
@@ -160,9 +161,23 @@
                     var(--min-option-height)
             );
 
-            transition-property: height;
+            // Standard: lista ligger under triggeren — flat topp, runde
+            // bunnhjørner, ingen border på toppen som ville duplisert
+            // knappens border.
+            &[data-popover-placement="bottom"] {
+                border-top: none;
+                border-radius: 0 0 var(--jkl-border-radius-s)
+                    var(--jkl-border-radius-s);
+            }
 
-            @include jkl.motion;
+            // Når `flip` snur lista over knappen byttes flat side og runde
+            // hjørner, slik at lista og knappen fortsatt henger sammen
+            // visuelt.
+            &[data-popover-placement="top"] {
+                border-bottom: none;
+                border-radius: var(--jkl-border-radius-s)
+                    var(--jkl-border-radius-s) 0 0;
+            }
         }
 
         &__option-wrapper {
@@ -218,8 +233,6 @@
         &--open {
             .jkl-select__search-input,
             .jkl-select__button {
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
                 border-color: var(--jkl-color-border-input-focus);
                 background-color: var(--jkl-color-background-container-high);
                 box-shadow: 0 0 0 jkl.rem(1px)
@@ -229,6 +242,24 @@
                     transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
                 }
             }
+
+            // Lista ligger under (default): flat bunn på input/knapp.
+            .jkl-select__outer-wrapper[data-popover-placement="bottom"] {
+                .jkl-select__search-input,
+                .jkl-select__button {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+            }
+
+            // Lista ligger over: flat topp på input/knapp.
+            .jkl-select__outer-wrapper[data-popover-placement="top"] {
+                .jkl-select__search-input,
+                .jkl-select__button {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                }
+            }
         }
 
         &--invalid {
@@ -256,21 +287,88 @@
                     border-color: Highlight;
                 }
             }
+        }
+    }
 
-            & .jkl-select__option {
-                color: CanvasText;
+    // Options rendres i portal og er ikke descendants av `.jkl-select`,
+    // så forced-colors-reglene må stå på topp-nivå for å treffe dem.
+    @include jkl.forced-colors-mode {
+        .jkl-select__option {
+            color: CanvasText;
 
-                border-top: 1px solid Canvas;
-                border-bottom: 1px solid Canvas;
+            border-top: 1px solid Canvas;
+            border-bottom: 1px solid Canvas;
 
-                &:hover,
-                &:focus {
-                    border-top: 1px solid SelectedItem;
-                    border-bottom: 1px solid SelectedItem;
+            &:hover,
+            &:focus {
+                border-top: 1px solid SelectedItem;
+                border-bottom: 1px solid SelectedItem;
 
-                    @include jkl.no-grow-bold;
-                }
+                @include jkl.no-grow-bold;
             }
         }
     }
+
+    // Listen rendres i en portal via `Popover`. Vi nøytraliserer Popover sin
+    // standard padding/bakgrunn/skygge slik at `.jkl-select__options-menu`
+    // selv styrer ramme og bakgrunn — også når Select brukes inne i en
+    // Card, ExpandablePanel eller andre containere med overflow-clip.
+    // Select skal følge samme lagdeling som andre dropdown-/menykomponenter
+    // (Combobox, Datepicker, Menu) og ikke arve Popover sitt floating-nivå.
+    .jkl-popover.jkl-select__popover {
+        background: none;
+        box-shadow: none;
+        border-radius: 0;
+        z-index: jkl.$z-index--dropdown;
+    }
+
+    // Mild fade + slide-in når lista mounter i portalen. Animeres på
+    // selve listbox-en — ikke på popover-wrapperen — fordi wrapperen
+    // bærer floating-ui sin posisjonerings-`transform`. Hadde vi animert
+    // wrapperen ville `translateY` overstyrt floating-ui's transform i
+    // animasjonsvinduet, og lista ville blinket i (0,0).
+    @media (prefers-reduced-motion: no-preference) {
+        .jkl-select__options-menu {
+            animation: jkl-select-options-menu-in
+                var(--jkl-motion-timing-snappy)
+                var(--jkl-motion-easing-standard);
+
+            // Når lista flippes opp animerer vi fra motsatt retning slik
+            // at bevegelsen alltid kommer fra triggeren.
+            &[data-popover-placement="top"] {
+                animation-name: jkl-select-options-menu-in-from-top;
+            }
+        }
+    }
+
+    @keyframes jkl-select-options-menu-in {
+        from {
+            opacity: 0;
+            transform: translateY(jkl.rem(-4px));
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes jkl-select-options-menu-in-from-top {
+        from {
+            opacity: 0;
+            transform: translateY(jkl.rem(4px));
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    // Options rendres i en portal og er ikke lenger descendants av
+    // `.jkl-select`, så regelen `.jkl-select & *:focus-visible { outline:
+    // none }` treffer dem ikke. Vi gjenoppretter fokus-visualiseringen
+    // (background-color via &:focus) ved å eksplisitt fjerne den native
+    // outlinen på options i portalen.
+    .jkl-select__option:focus-visible {
+        outline: none;
+    }
 }

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

@@ -117,7 +117,7 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u4rmesp 400ms forwards;
+    animation: jkl-dismiss-usgzp54 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -147,7 +147,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u4rmesp {
+  @keyframes jkl-dismiss-usgzp54 {
     from {
       opacity: 1;
       transform: translateY(0);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-system-message{--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-spacing-20);--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-u4rmesp .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u4rmesp{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
+@layer jokul.components{.jkl-system-message{--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-spacing-20);--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-usgzp54 .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-usgzp54{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}

package/styles/components/toast/toast.css

@@ -135,12 +135,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-udsse7u 200ms ease-out forwards;
+    animation: jkl-entering-u19c75a 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-udsse8t 150ms ease-in forwards;
+    animation: jkl-exiting-u19c75h 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-udsse7u {
+  @keyframes jkl-entering-u19c75a {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -150,7 +150,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-udsse8t {
+  @keyframes jkl-exiting-u19c75h {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@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-udsse7u .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-udsse8t .15s ease-in forwards}@keyframes jkl-entering-udsse7u{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-udsse8t{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@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-u19c75a .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u19c75h .15s ease-in forwards}@keyframes jkl-entering-u19c75a{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u19c75h{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}

package/styles/styles.css

@@ -481,7 +481,7 @@
     --color: var(--jkl-color-text-default);
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u5wtga8 forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uuo87ie forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -547,7 +547,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-u5wtga8 {
+  @keyframes jkl-support-icon-entrance-uuo87ie {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -904,22 +904,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u5wtgaz;
+    animation-name: jkl-loader-left-spin-uuo87ix;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u5wtgbc;
+    animation-name: jkl-loader-middle-spin-uuo87jb;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u5wtgbf;
+    animation-name: jkl-loader-right-spin-uuo87js;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u5wtgaz {
+  @keyframes jkl-loader-left-spin-uuo87ix {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -933,7 +933,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u5wtgbc {
+  @keyframes jkl-loader-middle-spin-uuo87jb {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -950,7 +950,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u5wtgbf {
+  @keyframes jkl-loader-right-spin-uuo87js {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -990,7 +990,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u5wtgbu;
+      animation: 2s ease infinite jkl-blink-uuo87ju;
     }
   }
   .jkl-skeleton-input {
@@ -1038,10 +1038,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u5wtgbu;
+      animation: 2s ease-in-out infinite jkl-blink-uuo87ju;
     }
   }
-  @keyframes jkl-blink-u5wtgbu {
+  @keyframes jkl-blink-uuo87ju {
     0% {
       opacity: 1;
     }
@@ -2145,10 +2145,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u5wtgca var(--duration) linear forwards;
+    animation: jkl-downcount-uuo87ky var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u5wtgca {
+  @keyframes jkl-downcount-uuo87ky {
     from {
       width: 100%;
     }
@@ -2568,6 +2568,18 @@
     outline-offset: 3px;
     outline-offset: var(--outline-offset);
   }
+  .jkl-expandable__wrapper .jkl-expander {
+    padding: var(--jkl-unit-20);
+    width: 100%;
+  }
+  .jkl-expandable__wrapper .jkl-expander__label {
+    flex-grow: 1;
+  }
+  @media (hover: hover) {
+    .jkl-expandable__wrapper .jkl-expander:hover {
+      background-color: var(--jkl-color-background-interactive-selected);
+    }
+  }
   .jkl-expandable__focus-container {
     border-radius: var(--border-radius);
     position: absolute;
@@ -2579,8 +2591,6 @@
     appearance: none;
     border: none;
     text-align: left;
-    width: 100%;
-    padding: var(--jkl-unit-20);
     cursor: pointer;
     color: var(--jkl-color);
     display: flex;
@@ -2592,9 +2602,6 @@
   .jkl-expander::-webkit-details-marker {
     display: none;
   }
-  .jkl-expander__label {
-    flex-grow: 1;
-  }
   .jkl-expander__chevron {
     user-select: none;
     transition-property: transform;
@@ -2611,11 +2618,6 @@
     transition-timing-function: ease;
     transition-duration: 100ms;
   }
-  @media (hover: hover) {
-    .jkl-expander:hover {
-      background-color: var(--jkl-color-background-interactive-selected);
-    }
-  }
   .jkl-expander {
     outline: 0;
     border-style: none;
@@ -2660,12 +2662,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u5wtgcd 0.25s ease-out;
+    animation: jkl-show-uuo87l5 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u5wtgcd {
+  @keyframes jkl-show-uuo87l5 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2880,7 +2882,7 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u5wtgcw 400ms ease-in-out forwards;
+    animation: jkl-dismiss-uuo87lo 400ms ease-in-out forwards;
     transition: visibility 0ms 400ms;
     visibility: hidden;
   }
@@ -2902,7 +2904,7 @@
   .jkl-form-error-message {
     padding-bottom: calc(var(--jkl-unit-base) * 5);
   }
-  @keyframes jkl-dismiss-u5wtgcw {
+  @keyframes jkl-dismiss-uuo87lo {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -4366,21 +4368,23 @@
     color: var(--jkl-color-text-on-alert);
   }
   .jkl-select__options-menu {
-    position: absolute;
-    left: -0.0625rem;
-    right: -0.0625rem;
-    top: 100%;
-    z-index: 7000;
     background-color: var(--jkl-color-background-container-high);
     border: 0.125rem solid var(--jkl-color-border-input-focus);
-    border-top: none;
-    border-radius: 0 0 var(--border-radius) var(--border-radius);
     box-sizing: border-box;
+    margin-inline: -0.0625rem;
+    width: calc(100% + 0.125rem);
+    --min-option-height: min(var(--jkl-unit-60), 3rem);
+    --option-padding: var(--jkl-unit-05) 0.75em;
     overflow-y: auto;
     max-height: calc((var(--jkl-select-max-shown-options, 5) + 0.5) * var(--min-option-height));
-    transition-property: height;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+  }
+  .jkl-select__options-menu[data-popover-placement=bottom] {
+    border-top: none;
+    border-radius: 0 0 var(--jkl-border-radius-s) var(--jkl-border-radius-s);
+  }
+  .jkl-select__options-menu[data-popover-placement=top] {
+    border-bottom: none;
+    border-radius: var(--jkl-border-radius-s) var(--jkl-border-radius-s) 0 0;
   }
   .jkl-select__option-wrapper {
     margin: 0;
@@ -4433,8 +4437,6 @@
   }
   .jkl-select--open .jkl-select__search-input,
   .jkl-select--open .jkl-select__button {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
     border-color: var(--jkl-color-border-input-focus);
     background-color: var(--jkl-color-background-container-high);
     box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
@@ -4443,6 +4445,16 @@
   .jkl-select--open .jkl-select__button:hover ~ .jkl-select__arrow {
     transform: translateY(calc(-50% + -0.1875rem));
   }
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=bottom] .jkl-select__search-input,
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=bottom] .jkl-select__button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=top] .jkl-select__search-input,
+  .jkl-select--open .jkl-select__outer-wrapper[data-popover-placement=top] .jkl-select__button {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
   .jkl-select--invalid .jkl-select__search-input,
   .jkl-select--invalid .jkl-select__button {
     background-color: var(--jkl-color-background-alert-error);
@@ -4462,12 +4474,14 @@
     .jkl-select .jkl-select__button:hover, .jkl-select .jkl-select__search-input:hover {
       border-color: Highlight;
     }
-    .jkl-select .jkl-select__option {
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-select__option {
       color: CanvasText;
       border-top: 1px solid Canvas;
       border-bottom: 1px solid Canvas;
     }
-    .jkl-select .jkl-select__option:hover, .jkl-select .jkl-select__option:focus {
+    .jkl-select__option:hover, .jkl-select__option:focus {
       border-top: 1px solid SelectedItem;
       border-bottom: 1px solid SelectedItem;
       --jkl-icon-weight: 400;
@@ -4475,6 +4489,43 @@
       letter-spacing: -0.014em;
     }
   }
+  .jkl-popover.jkl-select__popover {
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    z-index: 7000;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .jkl-select__options-menu {
+      animation: jkl-select-options-menu-in var(--jkl-motion-timing-snappy) var(--jkl-motion-easing-standard);
+    }
+    .jkl-select__options-menu[data-popover-placement=top] {
+      animation-name: jkl-select-options-menu-in-from-top;
+    }
+  }
+  @keyframes jkl-select-options-menu-in {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes jkl-select-options-menu-in-from-top {
+    from {
+      opacity: 0;
+      transform: translateY(0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .jkl-select__option:focus-visible {
+    outline: none;
+  }
 }
 @layer jokul.components {
   .jkl-progress-bar {
@@ -4529,7 +4580,7 @@
     transition-timing-function: ease;
     transition-duration: 150ms;
   }
-  @keyframes jkl-downcount-u5wtgd2 {
+  @keyframes jkl-downcount-uuo87lr {
     from {
       width: 100%;
     }
@@ -5033,7 +5084,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u5wtgeh 400ms forwards;
+    animation: jkl-dismiss-uuo87mz 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -5063,7 +5114,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u5wtgeh {
+  @keyframes jkl-dismiss-uuo87mz {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5900,12 +5951,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-u5wtgf4 200ms ease-out forwards;
+    animation: jkl-entering-uuo87n4 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u5wtgft 150ms ease-in forwards;
+    animation: jkl-exiting-uuo87nj 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-u5wtgf4 {
+  @keyframes jkl-entering-uuo87n4 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5915,7 +5966,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u5wtgft {
+  @keyframes jkl-exiting-uuo87nj {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);