@fremtind/jokul 5.0.0-next.9 → 5.0.1

package/styles/components/modal/modal.scss

@@ -1,7 +1,97 @@
 @charset "UTF-8";
-@forward "layout";
-@forward "overlay";
-@forward "modal-base";
-@forward "motion";
-@forward "placement";
-@forward "parts";
+@use "../../jkl";
+
+@layer jokul.components {
+
+    .jkl-modal-container,
+    .jkl-modal-overlay {
+        position: fixed;
+        inset: 0;
+    }
+
+    .jkl-modal-container {
+        z-index: jkl.$z-index--modal;
+        display: flex;
+
+        &[aria-hidden="true"] {
+            display: none;
+        }
+    }
+
+    .jkl-modal-overlay {
+        background-color: rgb(27 25 23 / 80%);
+    }
+
+    .jkl-modal {
+        --jkl-modal-padding: var(--jkl-unit-50);
+        --jkl-modal-min-width: #{jkl.rem(220px)};
+        --jkl-modal-max-width: #{jkl.rem(660px)};
+
+        margin: auto;
+        z-index: jkl.$z-index--modal;
+        position: relative;
+
+        background-color: var(--jkl-color-background-container);
+        border-radius: var(--jkl-border-radius-l);
+        box-shadow: jkl.$shadow-task-card;
+
+        width: 100%;
+        min-width: var(--jkl-modal-min-width);
+        max-width: var(--jkl-modal-max-width);
+        max-height: 90vh;
+        overflow: auto;
+
+        padding: var(--jkl-modal-padding);
+        display: flex;
+        flex-direction: column;
+
+        @include jkl.forced-colors-mode {
+            border-color: CanvasText;
+        }
+
+        @include jkl.small-device {
+            margin: auto var(--jkl-unit-30);
+        }
+    }
+
+    .jkl-modal-header {
+        --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
+
+        @include jkl.small-device {
+            --jkl-modal-header-margin: 0 0 var(--jkl-unit-15);
+        }
+
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin: var(--jkl-modal-header-margin);
+        gap: var(--jkl-modal-gap);
+    }
+
+    .jkl-modal-body {
+        @include jkl.text-style("paragraph-medium");
+    }
+
+    .jkl-modal-title {
+        @include jkl.text-style("heading-3");
+    }
+
+    .jkl-modal-actions {
+        --jkl-modal-actions-margin: var(--jkl-unit-50) 0 0 0;
+
+        @include jkl.small-device {
+            --jkl-modal-actions-margin: var(--jkl-unit-40) 0 0 0;
+        }
+
+        margin: var(--jkl-modal-actions-margin);
+        display: flex;
+        flex-direction: column;
+        gap: var(--jkl-unit-20);
+
+        @include jkl.screen-from(60ch) {
+            flex-direction: row-reverse;
+            align-self: flex-end;
+        }
+    }
+}

package/styles/components/number-input/_index.scss

@@ -0,0 +1,2 @@
+@forward "number-input";
+@use "../button" as button;

package/styles/components/number-input/number-input.css

