@fremtind/jokul 3.1.0 → 3.3.0

package/styles/components-beta/link-list/link-list.min.css

@@ -0,0 +1 @@
+.jkl-link-list--beta{--border:1px solid var(--jkl-color-border-separator);--text-color:var(--jkl-color-text-default);font-size:1.125rem;font-weight:400;line-height:1.75rem;--jkl-icon-weight:300}@media (min-width:680px){.jkl-link-list--beta{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-link-list--beta .jkl-link-list-title{-webkit-margin-after:var(--jkl-unit-10);font-size:1rem;font-weight:400;line-height:1.5rem;margin-block-end:var(--jkl-unit-10);--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-link-list--beta ul{display:flex;flex-direction:column;height:-webkit-min-content;height:min-content;margin:0;padding:0;width:100%}.jkl-link-list--beta .jkl-link-list-item{display:flex}.jkl-link-list--beta .jkl-link-list-item:not(:last-of-type) .jkl-link-list-link{-webkit-border-after:var(--border);border-block-end:var(--border)}.jkl-link-list--beta .jkl-link-list-link{align-items:center;box-sizing:border-box;color:var(--text-color);display:flex;gap:var(--jkl-unit-20);text-decoration:none;text-wrap:balance;width:100%}.jkl-link-list--beta:has(ul) .jkl-link-list-title{-webkit-margin-start:var(--jkl-unit-05);margin-inline-start:var(--jkl-unit-05)}.jkl-link-list--beta ul{background:var(--jkl-color-background-container-low);border-radius:var(--jkl-unit-05);overflow:hidden}.jkl-link-list--beta ul .jkl-link-list-link{justify-content:space-between;padding:var(--jkl-unit-20);transition-duration:.15s;transition-property:background;transition-timing-function:ease}.jkl-link-list--beta ul .jkl-link-list-link:after{content:"arrow_forward"/"";font-family:Fremtind Material Symbols;font-weight:300;transition-duration:.15s;transition-property:translate;transition-timing-function:ease}.jkl-link-list--beta ul .jkl-link-list-link:is(:hover,:focus-visible){background:var(--jkl-color-background-interactive-selected)}.jkl-link-list--beta ul .jkl-link-list-link:is(:hover,:focus-visible):after{translate:4px 0}

package/styles/components-beta/link-list/link-list.scss

@@ -0,0 +1,81 @@
+@use "../../core/jkl";
+
+.jkl-link-list--beta {
+    --border: 1px solid var(--jkl-color-border-separator);
+    --text-color: var(--jkl-color-text-default);
+
+    @include jkl.text-style("body");
+
+    .jkl-link-list-title {
+        margin-block-end: var(--jkl-unit-10);
+        @include jkl.text-style("small");
+    }
+
+    & ul {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        height: min-content;
+    }
+
+    & .jkl-link-list-item {
+        display: flex;
+
+        &:not(:last-of-type) {
+            .jkl-link-list-link {
+                border-block-end: var(--border);
+            }
+        }
+    }
+
+    & .jkl-link-list-link {
+        display: flex;
+        align-items: center;
+        gap: var(--jkl-unit-20);
+        width: 100%;
+        text-decoration: none;
+        color: var(--text-color);
+        text-wrap: balance;
+        box-sizing: border-box;
+    }
+
+    &:has(ul) {
+        .jkl-link-list-title {
+            margin-inline-start: var(--jkl-unit-05);
+        }
+    }
+
+    & ul {
+        border-radius: var(--jkl-unit-05);
+        overflow: hidden;
+        background: var(--jkl-color-background-container-low);
+
+        .jkl-link-list-link {
+            justify-content: space-between;
+            padding: var(--jkl-unit-20);
+
+
+            @include jkl.motion("standard", "productive");
+            transition-property: background;
+
+            &::after {
+                content: "arrow_forward" / "";
+                font-family: "Fremtind Material Symbols";
+                font-weight: 300;
+
+                @include jkl.motion("standard", "productive");
+                transition-property: translate;
+            }
+
+            &:is(:hover, :focus-visible) {
+                background: var(--jkl-color-background-interactive-selected);
+
+                &::after {
+                    translate: 4px 0;
+                }
+            }
+        }
+    }
+}

package/styles/components-beta/nav-link/_index.scss

@@ -0,0 +1 @@
+@forward "navlink";

package/styles/components-beta/nav-link/navlink.css

@@ -0,0 +1,68 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.jkl-navlink--beta {
+  --border-radius: 4px;
+  --separator: 1px solid var(--jkl-color-border-separator);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  column-gap: 2em;
+  color: inherit;
+  text-decoration: none;
+  background-color: var(--jkl-color-background-container-low);
+  padding: var(--jkl-spacing-s);
+  border-radius: 0;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  .jkl-navlink--beta {
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+}
+.jkl-navlink--beta {
+  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
+  transition-duration: 150ms;
+  transition-property: background-color;
+}
+.jkl-navlink--beta .title,
+.jkl-navlink--beta .description {
+  grid-column: 1;
+}
+.jkl-navlink--beta:has(.description) .title {
+  font-weight: bold;
+}
+.jkl-navlink--beta::after {
+  content: "arrow_forward"/"";
+  font-family: "Fremtind Material Symbols";
+  align-self: center;
+  grid-column: 2;
+  grid-row: 1/span 999;
+  translate: 0;
+  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
+  transition-duration: 150ms;
+  transition-property: translate;
+}
+.jkl-navlink--beta:hover, .jkl-navlink--beta:focus-visible {
+  background-color: var(--jkl-color-background-interactive-selected);
+}
+.jkl-navlink--beta:hover::after, .jkl-navlink--beta:focus-visible::after {
+  translate: 4px 0;
+}
+.jkl-navlink--beta:first-of-type {
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
+}
+.jkl-navlink--beta:last-of-type {
+  border-end-start-radius: var(--border-radius);
+  border-end-end-radius: var(--border-radius);
+}
+.jkl-navlink--beta:has(+ .jkl-navlink--beta) {
+  border-block-end: var(--separator);
+}

package/styles/components-beta/nav-link/navlink.min.css

@@ -0,0 +1 @@
+.jkl-navlink--beta{--border-radius:4px;--separator:1px solid var(--jkl-color-border-separator);align-items:center;background-color:var(--jkl-color-background-container-low);border-radius:0;color:inherit;column-gap:2em;display:grid;font-size:1.125rem;font-weight:400;grid-template-columns:1fr auto;line-height:1.75rem;padding:var(--jkl-spacing-s);text-decoration:none;--jkl-icon-weight:300}@media (min-width:680px){.jkl-navlink--beta{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-navlink--beta{transition-duration:.15s;transition-property:background-color;transition-timing-function:cubic-bezier(0,0,.375,1.17)}.jkl-navlink--beta .description,.jkl-navlink--beta .title{grid-column:1}.jkl-navlink--beta:has(.description) .title{font-weight:700}.jkl-navlink--beta:after{align-self:center;content:"arrow_forward"/"";font-family:Fremtind Material Symbols;grid-column:2;grid-row:1/span 999;transition-duration:.15s;transition-property:translate;transition-timing-function:cubic-bezier(0,0,.375,1.17);translate:0}.jkl-navlink--beta:focus-visible,.jkl-navlink--beta:hover{background-color:var(--jkl-color-background-interactive-selected)}.jkl-navlink--beta:focus-visible:after,.jkl-navlink--beta:hover:after{translate:4px 0}.jkl-navlink--beta:first-of-type{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.jkl-navlink--beta:last-of-type{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.jkl-navlink--beta:has(+.jkl-navlink--beta){-webkit-border-after:var(--separator);border-block-end:var(--separator)}

package/styles/components-beta/nav-link/navlink.scss

@@ -0,0 +1,66 @@
+@use "../../core/jkl/index" as jkl;
+
+.jkl-navlink--beta {
+    --border-radius: 4px;
+    --separator: 1px solid var(--jkl-color-border-separator);
+
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    column-gap: 2em;
+    color: inherit;
+    text-decoration: none;
+    background-color: var(--jkl-color-background-container-low);
+    padding: var(--jkl-spacing-s);
+    border-radius: 0;
+
+    @include jkl.text-style("body");
+
+    @include jkl.motion("easeInBounceOut", "productive");
+    transition-property: background-color;
+
+    .title,
+    .description {
+        grid-column: 1;
+    }
+
+    &:has(.description) {
+        .title {
+            font-weight: bold;
+        }
+    }
+
+    &::after {
+        content: "arrow_forward" / "";
+        font-family: "Fremtind Material Symbols";
+        align-self: center;
+        grid-column: 2;
+        grid-row: 1 / span 999;
+        translate: 0;
+
+        @include jkl.motion("easeInBounceOut", "productive");
+        transition-property: translate;
+    }
+
+    &:hover, &:focus-visible {
+        background-color: var(--jkl-color-background-interactive-selected);
+
+        &::after {
+            translate: 4px 0;
+        }
+    }
+
+    &:first-of-type {
+        border-start-start-radius: var(--border-radius);
+        border-start-end-radius: var(--border-radius);
+    }
+
+    &:last-of-type {
+        border-end-start-radius: var(--border-radius);
+        border-end-end-radius: var(--border-radius);
+    }
+
+    &:has( + .jkl-navlink--beta) {
+        border-block-end: var(--separator);
+    }
+}

package/styles/components-beta/search/_index.scss

@@ -0,0 +1,4 @@
+@forward "search";
+@forward "search-with-submit-button";
+@use "../../components/icon/index" as icon;
+@use "../../components/input-group/index" as input-group;

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

@@ -0,0 +1,76 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-text-input-font-size: var(--jkl-body-font-size);
+  --jkl-text-input-line-height: var(--jkl-body-line-height);
+  --jkl-text-input-font-weight: var(--jkl-body-font-weight);
+  --jkl-text-input-height: 3rem;
+  --jkl-text-input-vertical-padding: 0.5rem;
+  --jkl-text-input-horizontal-padding: 0.75rem;
+  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );
+  --jkl-text-input-action-button-size: 3rem;
+  --jkl-text-input-action-button-icon-size: 1.25rem;
+  --jkl-text-input-action-button-padding: 0.5rem 0;
+  --jkl-text-input-action-button-focus-position: 0.375rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-text-input-height: 2.75rem;
+    --jkl-text-input-action-button-size: 2.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-text-input-font-size: var(--jkl-small-font-size);
+  --jkl-text-input-line-height: var(--jkl-small-line-height);
+  --jkl-text-input-font-weight: var(--jkl-small-font-weight);
+  --jkl-text-input-height: 2rem;
+  --jkl-text-input-vertical-padding: 0.25rem;
+  --jkl-text-input-horizontal-padding: 0.5rem;
+  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );
+  --jkl-text-input-action-button-size: 2rem;
+  --jkl-text-input-action-button-icon-size: 1.125rem;
+  --jkl-text-input-action-button-padding: 0;
+  --jkl-text-input-action-button-focus-position: 0;
+}
+
+.jkl-search--beta:has(button.jkl-search-submit) {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  align-items: end;
+}
+.jkl-search--beta:has(button.jkl-search-submit) .input-wrapper {
+  border-inline-end: 0;
+  border-radius: 3px 0 0 3px;
+}
+.jkl-search--beta:has(button.jkl-search-submit) button.jkl-search-submit {
+  height: var(--jkl-text-input-height);
+  border-radius: 0 3px 3px 0;
+  border: var(--border);
+  border-inline-start: 0;
+  min-width: unset;
+}
+.jkl-search--beta:has(button.jkl-search-submit) button.jkl-search-submit::before {
+  content: "";
+  position: absolute;
+  width: 1px;
+  inset: 0;
+  inset-block: 20%;
+  background-color: var(--jkl-color-border-separator);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: inset;
+}
+.jkl-search--beta:has(button.jkl-search-submit) button.jkl-search-submit:hover::before {
+  inset-block: 0;
+}

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

@@ -0,0 +1,5 @@
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-search--beta: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--beta:has(button.jkl-search-submit) .input-wrapper{-webkit-border-end:0;border-inline-end:0;border-radius:3px 0 0 3px}.jkl-search--beta:has(button.jkl-search-submit) button.jkl-search-submit{border:var(--border);border-radius:0 3px 3px 0;height:var(--jkl-text-input-height);-webkit-border-start:0;border-inline-start:0;min-width:unset}.jkl-search--beta: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--beta:has(button.jkl-search-submit) button.jkl-search-submit:hover:before{inset-block:0}

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

@@ -0,0 +1,37 @@
+@use "../../core/jkl/index" as jkl;
+@use "../../shared/input/shared-input-styles" as shared;
+
+.jkl-search--beta:has(button.jkl-search-submit){
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    align-items: end;
+
+    .input-wrapper {
+        border-inline-end: 0;
+        border-radius: 3px 0 0 3px;
+    }
+
+    button.jkl-search-submit {
+        height: var(--jkl-text-input-height);
+        border-radius: 0 3px 3px 0;
+        border: var(--border);
+        border-inline-start: 0;
+        min-width: unset;
+
+        &::before {
+            content: "";
+            position: absolute;
+            width: 1px;
+            inset: 0;
+            inset-block: 20%;
+            background-color: var(--jkl-color-border-separator);
+
+            @include jkl.motion;
+            transition-property: inset;
+        }
+
+        &:hover::before {
+            inset-block: 0;
+        }
+    }
+}

package/styles/components-beta/search/search.css

@@ -0,0 +1,162 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-text-input-font-size: var(--jkl-body-font-size);
+  --jkl-text-input-line-height: var(--jkl-body-line-height);
+  --jkl-text-input-font-weight: var(--jkl-body-font-weight);
+  --jkl-text-input-height: 3rem;
+  --jkl-text-input-vertical-padding: 0.5rem;
+  --jkl-text-input-horizontal-padding: 0.75rem;
+  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );
+  --jkl-text-input-action-button-size: 3rem;
+  --jkl-text-input-action-button-icon-size: 1.25rem;
+  --jkl-text-input-action-button-padding: 0.5rem 0;
+  --jkl-text-input-action-button-focus-position: 0.375rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-text-input-height: 2.75rem;
+    --jkl-text-input-action-button-size: 2.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-text-input-font-size: var(--jkl-small-font-size);
+  --jkl-text-input-line-height: var(--jkl-small-line-height);
+  --jkl-text-input-font-weight: var(--jkl-small-font-weight);
+  --jkl-text-input-height: 2rem;
+  --jkl-text-input-vertical-padding: 0.25rem;
+  --jkl-text-input-horizontal-padding: 0.5rem;
+  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );
+  --jkl-text-input-action-button-size: 2rem;
+  --jkl-text-input-action-button-icon-size: 1.125rem;
+  --jkl-text-input-action-button-padding: 0;
+  --jkl-text-input-action-button-focus-position: 0;
+}
+
+.jkl-search--beta {
+  --icon-size: var(--jkl-text-input-height);
+  --border-radius: 3px;
+  --border: 1px solid var(--jkl-color-border-input);
+  width: 100%;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  .jkl-search--beta {
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+}
+.jkl-search--beta input[type=search] {
+  appearance: none;
+  padding: 0;
+  background-color: transparent;
+  height: 100%;
+  color: var(--jkl-color-text-default);
+  grid-column: 2/3;
+}
+.jkl-search--beta input[type=search] {
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-search--beta input[type=search]:active, .jkl-search--beta input[type=search]:hover, .jkl-search--beta input[type=search]:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-search--beta input[type=search] {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-search--beta input[type=search]:active, .jkl-search--beta input[type=search]:hover, .jkl-search--beta input[type=search]:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-search--beta input[type=search]::-webkit-search-cancel-button, .jkl-search--beta input[type=search]::-webkit-calendar-picker-indicator, .jkl-search--beta input[type=search]::-webkit-search-results-button {
+  appearance: none;
+  display: none !important;
+}
+.jkl-search--beta .input-wrapper {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: var(--icon-size) 1fr;
+  border-radius: var(--border-radius);
+  padding-inline-end: 0;
+  height: var(--jkl-text-input-height);
+  border: var(--border);
+}
+.jkl-search--beta .input-wrapper::before {
+  font-family: "Fremtind Material Symbols";
+  content: attr(data-icon)/"";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  grid-column: 1;
+}
+.jkl-search--beta .input-wrapper:has(.clear-button) {
+  grid-template-columns: var(--icon-size) 1fr var(--icon-size);
+}
+.jkl-search--beta:has(input:not(:valid), input:placeholder-shown) .clear-button {
+  display: none;
+}
+.jkl-search--beta .clear-button {
+  display: grid;
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  height: 100%;
+  padding: 0;
+  cursor: pointer;
+  color: var(--jkl-color-text-default);
+}
+.jkl-search--beta .clear-button::before, .jkl-search--beta .clear-button::after {
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  place-self: center;
+  align-self: center;
+  grid-row: 1;
+  grid-column: 1;
+}
+.jkl-search--beta .clear-button::before {
+  content: "close"/"";
+  font-family: "Fremtind Material Symbols";
+  z-index: 1;
+  line-height: 1.25lh;
+}
+.jkl-search--beta .clear-button::after {
+  content: "";
+  background-color: transparent;
+  height: 1.25lh;
+  aspect-ratio: 1;
+  border-radius: 100%;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: background-color;
+}
+.jkl-search--beta .clear-button:hover::after {
+  background-color: var(--jkl-color-background-interactive-hover);
+}
+.jkl-search--beta .clear-button:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
+}

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

@@ -0,0 +1,5 @@
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-search--beta{--icon-size:var(--jkl-text-input-height);--border-radius:3px;--border:1px solid var(--jkl-color-border-input);font-size:1.125rem;font-weight:400;line-height:1.75rem;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-search--beta{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-search--beta input[type=search]{-webkit-appearance:none;appearance:none;background-color:initial;border-style:none;color:var(--jkl-color-text-default);grid-column:2/3;height:100%;outline:0;outline-style:none;padding:0}.jkl-search--beta input[type=search]:active,.jkl-search--beta input[type=search]:focus,.jkl-search--beta input[type=search]:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-search--beta input[type=search]{border-style:revert;outline:revert;outline-style:revert}.jkl-search--beta input[type=search]:active,.jkl-search--beta input[type=search]:focus,.jkl-search--beta input[type=search]:hover{outline:revert;outline-style:revert}}.jkl-search--beta input[type=search]::-webkit-calendar-picker-indicator,.jkl-search--beta input[type=search]::-webkit-search-cancel-button,.jkl-search--beta input[type=search]::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none!important}.jkl-search--beta .input-wrapper{border-radius:var(--border-radius);box-sizing:border-box;display:grid;grid-template-columns:var(--icon-size) 1fr;-webkit-padding-end:0;border:var(--border);height:var(--jkl-text-input-height);padding-inline-end:0}.jkl-search--beta .input-wrapper:before{align-items:center;content:attr(data-icon)/"";display:inline-flex;font-family:Fremtind Material Symbols;grid-column:1;height:100%;justify-content:center}.jkl-search--beta .input-wrapper:has(.clear-button){grid-template-columns:var(--icon-size) 1fr var(--icon-size)}.jkl-search--beta:has(input:not(:valid),input:placeholder-shown) .clear-button{display:none}.jkl-search--beta .clear-button{-webkit-appearance:none;appearance:none;background-color:initial;border:0;color:var(--jkl-color-text-default);cursor:pointer;display:grid;height:100%;padding:0}.jkl-search--beta .clear-button:after,.jkl-search--beta .clear-button:before{align-items:center;display:inline-grid;justify-content:center;place-self:center;align-self:center;grid-column:1;grid-row:1}.jkl-search--beta .clear-button:before{content:"close"/"";font-family:Fremtind Material Symbols;line-height:1.25lh;z-index:1}.jkl-search--beta .clear-button:after{aspect-ratio:1;background-color:initial;border-radius:100%;content:"";height:1.25lh;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-search--beta .clear-button:hover:after{background-color:var(--jkl-color-background-interactive-hover)}.jkl-search--beta .clear-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}

package/styles/components-beta/search/search.scss

@@ -0,0 +1,106 @@
+@use "../../core/jkl/index" as jkl;
+@use "../../shared/input/shared-input-styles" as shared;
+
+.jkl-search--beta {
+    --icon-size: var(--jkl-text-input-height);
+    --border-radius: 3px;
+    --border: 1px solid var(--jkl-color-border-input);
+
+    width: 100%;
+
+    @include jkl.text-style("body");
+
+    input[type="search"] {
+        appearance: none;
+        padding: 0;
+        background-color: transparent;
+        height: 100%;
+        color: var(--jkl-color-text-default);
+        grid-column: 2 / 3;
+
+        @include jkl.reset-outline;
+
+        &::-webkit-search-cancel-button, &::-webkit-calendar-picker-indicator, &::-webkit-search-results-button {
+            appearance: none;
+            display: none !important;
+        }
+    }
+
+    .input-wrapper {
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: var(--icon-size) 1fr;
+        border-radius: var(--border-radius);
+        padding-inline-end: 0;
+        height: var(--jkl-text-input-height);
+        border: var(--border);
+
+        &::before {
+            font-family: "Fremtind Material Symbols";
+            content: attr(data-icon) / "";
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            grid-column: 1;
+        }
+
+        &:has(.clear-button) {
+            grid-template-columns: var(--icon-size) 1fr var(--icon-size);
+        }
+    }
+
+    // Nettlesere har ulik støtte for begge disse metodene, så begge må være med per 12. november 2025
+    &:has(input:not(:valid), input:placeholder-shown) {
+        .clear-button {
+            display: none;
+        }
+    }
+
+    .clear-button {
+        display: grid;
+        appearance: none;
+        background-color: transparent;
+        border: 0;
+        height: 100%;
+        padding: 0;
+        cursor: pointer;
+        color: var(--jkl-color-text-default);
+
+        &::before, &::after {
+            display: inline-grid;
+            align-items: center;
+            justify-content: center;
+            place-self: center;
+            align-self: center;
+            grid-row: 1;
+            grid-column: 1;
+        }
+
+        &::before {
+            content: "close" / "";
+            font-family: "Fremtind Material Symbols";
+            z-index: 1;
+            line-height: 1.25lh;
+        }
+
+        &::after {
+            content: "";
+            background-color: transparent;
+            height: 1.25lh;
+            aspect-ratio: 1;
+            border-radius: 100%;
+
+            @include jkl.motion;
+            transition-property: background-color;
+        }
+
+        &:hover::after {
+            background-color: var(--jkl-color-background-interactive-hover);
+        }
+
+        &:focus-visible {
+            @include jkl.focus-outline;
+        }
+    }
+}

package/styles/components-beta/select/select.css

@@ -99,11 +99,6 @@
   text-align: left;
   width: 100%;
   transition-property: color, border-color, box-shadow;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  font-size: var(--jkl-select-font-size);
-  line-height: var(--jkl-select-line-height);
-  font-weight: var(--jkl-select-font-weight);
 }
 .jkl-select--beta select:has(option:checked[value=""]) {
   --color: var(--jkl-color-text-subdued);
@@ -119,6 +114,13 @@
 .jkl-select--beta select:focus-visible {
   outline: none;
 }
+.jkl-select--beta select {
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  font-size: var(--jkl-select-font-size);
+  line-height: var(--jkl-select-line-height);
+  font-weight: var(--jkl-select-font-weight);
+}
 html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) {
   outline: 3px solid var(--jkl-color-border-action);
   outline-offset: 3px;