@fremtind/jokul 4.3.0 → 5.0.0-next.1

package/styles/components/pagination/pagination.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-pagination {

package/styles/components/popover/popover.css

@@ -2,26 +2,14 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-    }
-  }
-  [data-theme=light] {
-    --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-    }
-  }
-  [data-theme=dark] {
-    --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-  }
   .jkl-popover {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --shadow-color: rgb(49 48 48 / 20%);
+    --shadow-color: light-dark(rgb(49 48 48 / 20%), rgb(0 0 0 / 50%));
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     padding: var(--popover-padding, 0);
     z-index: 10000;
-    box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
+    box-shadow: 0 4px 20px 0 var(--shadow-color);
     background-color: var(--jkl-color-background-container-high);
     border-radius: var(--jkl-border-radius-s);
   }

package/styles/components/popover/popover.min.css

@@ -1 +1 @@
-@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-datepicker-box-shadow:rgba(49,48,48,.2)}}[data-theme=light]{--jkl-datepicker-box-shadow:rgba(49,48,48,.2)}@media screen and (prefers-color-scheme:dark){:root{--jkl-datepicker-box-shadow:rgba(0,0,0,.5)}}[data-theme=dark]{--jkl-datepicker-box-shadow:rgba(0,0,0,.5)}.jkl-popover{background-color:var(--jkl-color-background-container-high);border-radius:var(--jkl-border-radius-s);box-shadow:0 4px 20px 0 var(--jkl-datepicker-box-shadow);padding:var(--popover-padding,0);z-index:10000}}
+@layer jokul.components{.jkl-popover{--shadow-color:rgba(49,48,48,.2);--shadow-color:light-dark(rgba(49,48,48,.2),rgba(0,0,0,.5));background-color:var(--jkl-color-background-container-high);border-radius:var(--jkl-border-radius-s);box-shadow:0 4px 20px 0 var(--shadow-color);padding:var(--popover-padding,0);z-index:10000}}

package/styles/components/popover/popover.scss

@@ -1,19 +1,15 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
-    @include jkl.light-mode-variables {
-        --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-    }
-
-    @include jkl.dark-mode-variables {
-        --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-    }
-
     .jkl-popover {
+        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+        --shadow-color: rgb(49 48 48 / 20%);
+        --shadow-color: light-dark(rgb(49 48 48 / 20%), rgb(0 0 0 / 50%));
+        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
         padding: var(--popover-padding, 0);
         z-index: jkl.$z-index--floating;
-        box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
+        box-shadow: 0 4px 20px 0 var(--shadow-color);
         background-color: var(--jkl-color-background-container-high);
         border-radius: var(--jkl-border-radius-s);
     }

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

@@ -27,10 +27,10 @@
   }
   .jkl-progress-bar__tracker {
     transition-property: width;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uxy1lfv {
+  @keyframes jkl-downcount-u9avzon {
     from {
       width: 100%;
     }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}@keyframes jkl-downcount-uxy1lfv{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:var(--jkl-motion-timing-productive);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard)}@keyframes jkl-downcount-u9avzon{0%{width:100%}to{width:0}}}

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

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use "../../core/jkl";
+@use "../../jkl";
 @use "../../shared/track/track";
 
 $_downcount: jkl-downcount-#{string.unique-id()};

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