@@ -0,0 +1,214 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  .jkl-number-input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .jkl-number-input__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-number-input__wrapper:focus-within, .jkl-number-input__wrapper:has([data-focused=true]) {
+    --background-color: var(--jkl-color-background-container);
+  }
+  .jkl-number-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
+    --background-color: var(--jkl-color-error-background-container);
+    --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-number-input__wrapper:hover, .jkl-number-input__wrapper:focus-within, .jkl-number-input__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-number-input__wrapper:hover, .jkl-number-input__wrapper:focus-within, .jkl-number-input__wrapper:has([data-focused=true]) {
+      border: 0.125rem solid ButtonText;
+    }
+  }
+  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-area__text-area:focus-visible) {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-number-input__wrapper > .jkl-icon-button:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: -8px;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__wrapper > .jkl-icon-button:focus-visible {
+      --border-color: ButtonText;
+    }
+  }
+  .jkl-number-input__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-number-input__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-number-input__wrapper > .jkl-text-input-action-button:hover {
+    color: var(--jkl-color-text-subdued);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__wrapper > .jkl-text-input-action-button:hover {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__wrapper {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-number-input__input:focus-visible) {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-number-input__wrapper:has(.jkl-number-input__input:invalid):not(:focus-within):not(:has([data-focused=true])) {
+    --background-color: var(--jkl-color-background-alert-error);
+    --text-color: var(--jkl-color-text-on-alert);
+    --placeholder-color: color(from currentColor sRGB r g b / 75%);
+  }
+  .jkl-number-input__wrapper--stepper {
+    --jkl-number-input-stepper-min-width: calc(3ch + (var(--jkl-text-input-horizontal-padding) * 2));
+    --jkl-number-input-stepper-text-color: var(--text-color);
+    display: grid;
+    grid-template-columns: max-content minmax(var(--jkl-number-input-stepper-min-width), 1fr) max-content;
+    overflow: hidden;
+  }
+  .jkl-number-input__wrapper--stepper:has(button[data-direction]:focus-visible) {
+    overflow: visible;
+  }
+  .jkl-number-input__input {
+    padding: var(--jkl-text-input-padding);
+    width: 100%;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    background: none;
+    -webkit-appearance: none;
+    color: inherit;
+    font: var(--jkl-text-style-text-medium);
+  }
+  .jkl-number-input__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-number-input__input:active, .jkl-number-input__input:hover, .jkl-number-input__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-number-input__input:active, .jkl-number-input__input:hover, .jkl-number-input__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-number-input__input input[type=number]::-webkit-outer-spin-button,
+  .jkl-number-input__input input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  .jkl-number-input__input input[type=number] {
+    -moz-appearance: textfield;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-number-input__input {
+      outline: none;
+      border: none;
+    }
+    .jkl-number-input__input:focus-visible {
+      outline: none;
+    }
+  }
+  .jkl-number-input__input::placeholder {
+    opacity: 1;
+    color: var(--placeholder-color);
+  }
+  .jkl-number-input__input::-webkit-inner-spin-button, .jkl-number-input__input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  .jkl-number-input__input--align-right {
+    text-align: right;
+  }
+  .jkl-number-input__input--stepper {
+    box-sizing: border-box;
+    min-inline-size: var(--jkl-number-input-stepper-min-width);
+    text-align: center;
+  }
+  .jkl-number-input button[data-direction] {
+    --text-color: var(--jkl-number-input-stepper-text-color);
+    aspect-ratio: 1;
+    padding: 0;
+    display: inline-grid;
+    place-items: center;
+    text-align: center;
+    height: 100%;
+  }
+  .jkl-number-input button[data-direction]::before {
+    content: "";
+    position: absolute;
+    width: 1px;
+    inset-block: 20%;
+    background-color: var(--jkl-color-border-separator);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    transition-property: inset;
+  }
+  .jkl-number-input button[data-direction]:hover::before, .jkl-number-input button[data-direction]:focus-visible::before {
+    inset-block: 0.0625rem;
+  }
+  .jkl-number-input button[data-direction]:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .jkl-number-input button[data-direction=decrement]::before {
+    inset-inline-end: 0;
+  }
+  .jkl-number-input button[data-direction=increment]::before {
+    inset-inline-start: 0;
+  }
+  .jkl-number-input button[data-direction].jkl-button {
+    border-radius: 0;
+  }
+  .jkl-number-input button[data-direction].jkl-button .jkl-icon {
+    margin-block-start: 0.4ex;
+  }
+}

package/styles/components/number-input/number-input.min.css

@@ -0,0 +1 @@
+@layer jokul.components{.jkl-number-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-number-input__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);align-items:center;background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem transparent;box-sizing:border-box;color:var(--text-color);display:flex;font:var(--jkl-text-style-text-medium);max-width:100%;position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-number-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-error-background-container);--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-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__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-number-input__wrapper:focus-within,.jkl-number-input__wrapper:has([data-focused=true]),.jkl-number-input__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-number-input__wrapper>.jkl-text-input-action-button{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;padding:var(--jkl-text-input-action-button-padding);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-number-input__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-number-input__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-number-input__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}@media screen and (forced-colors:active){.jkl-number-input__wrapper{border:.125rem inset ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-number-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-number-input__wrapper:has(.jkl-number-input__input:invalid):not(:focus-within):not(:has([data-focused=true])){--background-color:var(--jkl-color-background-alert-error);--text-color:var(--jkl-color-text-on-alert);--placeholder-color:color(from currentColor sRGB r g b/75%)}.jkl-number-input__wrapper--stepper{--jkl-number-input-stepper-min-width:calc(3ch + var(--jkl-text-input-horizontal-padding)*2);--jkl-number-input-stepper-text-color:var(--text-color);display:grid;grid-template-columns:-webkit-max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) -webkit-max-content;grid-template-columns:max-content minmax(var(--jkl-number-input-stepper-min-width),1fr) max-content;overflow:hidden}.jkl-number-input__wrapper--stepper:has(button[data-direction]:focus-visible){overflow:visible}.jkl-number-input__input{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;-webkit-appearance:none;background:none;border-style:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;outline-style:none;padding:var(--jkl-text-input-padding);width:100%}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-number-input__input{border-style:revert;outline:revert;outline-style:revert}.jkl-number-input__input:active,.jkl-number-input__input:focus,.jkl-number-input__input:hover{outline:revert;outline-style:revert}}.jkl-number-input__input input[type=number]::-webkit-inner-spin-button,.jkl-number-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-number-input__input input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-number-input__input{border:none;outline:none}.jkl-number-input__input:focus-visible{outline:none}}.jkl-number-input__input::placeholder{color:var(--placeholder-color);opacity:1}.jkl-number-input__input::-webkit-inner-spin-button,.jkl-number-input__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.jkl-number-input__input--align-right{text-align:right}.jkl-number-input__input--stepper{box-sizing:border-box;min-inline-size:var(--jkl-number-input-stepper-min-width);text-align:center}.jkl-number-input button[data-direction]{--text-color:var(--jkl-number-input-stepper-text-color);aspect-ratio:1;display:inline-grid;height:100%;padding:0;place-items:center;text-align:center}.jkl-number-input button[data-direction]:before{background-color:var(--jkl-color-border-separator);content:"";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-number-input button[data-direction]:focus-visible:before,.jkl-number-input button[data-direction]:hover:before{inset-block:.0625rem}.jkl-number-input button[data-direction]:disabled{cursor:not-allowed;opacity:.4}.jkl-number-input button[data-direction=decrement]:before{inset-inline-end:0}.jkl-number-input button[data-direction=increment]:before{inset-inline-start:0}.jkl-number-input button[data-direction].jkl-button{border-radius:0}.jkl-number-input button[data-direction].jkl-button .jkl-icon{-webkit-margin-before:.4ex;margin-block-start:.4ex}}

