@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.10

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

@@ -3,7 +3,7 @@
  */
 @layer jokul.components {
   .jkl-input-panel {
-    --outer-border-color: var(--jkl-color-border-input);
+    --outer-border-color: var(--jkl-color-border-default);
     --outer-border-thickness: 0.0625rem;
     --background-color: transparent;
     --padding-inline: var(--jkl-unit-25);
@@ -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 {
@@ -26,28 +26,27 @@
     position: relative;
     padding: var(--jkl-unit-20) var(--padding-inline);
   }
-  .jkl-input-panel__header__amount {
-    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;
-  }
-  .jkl-input-panel__header label,
   .jkl-input-panel__header .jkl-radio-button,
   .jkl-input-panel__header .jkl-checkbox {
-    position: unset;
+    grid-column: 1/-1;
+    grid-row: 1;
+    inline-size: 100%;
   }
-  .jkl-input-panel__header label::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
+  .jkl-input-panel__header label {
     inline-size: 100%;
-    block-size: 100%;
+  }
+  .jkl-input-panel__header__amount {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+    pointer-events: none;
+    position: relative;
+    z-index: 1;
+    font: var(--jkl-text-style-text-medium);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-input-panel__description {
     height: 0;
@@ -55,27 +54,24 @@
     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) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-input-panel:has(:checked), .jkl-input-panel[data-always-open=true], .jkl-input-panel:not([data-always-open]) {
-    --background-color: var(--jkl-color-background-container-high);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-input-panel:has(:checked) .jkl-input-panel__description, .jkl-input-panel[data-always-open=true] .jkl-input-panel__description, .jkl-input-panel:not([data-always-open]) .jkl-input-panel__description {
     height: auto;
     padding-block-end: var(--jkl-unit-20);
   }
   .jkl-input-panel:has(input:hover) {
-    --outer-border-color: var(--jkl-color-border-separator-hover);
+    --outer-border-color: var(--jkl-color-border-strong);
     --outer-border-thickness: 0.125rem;
     cursor: pointer;
   }
@@ -85,4 +81,7 @@
     /* Visuell justering pga. rundt ikon */
     margin-inline-start: -0.15em;
   }
+  .jkl-radio-panel .jkl-radio-button__input:focus-visible + .jkl-radio-button__label::before {
+    outline: none;
+  }
 }

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-default);--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 .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1;inline-size:100%}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.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-strong);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)}.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-strong);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-radio-panel .jkl-radio-button{-webkit-margin-start:-.15em;margin-inline-start:-.15em}.jkl-radio-panel .jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{outline:none}}

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()};
@@ -9,4 +9,8 @@ $_radio-panel-dot-animation-name: jkl-dot-in-#{string.unique-id()};
         /* Visuell justering pga. rundt ikon */
         margin-inline-start: -0.15em;
     }
+
+    .jkl-radio-panel .jkl-radio-button__input:focus-visible + .jkl-radio-button__label::before {
+        outline: none;
+    }
 }

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

@@ -26,9 +26,9 @@
   width: 1px;
   inset: 0;
   inset-block: 20%;
-  background-color: var(--jkl-color-border-separator);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  background-color: var(--jkl-color-border-subdued);
+  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-subdued);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) {
@@ -27,7 +27,7 @@
             width: 1px;
             inset: 0;
             inset-block: 20%;
-            background-color: var(--jkl-color-border-separator);
+            background-color: var(--jkl-color-border-subdued);
 
             @include jkl.motion;
             transition-property: inset;

package/styles/components/search/search.css

@@ -5,12 +5,9 @@
   --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);
+  --border: var(--border-width) solid var(--jkl-color-border-default);
   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;
@@ -66,7 +60,7 @@
   justify-content: center;
   height: 100%;
   grid-column: 1;
-  font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", monospace;
+  font-family: "Jokul Icons", "Jokul Icons Fallback", monospace;
 }
 .jkl-search .input-wrapper:has(.clear-button) {
   grid-template-columns: 1.3em 1fr 1.3em;
@@ -96,17 +90,17 @@
   grid-row: 1;
   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-family: "Jokul Icons", "Jokul Icons Fallback", sans-serif;
+  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,14 +111,14 @@
   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 {
   opacity: 0.15;
 }
 .jkl-search .clear-button:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }

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-default);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:Jokul Icons,Jokul Icons 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:Jokul Icons,Jokul Icons 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-strong);outline-offset:3px}

package/styles/components/search/search.scss

@@ -1,11 +1,11 @@
-@use "../../core/jkl/index" as jkl;
-@use "../../components/icon/base-styles" as icon;
+@use "../../jkl/index" as jkl;
+@use "../icon/base-styles" as icon;
 
 .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);
+    --border: var(--border-width) solid var(--jkl-color-border-default);
 
     width: 100%;
 
@@ -47,7 +47,7 @@
             height: 100%;
             grid-column: 1;
 
-            @include jkl.use-font-family("Fremtind Material Symbols");
+            @include jkl.use-font-family("Jokul Icons");
         }
 
         &:has(.clear-button) {