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

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

@@ -1,47 +1,33 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-.jkl-search:has(button.jkl-search-submit) {
-  display: grid;
-  grid-template-columns: 1fr max-content;
-  align-items: end;
-}
-.jkl-search:has(button.jkl-search-submit) .jkl-input-group-description,
-.jkl-search:has(button.jkl-search-submit) .jkl-label,
-.jkl-search:has(button.jkl-search-submit) .input-wrapper {
-  grid-column: 1/2;
-}
-.jkl-search:has(button.jkl-search-submit) .input-wrapper {
-  border-inline-end: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit {
-  height: 100%;
-  border: var(--border);
-  border-inline-start: 0;
-  border-radius: var(--jkl-border-radius-s);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  min-width: unset;
-  --inset-size: 1ex;
-  --separator-color: var(--jkl-color-border-subdued);
-  position: relative;
-}
-.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit::before {
-  content: "";
-  position: absolute;
-  block-size: calc(100% * var(--inset-size));
-  top: 0;
-  left: 0;
-  inset-block: var(--inset-size);
-  border-inline-end: 1px solid var(--separator-color);
-  z-index: 1;
-  transition-timing-function: var(--jkl-motion-easing-standard);
-  transition-duration: var(--jkl-motion-timing-productive);
-  transition-property: inset, border-color;
-}
-.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover, .jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:focus-within {
-  --inset-size: 1px;
-  --separator-color: var(--jkl-color-border-subdued);
+@layer jokul.components {
+  .jkl-search button.jkl-search-submit {
+    --border-radius: 0;
+    flex: none;
+    align-self: stretch;
+    min-width: unset;
+    border-start-end-radius: var(--jkl-border-radius-s);
+    border-end-end-radius: var(--jkl-border-radius-s);
+    --inset-size: 1ex;
+    --separator-color: var(--jkl-color-border-subdued);
+    position: relative;
+  }
+  .jkl-search button.jkl-search-submit::before {
+    content: "";
+    position: absolute;
+    block-size: calc(100% * var(--inset-size));
+    top: 0;
+    left: 0;
+    inset-block: var(--inset-size);
+    border-inline-end: 1px solid var(--separator-color);
+    z-index: 1;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    transition-property: inset, border-color;
+  }
+  .jkl-search button.jkl-search-submit:hover, .jkl-search button.jkl-search-submit:focus-within {
+    --inset-size: 1px;
+    --separator-color: var(--jkl-color-border-subdued);
+  }
 }

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

@@ -1 +1 @@
-.jkl-search:has(button.jkl-search-submit){display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;align-items:end}.jkl-search:has(button.jkl-search-submit) .input-wrapper,.jkl-search:has(button.jkl-search-submit) .jkl-input-group-description,.jkl-search:has(button.jkl-search-submit) .jkl-label{grid-column:1/2}.jkl-search:has(button.jkl-search-submit) .input-wrapper{-webkit-border-end:0;border-inline-end:0;border-top-right-radius:0;border-bottom-right-radius:0}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit{height:100%;border:var(--border);-webkit-border-start:0;border-inline-start:0;border-radius:var(--jkl-border-radius-s);border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;--inset-size:1ex;--separator-color:var(--jkl-color-border-subdued);position:relative}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:before{content:"";position:absolute;block-size:calc(100%*var(--inset-size));top:0;left:0;inset-block:var(--inset-size);-webkit-border-end:1px solid var(--separator-color);border-inline-end:1px solid var(--separator-color);z-index:1;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:inset,border-color}.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:focus-within,.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover{--inset-size:1px;--separator-color:var(--jkl-color-border-subdued)}
+@layer jokul.components{.jkl-search button.jkl-search-submit{--border-radius:0;flex:none;align-self:stretch;min-width:unset;border-start-end-radius:var(--jkl-border-radius-s);border-end-end-radius:var(--jkl-border-radius-s);--inset-size:1ex;--separator-color:var(--jkl-color-border-subdued);position:relative}.jkl-search button.jkl-search-submit:before{content:"";position:absolute;block-size:calc(100%*var(--inset-size));top:0;left:0;inset-block:var(--inset-size);-webkit-border-end:1px solid var(--separator-color);border-inline-end:1px solid var(--separator-color);z-index:1;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:inset,border-color}.jkl-search button.jkl-search-submit:focus-within,.jkl-search button.jkl-search-submit:hover{--inset-size:1px;--separator-color:var(--jkl-color-border-subdued)}}

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

@@ -1,31 +1,16 @@
-@use "../../jkl/index" as jkl;
 @use "../../shared/input/shared-input-styles" as shared;
 
-.jkl-search:has(button.jkl-search-submit) {
-    display: grid;
-    grid-template-columns: 1fr max-content;
-    align-items: end;
+@layer jokul.components {
+    // Knappen ligger inne i wrapperen, så den delte rammen omslutter både feltet og
+    // knappen. Skillelinjen mellom dem tegnes av `input-separator`.
+    .jkl-search button.jkl-search-submit {
+        --border-radius: 0;
 
-    .jkl-input-group-description,
-    .jkl-label,
-    .input-wrapper {
-        grid-column: 1 / 2;
-    }
-
-    .input-wrapper {
-        border-inline-end: 0;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    button.jkl-search-submit {
-        height: 100%;
-        border: var(--border);
-        border-inline-start: 0;
-        border-radius: var(--jkl-border-radius-s);
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+        flex: none;
+        align-self: stretch;
         min-width: unset;
+        border-start-end-radius: var(--jkl-border-radius-s);
+        border-end-end-radius: var(--jkl-border-radius-s);
 
         @include shared.input-separator;
     }

package/styles/components/search/search.css

@@ -1,132 +1,253 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-.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);
-  width: 100%;
-  font: var(--jkl-text-style-text-medium);
-}
-.jkl-search .jkl-input-group {
-  display: contents;
-}
-.jkl-search input[type=search] {
-  appearance: none;
-  padding: 0;
-  background-color: transparent;
-  color: var(--jkl-color-text-default);
-  grid-column: 2/3;
-}
-.jkl-search input[type=search] {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-search input[type=search]:active, .jkl-search input[type=search]:hover, .jkl-search input[type=search]:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
+@layer jokul.components {
+  .jkl-search {
+    width: 100%;
+  }
+  .jkl-search .jkl-input-group {
+    display: contents;
+  }
+  .jkl-search__wrapper {
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-vertical-padding: var(--jkl-unit-15);
+    --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
+    --jkl-text-input-action-button-size: var(--jkl-unit-60);
+    --jkl-text-input-action-button-icon-size: var(--jkl-unit-30);
+    --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
+    --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
+    --text-color: var(--jkl-color-text-default);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
+    --placeholder-color: var(--jkl-color-text-subdued);
+    border-radius: var(--jkl-border-radius-s);
+    box-sizing: border-box;
+    max-width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    transition-property: color, box-shadow, background-color;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
+  .jkl-search__wrapper:focus-within, .jkl-search__wrapper:has([data-focused=true]) {
+    --background-color: var(--jkl-color-background-container);
+  }
+  .jkl-search__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
+    --text-color: var(--jkl-color-error-text-default);
+    --border-color: var(--jkl-color-error-border-default);
+    --placeholder-color: var(--jkl-color-error-text-subdued);
+  }
+  .jkl-search__wrapper:hover, .jkl-search__wrapper:focus-within, .jkl-search__wrapper:has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-strong);
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper:hover, .jkl-search__wrapper:focus-within, .jkl-search__wrapper:has([data-focused=true]) {
+      border: 0.125rem solid ButtonText;
+    }
+  }
+  .jkl-search__wrapper:has(> :is(input, textarea):disabled) {
+    opacity: var(--jkl-nested-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+  .jkl-search__wrapper:has(> :is(input, textarea):disabled) * {
+    --jkl-nested-disabled-opacity: 1;
+    cursor: not-allowed;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper:has(> :is(input, textarea):disabled) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  .jkl-search__wrapper:has(> :is(input, textarea):read-only:not(:disabled)) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    cursor: default;
+  }
+  .jkl-search__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):hover, .jkl-search__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):focus-within, .jkl-search__wrapper:has(> :is(input, textarea):read-only:not(:disabled)):has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
+  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-search__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-search__wrapper:has(.jkl-text-area__text-area:focus-visible) {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-search__wrapper > .jkl-icon-button:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: -8px;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper > .jkl-icon-button:focus-visible {
+      --border-color: ButtonText;
+    }
+  }
+  .jkl-search__wrapper > .jkl-text-input-action-button {
+    flex-shrink: 0;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: var(--jkl-text-input-action-button-padding);
+    height: var(--jkl-text-input-action-button-size);
+    width: var(--jkl-text-input-action-button-size);
+    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+  }
+  .jkl-search__wrapper > .jkl-text-input-action-button .jkl-icon-button__icon {
+    height: var(--jkl-text-input-action-button-icon-size);
+    width: var(--jkl-text-input-action-button-icon-size);
+  }
+  .jkl-search__wrapper > .jkl-text-input-action-button:hover {
+    color: var(--jkl-color-text-subdued);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper > .jkl-text-input-action-button:hover {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search__wrapper {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  .jkl-search__wrapper {
+    gap: 0.25em;
+    padding-inline: var(--jkl-text-input-horizontal-padding);
+  }
+  .jkl-search__wrapper:has(.jkl-search-submit) {
+    padding-inline-end: 0;
+  }
+  .jkl-search__wrapper::before {
+    content: attr(data-icon)/"";
+    flex: none;
+    inline-size: 1.3em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--jkl-font-family-icons);
+  }
+  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-search__wrapper:has(> input[type=search]:focus-visible) {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-search input[type=search] {
+    background: none;
+    -webkit-appearance: none;
+    color: inherit;
+    font: var(--jkl-text-style-text-medium);
+  }
   .jkl-search input[type=search] {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    outline: 0;
+    border-style: none;
+    outline-style: none;
   }
   .jkl-search input[type=search]:active, .jkl-search input[type=search]:hover, .jkl-search input[type=search]:focus {
-    outline: revert;
-    outline-style: revert;
-  }
-}
-.jkl-search input[type=search] {
-  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;
-  display: none !important;
-}
-.jkl-search .input-wrapper {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: 1.3em 1fr;
-  gap: 0.25em;
-  border: var(--border);
-  border-radius: var(--border-radius);
-  padding-inline-end: 0;
-  padding: calc(var(--jkl-unit-15) - var(--border-width));
-}
-.jkl-search .input-wrapper::before {
-  content: attr(data-icon)/"";
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  grid-column: 1;
-  font-family: var(--jkl-font-family-icons);
-}
-.jkl-search .input-wrapper:has(.clear-button) {
-  grid-template-columns: 1.3em 1fr 1.3em;
-}
-.jkl-search .input-wrapper:has(input:focus-visible) {
-  outline: 3px solid var(--jkl-color-border-strong);
-  outline-offset: 3px;
-  background-color: var(--jkl-color-background-container);
-}
-.jkl-search:has(input:not(:valid), input:placeholder-shown) .clear-button {
-  display: none;
-}
-.jkl-search .clear-button {
-  position: relative;
-  display: grid;
-  appearance: none;
-  background-color: transparent;
-  border: 0;
-  height: 100%;
-  padding: 0;
-  color: var(--jkl-color-text-default);
-  border-radius: 100%;
-}
-.jkl-search .clear-button::before {
-  content: "close"/"";
-  display: inline-grid;
-  align-items: center;
-  justify-content: center;
-  place-self: center;
-  align-self: center;
-  grid-row: 1;
-  grid-column: 1;
-  z-index: 1;
-  font-family: var(--jkl-font-family-icons);
-  font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
-  font-feature-settings: "liga";
-  -webkit-font-feature-settings: "liga";
-  font-size: 1.3em;
-  font-weight: 400;
-  line-height: 1;
-  display: inline-block;
-  flex-shrink: 0;
-  -webkit-font-smoothing: antialiased;
-  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 {
-  --tap-size: 1.25lh;
-  content: "";
-  position: absolute;
-  inset: calc((var(--tap-size) - 100%) / 2 * -1);
-  background-color: var(--jkl-color-text-default);
-  opacity: 0;
-  border-radius: inherit;
-  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-strong);
-  outline-offset: 3px;
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search input[type=search] {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-search input[type=search]:active, .jkl-search input[type=search]:hover, .jkl-search input[type=search]:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-search input[type=search] input[type=number]::-webkit-outer-spin-button,
+  .jkl-search input[type=search] input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  .jkl-search input[type=search] input[type=number] {
+    -moz-appearance: textfield;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-search input[type=search] {
+      outline: none;
+      border: none;
+    }
+    .jkl-search input[type=search]:focus-visible {
+      outline: none;
+    }
+  }
+  .jkl-search input[type=search]::placeholder {
+    opacity: 1;
+    color: var(--placeholder-color);
+  }
+  .jkl-search input[type=search] {
+    flex: 1 1 0;
+    min-width: 0;
+    padding-block: var(--jkl-text-input-vertical-padding);
+  }
+  .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;
+    display: none !important;
+  }
+  .jkl-search:has(input:not(:valid), input:placeholder-shown) .jkl-search__clear-button {
+    display: none;
+  }
+  .jkl-search__clear-button {
+    position: relative;
+    display: grid;
+    flex: none;
+    align-self: stretch;
+    appearance: none;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    color: var(--text-color);
+    border-radius: 100%;
+  }
+  .jkl-search__clear-button::before {
+    content: "close"/"";
+    display: inline-grid;
+    align-items: center;
+    justify-content: center;
+    place-self: center;
+    align-self: center;
+    grid-row: 1;
+    grid-column: 1;
+    z-index: 1;
+    font-family: var(--jkl-font-family-icons);
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
+    font-feature-settings: "liga";
+    -webkit-font-feature-settings: "liga";
+    font-size: 1.3em;
+    font-weight: 400;
+    line-height: 1;
+    display: inline-block;
+    flex-shrink: 0;
+    -webkit-font-smoothing: antialiased;
+    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 {
+    --tap-size: 1.25lh;
+    content: "";
+    position: absolute;
+    inset: calc((var(--tap-size) - 100%) / 2 * -1);
+    background-color: var(--text-color);
+    opacity: 0;
+    border-radius: inherit;
+    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-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-default);width:100%;font:var(--jkl-text-style-text-medium)}.jkl-search .jkl-input-group{display:contents}.jkl-search input[type=search]{-webkit-appearance:none;appearance:none;padding:0;background-color:initial;color:var(--jkl-color-text-default);grid-column:2/3;outline:0;border-style:none;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}.jkl-search input[type=search],.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{box-sizing:border-box;display:grid;grid-template-columns:1.3em 1fr;gap:.25em;border:var(--border);border-radius:var(--border-radius);-webkit-padding-end:0;padding-inline-end:0;padding:calc(var(--jkl-unit-15) - var(--border-width))}.jkl-search .input-wrapper:before{content:attr(data-icon)/"";display:inline-flex;align-items:center;justify-content:center;height:100%;grid-column:1;font-family:var(--jkl-font-family-icons)}.jkl-search .input-wrapper:has(.clear-button){grid-template-columns:1.3em 1fr 1.3em}.jkl-search .input-wrapper:has(input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;background-color:var(--jkl-color-background-container)}.jkl-search:has(input:not(:valid),input:placeholder-shown) .clear-button{display:none}.jkl-search .clear-button{position:relative;display:grid;-webkit-appearance:none;appearance:none;background-color:initial;border:0;height:100%;padding:0;color:var(--jkl-color-text-default);border-radius:100%}.jkl-search .clear-button:before{content:"close"/"";display:inline-grid;align-items:center;justify-content:center;place-self:center;align-self:center;grid-row:1;grid-column:1;z-index:1;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;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{--tap-size:1.25lh;content:"";position:absolute;inset:calc((var(--tap-size) - 100%)/2*-1);background-color:var(--jkl-color-text-default);opacity:0;border-radius:inherit;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:.15}.jkl-search .clear-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}
+@layer jokul.components{.jkl-search{width:100%}.jkl-search .jkl-input-group{display:contents}.jkl-search__wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;max-width:100%;position:relative;display:flex;align-items:center;font:var(--jkl-text-style-text-medium);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;background-color:var(--background-color);color:var(--text-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent}.jkl-search__wrapper:focus-within,.jkl-search__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-search__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--placeholder-color:var(--jkl-color-error-text-subdued)}.jkl-search__wrapper:focus-within,.jkl-search__wrapper:has([data-focused=true]),.jkl-search__wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-search__wrapper:focus-within,.jkl-search__wrapper:has([data-focused=true]),.jkl-search__wrapper:hover{border:.125rem solid ButtonText}}.jkl-search__wrapper:has(>:is(input,textarea):disabled){opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-search__wrapper:has(>:is(input,textarea):disabled) *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-search__wrapper:has(>:is(input,textarea):disabled){opacity:1;color:GrayText;border-color:GrayText}}.jkl-search__wrapper:has(>:is(input,textarea):read-only:not(:disabled)){--border-color:var(--jkl-color-border-subdued);--background-color:transparent;cursor:default}.jkl-search__wrapper:has(>:is(input,textarea):read-only:not(:disabled)):focus-within,.jkl-search__wrapper:has(>:is(input,textarea):read-only:not(:disabled)):has([data-focused=true]),.jkl-search__wrapper:has(>:is(input,textarea):read-only:not(:disabled)):hover{--border-color:var(--jkl-color-border-subdued);--background-color:transparent;box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-search__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-search__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-search__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-search__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-search__wrapper>.jkl-text-input-action-button{flex-shrink:0;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--jkl-text-input-action-button-padding);height:var(--jkl-text-input-action-button-size);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-search__wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-search__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-search__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-search__wrapper{border:.125rem inset ButtonText}}.jkl-search__wrapper{gap:.25em;padding-inline:var(--jkl-text-input-horizontal-padding)}.jkl-search__wrapper:has(.jkl-search-submit){-webkit-padding-end:0;padding-inline-end:0}.jkl-search__wrapper:before{content:attr(data-icon)/"";flex:none;inline-size:1.3em;display:inline-flex;align-items:center;justify-content:center;font-family:var(--jkl-font-family-icons)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-search__wrapper:has(>input[type=search]:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-search input[type=search]{background:none;-webkit-appearance:none;color:inherit;font:var(--jkl-text-style-text-medium)}.jkl-search input[type=search]{outline:0;border-style:none;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]{outline:revert;border-style: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] input[type=number]::-webkit-inner-spin-button,.jkl-search input[type=search] input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-search input[type=search] input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-search input[type=search]{outline:none;border:none}.jkl-search input[type=search]:focus-visible{outline:none}}.jkl-search input[type=search]::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-search input[type=search]{flex:1 1 0;min-width:0;padding-block:var(--jkl-text-input-vertical-padding)}.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:has(input:not(:valid),input:placeholder-shown) .jkl-search__clear-button{display:none}.jkl-search__clear-button{position:relative;display:grid;flex:none;align-self:stretch;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;padding:0;color:var(--text-color);border-radius:100%}.jkl-search__clear-button:before{content:"close"/"";display:inline-grid;align-items:center;justify-content:center;place-self:center;align-self:center;grid-row:1;grid-column:1;z-index:1;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;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{--tap-size:1.25lh;content:"";position:absolute;inset:calc((var(--tap-size) - 100%)/2*-1);background-color:var(--text-color);opacity:0;border-radius:inherit;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:.15}.jkl-search__clear-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}