package/styles/components/number-input/number-input.scss

@@ -0,0 +1,115 @@
+@use "../../jkl";
+@use "../../shared/input/shared-input-styles" as shared;
+
+@layer jokul.components {
+    .jkl-number-input {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        &__wrapper {
+            @include shared.wrapper-styles;
+
+            @include jkl.keyboard-navigation {
+                &:has(.jkl-number-input__input:focus-visible) {
+                    @include jkl.focus-outline;
+                }
+            }
+
+            &:has(.jkl-number-input__input:invalid):not(:focus-within):not( :has([data-focused="true"])) {
+                --background-color: var(--jkl-color-background-alert-error);
+                --text-color: var(--jkl-color-text-on-alert);
+                --placeholder-color: color(from currentColor sRGB r g b / 75%);
+            }
+        }
+
+        &__wrapper--stepper {
+            --jkl-number-input-stepper-min-width: calc(3ch + (var(--jkl-text-input-horizontal-padding) * 2));
+            --jkl-number-input-stepper-text-color: var(--text-color);
+
+            display: grid;
+            grid-template-columns:
+                max-content minmax(var(--jkl-number-input-stepper-min-width), 1fr) max-content;
+            overflow: hidden;
+
+            // Tillat at fokus-ringen på stepper-knappene vises i sin helhet,
+            // ellers kuttes den av `overflow: hidden` på wrapperen.
+            &:has(button[data-direction]:focus-visible) {
+                overflow: visible;
+            }
+        }
+
+        &__input {
+            padding: var(--jkl-text-input-padding);
+            width: 100%;
+            appearance: textfield;
+            -moz-appearance: textfield;
+
+            @include shared.input-styles;
+
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
+            }
+
+            &--align-right {
+                text-align: right;
+            }
+
+            &--stepper {
+                box-sizing: border-box;
+                min-inline-size: var(--jkl-number-input-stepper-min-width);
+                text-align: center;
+            }
+        }
+
+        button[data-direction] {
+            --text-color: var(--jkl-number-input-stepper-text-color);
+
+            aspect-ratio: 1;
+            padding: 0;
+            display: inline-grid;
+            place-items: center;
+            text-align: center;
+            height: 100%;
+
+            &::before {
+                content: "";
+                position: absolute;
+                width: 1px;
+                inset-block: 20%;
+                background-color: var(--jkl-color-border-separator);
+
+                @include jkl.motion;
+                transition-property: inset;
+            }
+
+            &:hover::before,
+            &:focus-visible::before {
+                inset-block: jkl.rem(1px);
+            }
+
+            &:disabled {
+                opacity: 0.4;
+                cursor: not-allowed;
+            }
+        }
+
+        button[data-direction="decrement"]::before {
+            inset-inline-end: 0;
+        }
+
+        button[data-direction="increment"]::before {
+            inset-inline-start: 0;
+        }
+
+        button[data-direction].jkl-button {
+            border-radius: 0;
+
+            .jkl-icon {
+                margin-block-start: 0.4ex;
+            }
+        }
+    }
+}