@@ -2,23 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-radio-button-error-color: #ab2e43;
-    }
-  }
-  [data-theme=light] {
-    --jkl-radio-button-error-color: #ab2e43;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-radio-button-error-color: #d79ba5;
-    }
-  }
-  [data-theme=dark] {
-    --jkl-radio-button-error-color: #d79ba5;
-  }
   .jkl-radio-button {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --jkl-radio-button-error-color: #ab2e43;
+    --jkl-radio-button-error-color: light-dark(#ab2e43, #d79ba5);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     display: flex;
     position: relative;
   }
@@ -52,31 +40,25 @@
   .jkl-radio-button__label {
     cursor: pointer;
     display: flex;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-  }
-  .jkl-radio-button__label:hover, .jkl-radio-button__label:active {
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-radio-button__label::before {
     content: "radio_button_unchecked";
     margin-inline-end: 0.25em;
     font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
     font-size: 1.3em;
-    font-weight: var(--jkl-icon-weight, 300);
+    font-weight: 400;
     line-height: 1;
     display: inline-block;
     -webkit-font-smoothing: antialiased;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: font-variation-settings, transform;
   }
   .jkl-radio-button__label:has(+ :checked)::before {
@@ -98,6 +80,6 @@
   .jkl-radio-button + .jkl-form-support-label {
     margin-left: 1.75em;
     margin-top: 0.25lh;
-    margin-bottom: var(--jkl-unit-base);
+    margin-bottom: var(--jkl-unit-10);
   }
 }

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

@@ -1 +1 @@
-@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-radio-button-error-color:#ab2e43}}[data-theme=light]{--jkl-radio-button-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-radio-button-error-color:#d79ba5}}[data-theme=dark]{--jkl-radio-button-error-color:#d79ba5}.jkl-radio-button{border-style:none;display:flex;outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{inset:0 auto 0 0;opacity:0;pointer-events:none;position:absolute;width:1lh}.jkl-radio-button__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:400}.jkl-radio-button__label:before{content:"radio_button_unchecked";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-radio-button__label:has(+:checked):before{content:"radio_button_checked"}.jkl-radio-button__label:has(+[aria-invalid=true]):before{color:var(--jkl-radio-button-error-color)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-bottom:var(--jkl-unit-base);margin-left:1.75em;margin-top:.25lh}}
+@layer jokul.components{.jkl-radio-button{--jkl-radio-button-error-color:#ab2e43;--jkl-radio-button-error-color:light-dark(#ab2e43,#d79ba5);border-style:none;display:flex;outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{inset:0 auto 0 0;opacity:0;pointer-events:none;position:absolute;width:1lh}.jkl-radio-button__label{cursor:pointer;display:flex;font:var(--jkl-text-style-text-medium);transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-radio-button__label:before{content:"radio_button_unchecked";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-radio-button__label:has(+:checked):before{content:"radio_button_checked"}.jkl-radio-button__label:has(+[aria-invalid=true]):before{color:var(--jkl-radio-button-error-color)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-bottom:var(--jkl-unit-10);margin-left:1.75em;margin-top:.25lh}}

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

@@ -1,19 +1,14 @@
 @charset "UTF-8";
 @use "sass:string";
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
+@use "../../jkl";
 @use "../icon/base-styles" as icon;
 
 @layer jokul.components {
-    @include jkl.light-mode-variables {
-        --jkl-radio-button-error-color: #ab2e43;
-    }
-
-    @include jkl.dark-mode-variables {
-        --jkl-radio-button-error-color: #d79ba5;
-    }
-
     .jkl-radio-button {
+        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+        --jkl-radio-button-error-color: #ab2e43;
+        --jkl-radio-button-error-color: light-dark(#ab2e43, #d79ba5);
+        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
         display: flex;
         position: relative;
 
@@ -39,11 +34,6 @@
 
             @include jkl.text-style("text-medium");
 
-            &:hover,
-            &:active {
-                --jkl-icon-weight: #{jkl.$icon-weight-bold};
-            }
-
             &::before {
                 content: "radio_button_unchecked";
                 margin-inline-end: 0.25em;

package/styles/components/radio-panel/development/styles.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl/" as jkl;
+@use "../../jkl/" as jkl;
 
 .input-panel-example {
     &__season-tag {

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

@@ -13,8 +13,8 @@
     display: flex;
     flex-direction: column;
     interpolate-size: allow-keywords;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: box-shadow;
   }
   .jkl-input-panel__header {
@@ -30,11 +30,8 @@
     display: flex;
     height: 100%;
     align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-medium);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-input-panel__header label,
   .jkl-input-panel__header .jkl-radio-button,
@@ -55,12 +52,9 @@
     padding-inline: var(--padding-inline);
     padding-block-end: var(--jkl-spacing-none);
     line-height: initial;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-paragraph-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: height;
   }
   .jkl-input-panel:has(:focus-visible) {

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:.15s;transition-property:box-shadow;transition-timing-function:ease}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header__amount{align-items:center;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;height:100%;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;font-weight:700}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header label:after{block-size:100%;content:"";inline-size:100%;left:0;position:absolute;top:0}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);font-size:var(--jkl-font-size-3);font-weight:400;line-height:normal;line-height:var(--jkl-line-height-relaxed);padding-block-end:var(--jkl-spacing-none);--jkl-icon-weight:300;transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-radio-panel .jkl-radio-button{-webkit-margin-start:-.15em;margin-inline-start:-.15em}}
+@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);height:100%}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header label:after{block-size:100%;content:"";inline-size:100%;left:0;position:absolute;top:0}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-spacing-none);transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-radio-panel .jkl-radio-button{-webkit-margin-start:-.15em;margin-inline-start:-.15em}}

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

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use "../../core/jkl";
+@use "../../jkl";
 @use "../input-panel/input-panel";
 
 $_radio-panel-dot-animation-name: jkl-dot-in-#{string.unique-id()};

package/styles/components/search/search-with-submit-button.css

@@ -27,8 +27,8 @@
   inset: 0;
   inset-block: 20%;
   background-color: var(--jkl-color-border-separator);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: inset;
 }
 .jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover::before {

package/styles/components/search/search-with-submit-button.min.css

@@ -1 +1 @@
-.jkl-search:has(button.jkl-search-submit){align-items:end;display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-search:has(button.jkl-search-submit) .input-wrapper{-webkit-border-end:0;border-bottom-right-radius:0;border-inline-end:0;border-top-right-radius:0}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit{border:var(--border);height:100%;-webkit-border-start:0;border-inline-start:0;border-radius:var(--jkl-border-radius-s);border-bottom-left-radius:0;border-top-left-radius:0;min-width:unset}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:before{background-color:var(--jkl-color-border-separator);content:"";inset:0;inset-block:20%;position:absolute;transition-duration:.15s;transition-property:inset;transition-timing-function:ease;width:1px}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover:before{inset-block:0}
+.jkl-search:has(button.jkl-search-submit){align-items:end;display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-search:has(button.jkl-search-submit) .input-wrapper{-webkit-border-end:0;border-bottom-right-radius:0;border-inline-end:0;border-top-right-radius:0}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit{border:var(--border);height:100%;-webkit-border-start:0;border-inline-start:0;border-radius:var(--jkl-border-radius-s);border-bottom-left-radius:0;border-top-left-radius:0;min-width:unset}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:before{background-color:var(--jkl-color-border-separator);content:"";inset:0;inset-block:20%;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:inset;transition-timing-function:var(--jkl-motion-easing-standard);width:1px}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover:before{inset-block:0}

package/styles/components/search/search-with-submit-button.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl/index" as jkl;
+@use "../../jkl/index" as jkl;
 @use "../../shared/input/shared-input-styles" as shared;
 
 .jkl-search:has(button.jkl-search-submit) {

package/styles/components/search/search.css

@@ -7,10 +7,7 @@
   --border-width: 1px;
   --border: var(--border-width) solid var(--jkl-color-border-input);
   width: 100%;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  font: var(--jkl-text-style-text-medium);
 }
 .jkl-search input[type=search] {
   appearance: none;
@@ -40,10 +37,7 @@
   }
 }
 .jkl-search input[type=search] {
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  font: var(--jkl-text-style-text-medium);
 }
 .jkl-search input[type=search]::-webkit-search-cancel-button, .jkl-search input[type=search]::-webkit-calendar-picker-indicator, .jkl-search input[type=search]::-webkit-search-results-button {
   appearance: none;
@@ -97,16 +91,16 @@
   grid-column: 1;
   z-index: 1;
   font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-  font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+  font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
   font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
   font-size: 1.3em;
-  font-weight: var(--jkl-icon-weight, 300);
+  font-weight: 400;
   line-height: 1;
   display: inline-block;
   -webkit-font-smoothing: antialiased;
-  transition-timing-function: ease;
-  transition-duration: 75ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-energetic);
   transition-property: font-variation-settings, transform;
 }
 .jkl-search .clear-button::after {
@@ -117,8 +111,8 @@
   background-color: var(--jkl-color-text-default);
   opacity: 0;
   border-radius: inherit;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: opacity;
 }
 .jkl-search .clear-button:hover::after {

package/styles/components/search/search.min.css

@@ -1 +1 @@
-.jkl-search{--icon-size:var(--jkl-text-input-height);--border-radius:var(--jkl-border-radius-s);--border-width:1px;--border:var(--border-width) solid var(--jkl-color-border-input);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);width:100%;--jkl-icon-weight:300}.jkl-search input[type=search]{-webkit-appearance:none;appearance:none;background-color:transparent;color:var(--jkl-color-text-default);grid-column:2/3;padding:0}.jkl-search input[type=search]{border-style:none;outline:0;outline-style:none}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-search input[type=search]{border-style:revert;outline:revert;outline-style:revert}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:revert;outline-style:revert}}.jkl-search input[type=search]{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300}.jkl-search input[type=search]::-webkit-calendar-picker-indicator,.jkl-search input[type=search]::-webkit-search-cancel-button,.jkl-search input[type=search]::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none!important}.jkl-search .input-wrapper{border:var(--border);border-radius:var(--border-radius);box-sizing:border-box;display:grid;gap:.25em;grid-template-columns:1.3em 1fr;-webkit-padding-end:0;padding-inline-end:0;padding:calc(var(--jkl-unit-15) - var(--border-width))}.jkl-search .input-wrapper:before{align-items:center;content:attr(data-icon)/"";display:inline-flex;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,monospace;grid-column:1;height:100%;justify-content:center}.jkl-search .input-wrapper:has(.clear-button){grid-template-columns:1.3em 1fr 1.3em}.jkl-search:has(input:not(:valid),input:placeholder-shown) .clear-button{display:none}.jkl-search .clear-button{-webkit-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:100%;color:var(--jkl-color-text-default);cursor:pointer;display:grid;height:100%;padding:0;position:relative}.jkl-search .clear-button:before{align-items:center;content:"close"/"";display:inline-grid;justify-content:center;place-self:center;align-self:center;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);grid-column:1;grid-row:1;line-height:1;z-index:1;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-search .clear-button:after{--tap-size:1.25lh;background-color:var(--jkl-color-text-default);border-radius:inherit;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-search .clear-button:hover:after{opacity:.15}.jkl-search .clear-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}
+.jkl-search{--icon-size:var(--jkl-text-input-height);--border-radius:var(--jkl-border-radius-s);--border-width:1px;--border:var(--border-width) solid var(--jkl-color-border-input);font:var(--jkl-text-style-text-medium);width:100%}.jkl-search input[type=search]{-webkit-appearance:none;appearance:none;background-color:transparent;color:var(--jkl-color-text-default);grid-column:2/3;padding:0}.jkl-search input[type=search]{border-style:none;outline:0;outline-style:none}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-search input[type=search]{border-style:revert;outline:revert;outline-style:revert}.jkl-search input[type=search]:active,.jkl-search input[type=search]:focus,.jkl-search input[type=search]:hover{outline:revert;outline-style:revert}}.jkl-search input[type=search]{font:var(--jkl-text-style-text-medium)}.jkl-search input[type=search]::-webkit-calendar-picker-indicator,.jkl-search input[type=search]::-webkit-search-cancel-button,.jkl-search input[type=search]::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none!important}.jkl-search .input-wrapper{border:var(--border);border-radius:var(--border-radius);box-sizing:border-box;display:grid;gap:.25em;grid-template-columns:1.3em 1fr;-webkit-padding-end:0;padding-inline-end:0;padding:calc(var(--jkl-unit-15) - var(--border-width))}.jkl-search .input-wrapper:before{align-items:center;content:attr(data-icon)/"";display:inline-flex;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,monospace;grid-column:1;height:100%;justify-content:center}.jkl-search .input-wrapper:has(.clear-button){grid-template-columns:1.3em 1fr 1.3em}.jkl-search:has(input:not(:valid),input:placeholder-shown) .clear-button{display:none}.jkl-search .clear-button{-webkit-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:100%;color:var(--jkl-color-text-default);cursor:pointer;display:grid;height:100%;padding:0;position:relative}.jkl-search .clear-button:before{align-items:center;content:"close"/"";display:inline-grid;justify-content:center;place-self:center;align-self:center;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;grid-column:1;grid-row:1;line-height:1;z-index:1;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-search .clear-button:after{--tap-size:1.25lh;background-color:var(--jkl-color-text-default);border-radius:inherit;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-search .clear-button:hover:after{opacity:.15}.jkl-search .clear-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}

package/styles/components/search/search.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl/index" as jkl;
+@use "../../jkl/index" as jkl;
 @use "../../components/icon/base-styles" as icon;
 
 .jkl-search {