package/styles/components/pagination/pagination.css

@@ -16,13 +16,13 @@
   .jkl-pagination-button {
     --button-size: var(--jkl-unit-40);
     all: unset;
+    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     height: var(--button-size);
     min-width: var(--button-size);
     text-align: center;
-    cursor: pointer;
     user-select: none;
     border-radius: 0.1875rem;
     color: var(--jkl-color-text-default);

package/styles/components/pagination/pagination.scss

@@ -18,13 +18,13 @@
         --button-size: var(--jkl-unit-40);
 
         all: unset;
+        cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         height: var(--button-size);
         min-width: var(--button-size);
         text-align: center;
-        cursor: pointer;
         user-select: none;
         border-radius: jkl.rem(3px);
         color: var(--jkl-color-text-default);

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

@@ -54,7 +54,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-u4v9jkl {
+  @keyframes jkl-downcount-uyre33m {
     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-subdued);--bar-color:var(--jkl-color-border-strong);--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{border-style:none;outline:0;outline-style:none}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-progress-bar{border-style:revert;outline:revert;outline-style:revert}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:revert;outline-style:revert}}.jkl-progress-bar:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.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-u4v9jkl{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--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{border-style:none;outline:0;outline-style:none}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-progress-bar{border-style:revert;outline:revert;outline-style:revert}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:revert;outline-style:revert}}.jkl-progress-bar:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.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-uyre33m{0%{width:100%}to{width:0}}}

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

@@ -3,10 +3,6 @@
  */
 @layer jokul.components {
   .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;
   }
@@ -100,7 +96,7 @@
     content: "radio_button_checked";
   }
   .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
-    color: var(--jkl-color-error-text-default);
+    color: var(--jkl-color-error-background-contrast);
   }
   .jkl-radio-button + .jkl-radio-button, .jkl-dormant-form-support-label + .jkl-radio-button, .jkl-form-support-label + .jkl-radio-button {
     margin-top: 0.75lh;

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

@@ -1 +1 @@
-@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{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.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: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;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__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-color-error-text-default)}.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}}
+@layer jokul.components{.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{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.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: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;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__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-color-error-background-contrast)}.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

@@ -5,10 +5,6 @@
 
 @layer jokul.components {
     .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;
 
@@ -51,7 +47,6 @@
 
         &__input:focus-visible + &__label::before {
             border-radius: var(--jkl-border-radius-full);
-
             @include jkl.focus-outline;
         }
 
@@ -66,7 +61,7 @@
         }
 
         &__input[aria-invalid="true"] + &__label::before {
-            color: var(--jkl-color-error-text-default);
+            color: var(--jkl-color-error-background-contrast);
         }
 
         & + &,
@@ -94,4 +89,4 @@
             margin-bottom: jkl.$unit-10;
         }
     }
-}
+}

package/styles/components/search/search.css

@@ -76,7 +76,6 @@
   border: 0;
   height: 100%;
   padding: 0;
-  cursor: pointer;
   color: var(--jkl-color-text-default);
   border-radius: 100%;
 }

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);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}
+.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);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

@@ -70,7 +70,6 @@
         border: 0;
         height: 100%;
         padding: 0;
-        cursor: pointer;
         color: var(--jkl-color-text-default);
         border-radius: 100%;
 

package/styles/components/segmented-control/segmented-control.css

@@ -3,10 +3,6 @@
  */
 @layer jokul.components {
   .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;
   }
@@ -100,7 +96,7 @@
     content: "radio_button_checked";
   }
   .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
-    color: var(--jkl-color-error-text-default);
+    color: var(--jkl-color-error-background-contrast);
   }
   .jkl-radio-button + .jkl-radio-button, .jkl-dormant-form-support-label + .jkl-radio-button, .jkl-form-support-label + .jkl-radio-button {
     margin-top: 0.75lh;
@@ -179,7 +175,7 @@
     --color: var(--jkl-color-text-default);
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uh0wglx forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u8k36q8 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -233,7 +229,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uh0wglx {
+  @keyframes jkl-support-icon-entrance-u8k36q8 {
     0% {
       margin-right: 0;
       opacity: 0;