@fremtind/jokul 0.15.0 → 0.16.1

package/src/components/toast/styles/toast.css

@@ -193,14 +193,14 @@
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-udhyvs4 200ms ease-out forwards;
+  animation: jkl-entering-uh8al8y 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-udhyvsa 150ms ease-in forwards;
+  animation: jkl-exiting-uh8al9b 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-udhyvs4 {
+@keyframes jkl-entering-uh8al8y {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -210,7 +210,7 @@
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-udhyvsa {
+@keyframes jkl-exiting-uh8al9b {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

package/src/components/toast/styles/toast.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:#0000;bottom:1.5rem;display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:1rem;min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:1.5rem}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}@media (width >= 0) and (max-width:679px){.jkl-toast{grid-template-areas:"progress progress" "icon dismiss" "content content"}}@media (min-width:680px){.jkl-toast{grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto}}.jkl-toast__progress{grid-area:progress;margin-bottom:1rem;margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:#0000;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:1rem;width:1.5rem}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 .25rem;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:initial;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-udhyvs4 .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-udhyvsa .15s ease-in forwards}@keyframes jkl-entering-udhyvs4{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-udhyvsa{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:#0000;bottom:1.5rem;display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:1rem;min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:1.5rem}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}@media (width >= 0) and (max-width:679px){.jkl-toast{grid-template-areas:"progress progress" "icon dismiss" "content content"}}@media (min-width:680px){.jkl-toast{grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto}}.jkl-toast__progress{grid-area:progress;margin-bottom:1rem;margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:#0000;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:1rem;width:1.5rem}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 .25rem;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:initial;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-uh8al8y .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uh8al9b .15s ease-in forwards}@keyframes jkl-entering-uh8al8y{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uh8al9b{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}

package/src/components/toggle-switch/styles/toggle-switch.css

@@ -0,0 +1,301 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-slider-bg: #e0dbd4;
+    --jkl-slider-pill: #f9f9f9;
+    --jkl-slider-pill-text: #1b1917;
+    --jkl-slider-pill-text--active: #000000;
+    --jkl-slider-focus-color: #000000;
+    --jkl-slider-hover-color: #000000;
+  }
+}
+[data-theme=light] {
+  --jkl-slider-bg: #e0dbd4;
+  --jkl-slider-pill: #f9f9f9;
+  --jkl-slider-pill-text: #1b1917;
+  --jkl-slider-pill-text--active: #000000;
+  --jkl-slider-focus-color: #000000;
+  --jkl-slider-hover-color: #000000;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-slider-bg: #444141;
+    --jkl-slider-pill: #1b1917;
+    --jkl-slider-pill-text: #f9f9f9;
+    --jkl-slider-pill-text--active: #ffffff;
+    --jkl-slider-focus-color: #c8c5c3;
+    --jkl-slider-hover-color: #ffffff;
+  }
+}
+[data-theme=dark] {
+  --jkl-slider-bg: #444141;
+  --jkl-slider-pill: #1b1917;
+  --jkl-slider-pill-text: #f9f9f9;
+  --jkl-slider-pill-text--active: #ffffff;
+  --jkl-slider-focus-color: #c8c5c3;
+  --jkl-slider-hover-color: #ffffff;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-slider-font-size: var(--jkl-body-font-size);
+  --jkl-slider-line-height: var(--jkl-body-line-height);
+  --jkl-slider-font-weight: var(--jkl-body-font-weight);
+  --jkl-slider-legend-font-size: var(--jkl-body-font-size);
+  --jkl-slider-legend-line-height: var(--jkl-body-line-height);
+  --jkl-slider-legend-font-weight: 700;
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-slider-font-size: var(--jkl-small-font-size);
+  --jkl-slider-line-height: var(--jkl-small-line-height);
+  --jkl-slider-font-weight: var(--jkl-small-font-weight);
+  --jkl-slider-legend-font-size: var(--jkl-small-font-size);
+  --jkl-slider-legend-line-height: var(--jkl-small-line-height);
+  --jkl-slider-legend-font-weight: 700;
+}
+
+.jkl-toggle-slider {
+  font-size: var(--jkl-slider-font-size);
+  line-height: var(--jkl-slider-line-height);
+  font-weight: var(--jkl-slider-font-weight);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  flex-direction: column;
+  user-select: none;
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill {
+  box-shadow: inset 0 0 0 0.125rem var(--jkl-slider-focus-color);
+}
+.jkl-toggle-slider__legend {
+  margin-bottom: 0.5rem;
+  font-size: var(--jkl-slider-legend-font-size);
+  line-height: var(--jkl-slider-legend-line-height);
+  font-weight: var(--jkl-slider-legend-font-weight);
+}
+.jkl-toggle-slider__legend--sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important; /* 2 */
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; /* 3 */
+}
+.jkl-toggle-slider__inputs {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--jkl-slider-bg);
+  border-radius: 6.25rem;
+  border: 2px solid var(--jkl-slider-bg);
+}
+.jkl-toggle-slider__input {
+  position: absolute;
+  opacity: 0;
+}
+.jkl-toggle-slider__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  cursor: pointer;
+  padding: 0.125rem 1rem;
+  color: var(--jkl-slider-pill-text);
+  -webkit-tap-highlight-color: transparent;
+  /* Prevent really short labels to look like circles */
+  min-width: 30px;
+}
+.jkl-toggle-slider__label:hover {
+  color: var(--jkl-slider-hover-color);
+}
+.jkl-toggle-slider__label--selected {
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+  letter-spacing: -0.014em;
+  color: var(--jkl-slider-pill-text--active);
+}
+.jkl-toggle-slider__pill {
+  height: 100%;
+  background-color: var(--jkl-slider-pill);
+  position: absolute;
+  transition-property: width, transform;
+  border-radius: 6.25rem;
+  transition-timing-function: ease;
+  transition-duration: 250ms;
+}
+@media (min-width: 680px) {
+  .jkl-toggle-slider {
+    flex-direction: row;
+    align-items: center;
+  }
+  .jkl-toggle-slider__legend {
+    margin-bottom: 0;
+    margin-right: 1.2em;
+  }
+}
+@media screen and (forced-colors: active) {
+  .jkl-toggle-slider .jkl-toggle-slider__inputs {
+    background-color: Canvas;
+  }
+  .jkl-toggle-slider .jkl-toggle-slider__pill {
+    background-color: ButtonFace;
+  }
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-toggle-font-size: var(--jkl-body-font-size);
+  --jkl-toggle-line-height: var(--jkl-body-line-height);
+  --jkl-toggle-font-weight: var(--jkl-body-font-weight);
+  --jkl-toggle-switch-height: 1.75rem;
+  --jkl-toggle-switch-width: 3rem;
+  --jkl-toggle-switch-knob-size: 1.25rem;
+  --jkl-toggle-switch-indicator-spacing: 0;
+  --jkl-toggle-switch-help-label-spacing: var(--jkl-spacing-2);
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-toggle-font-size: var(--jkl-small-font-size);
+  --jkl-toggle-line-height: var(--jkl-small-line-height);
+  --jkl-toggle-font-weight: var(--jkl-small-font-weight);
+  --jkl-toggle-switch-height: 1.25rem;
+  --jkl-toggle-switch-width: 2.25rem;
+  --jkl-toggle-switch-knob-size: 0.75rem;
+  --jkl-toggle-switch-indicator-spacing: -0.125rem;
+  --jkl-toggle-switch-help-label-spacing: 0;
+}
+
+.jkl-toggle-switch {
+  --border-width: 0.0625rem;
+  --switch-padding: 0.25rem;
+  --knob-position: 0;
+  --switch-border-color: var(--jkl-color-border-action);
+  --indicator-color: var(--jkl-color-background-container-high);
+  --knob-border-color: var(--jkl-color-border-action);
+  --knob-color: var(--jkl-color-background-container-high);
+  --text-color: var(--jkl-color-text-default);
+  --icon-color: var(--jkl-color-text-inverted);
+  background: transparent;
+  color: var(--text-color);
+  padding: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: var(--jkl-spacing-8);
+  touch-action: none;
+  font-size: var(--jkl-toggle-font-size);
+  line-height: var(--jkl-toggle-line-height);
+  font-weight: var(--jkl-toggle-font-weight);
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-toggle-switch:active, .jkl-toggle-switch:hover, .jkl-toggle-switch:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-toggle-switch {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-toggle-switch:active, .jkl-toggle-switch:hover, .jkl-toggle-switch:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+@media screen and (forced-colors: active) {
+  .jkl-toggle-switch {
+    border-color: transparent;
+    border-style: none;
+  }
+}
+.jkl-toggle-switch[aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch {
+  --indicator-color: var(--jkl-color-background-container-inverted);
+  --knob-color: var(--jkl-color-text-inverted);
+  --knob-position: calc(
+      var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding) * 2
+  );
+}
+.jkl-toggle-switch[disabled] {
+  cursor: revert;
+  --text-color: var(--jkl-color-text-subdued);
+  --switch-border-color: var(--jkl-color-border-subdued);
+  --knob-border-color: var(--jkl-color-border-subdued);
+}
+.jkl-toggle-switch[disabled][aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch[disabled] {
+  --indicator-color: var(--jkl-color-border-subdued);
+}
+
+.jkl-toggle-switch-widget {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: var(--jkl-toggle-switch-height);
+  width: var(--jkl-toggle-switch-width);
+  border-radius: 9999px;
+  border: var(--border-width) solid var(--switch-border-color);
+  overflow: hidden;
+  user-select: none;
+  padding: var(--switch-padding);
+  background-color: var(--indicator-color);
+  pointer-events: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-toggle-switch-widget {
+    border: 0.0625rem solid ButtonText;
+  }
+}
+.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+.jkl-toggle-switch-widget__slider {
+  position: relative;
+  box-sizing: border-box;
+  height: var(--jkl-toggle-switch-knob-size);
+  width: var(--jkl-toggle-switch-knob-size);
+  color: var(--icon-color);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: translate;
+  translate: var(--knob-position);
+}
+.jkl-toggle-switch-widget__knob {
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  border: var(--border-width) solid var(--knob-border-color);
+  background-color: var(--knob-color);
+}
+.jkl-toggle-switch-widget__indicator {
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-right: var(--jkl-toggle-switch-indicator-spacing);
+  transform: translate(0, -50%);
+}
+.jkl-toggle-switch-widget__indicator > .jkl-icon__icon {
+  position: absolute;
+  inset: 0;
+}

package/src/components/toggle-switch/styles/toggle-switch.min.css

@@ -0,0 +1 @@
+@media screen and (prefers-color-scheme:light){:root{--jkl-slider-bg:#e0dbd4;--jkl-slider-pill:#f9f9f9;--jkl-slider-pill-text:#1b1917;--jkl-slider-pill-text--active:#000;--jkl-slider-focus-color:#000;--jkl-slider-hover-color:#000}}[data-theme=light]{--jkl-slider-bg:#e0dbd4;--jkl-slider-pill:#f9f9f9;--jkl-slider-pill-text:#1b1917;--jkl-slider-pill-text--active:#000;--jkl-slider-focus-color:#000;--jkl-slider-hover-color:#000}@media screen and (prefers-color-scheme:dark){:root{--jkl-slider-bg:#444141;--jkl-slider-pill:#1b1917;--jkl-slider-pill-text:#f9f9f9;--jkl-slider-pill-text--active:#fff;--jkl-slider-focus-color:#c8c5c3;--jkl-slider-hover-color:#fff}}[data-theme=dark]{--jkl-slider-bg:#444141;--jkl-slider-pill:#1b1917;--jkl-slider-pill-text:#f9f9f9;--jkl-slider-pill-text--active:#fff;--jkl-slider-focus-color:#c8c5c3;--jkl-slider-hover-color:#fff}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-slider-font-size:var(--jkl-body-font-size);--jkl-slider-line-height:var(--jkl-body-line-height);--jkl-slider-font-weight:var(--jkl-body-font-weight);--jkl-slider-legend-font-size:var(--jkl-body-font-size);--jkl-slider-legend-line-height:var(--jkl-body-line-height);--jkl-slider-legend-font-weight:700}[data-density=compact],[data-layout-density=compact]{--jkl-slider-font-size:var(--jkl-small-font-size);--jkl-slider-line-height:var(--jkl-small-line-height);--jkl-slider-font-weight:var(--jkl-small-font-weight);--jkl-slider-legend-font-size:var(--jkl-small-font-size);--jkl-slider-legend-line-height:var(--jkl-small-line-height);--jkl-slider-legend-font-weight:700}.jkl-toggle-slider{align-items:flex-start;display:flex;flex-direction:column;font-size:var(--jkl-slider-font-size);font-weight:var(--jkl-slider-font-weight);line-height:var(--jkl-slider-line-height);overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:100%}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill{box-shadow:inset 0 0 0 .125rem var(--jkl-slider-focus-color)}.jkl-toggle-slider__legend{font-size:var(--jkl-slider-legend-font-size);font-weight:var(--jkl-slider-legend-font-weight);line-height:var(--jkl-slider-legend-line-height);margin-bottom:.5rem}.jkl-toggle-slider__legend--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-toggle-slider__inputs{background-color:var(--jkl-slider-bg);border:2px solid var(--jkl-slider-bg);border-radius:6.25rem;display:flex;overflow:hidden;position:relative}.jkl-toggle-slider__input{opacity:0;position:absolute}.jkl-toggle-slider__label{align-items:center;color:var(--jkl-slider-pill-text);cursor:pointer;display:flex;justify-content:center;padding:.125rem 1rem;z-index:1;-webkit-tap-highlight-color:transparent;min-width:30px}.jkl-toggle-slider__label:hover{color:var(--jkl-slider-hover-color)}.jkl-toggle-slider__label--selected{--jkl-icon-weight:500;color:var(--jkl-slider-pill-text--active);font-weight:700;letter-spacing:-.014em}.jkl-toggle-slider__pill{background-color:var(--jkl-slider-pill);border-radius:6.25rem;height:100%;position:absolute;transition-duration:.25s;transition-property:width,transform;transition-timing-function:ease}@media (min-width:680px){.jkl-toggle-slider{align-items:center;flex-direction:row}.jkl-toggle-slider__legend{margin-bottom:0;margin-right:1.2em}}@media screen and (forced-colors:active){.jkl-toggle-slider .jkl-toggle-slider__inputs{background-color:Canvas}.jkl-toggle-slider .jkl-toggle-slider__pill{background-color:ButtonFace}}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toggle-font-size:var(--jkl-body-font-size);--jkl-toggle-line-height:var(--jkl-body-line-height);--jkl-toggle-font-weight:var(--jkl-body-font-weight);--jkl-toggle-switch-height:1.75rem;--jkl-toggle-switch-width:3rem;--jkl-toggle-switch-knob-size:1.25rem;--jkl-toggle-switch-indicator-spacing:0;--jkl-toggle-switch-help-label-spacing:var(--jkl-spacing-2)}[data-density=compact],[data-layout-density=compact]{--jkl-toggle-font-size:var(--jkl-small-font-size);--jkl-toggle-line-height:var(--jkl-small-line-height);--jkl-toggle-font-weight:var(--jkl-small-font-weight);--jkl-toggle-switch-height:1.25rem;--jkl-toggle-switch-width:2.25rem;--jkl-toggle-switch-knob-size:0.75rem;--jkl-toggle-switch-indicator-spacing:-0.125rem;--jkl-toggle-switch-help-label-spacing:0}.jkl-toggle-switch{--border-width:0.0625rem;--switch-padding:0.25rem;--knob-position:0;--switch-border-color:var(--jkl-color-border-action);--indicator-color:var(--jkl-color-background-container-high);--knob-border-color:var(--jkl-color-border-action);--knob-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-inverted);background:#0000;color:var(--text-color);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;align-items:center;border-style:none;display:flex;flex-direction:row-reverse;font-size:var(--jkl-toggle-font-size);font-weight:var(--jkl-toggle-font-weight);gap:var(--jkl-spacing-8);line-height:var(--jkl-toggle-line-height);touch-action:none}.jkl-toggle-switch,.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-toggle-switch{border-style:revert}.jkl-toggle-switch,.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:revert;outline-style:revert}.jkl-toggle-switch{border-color:#0000;border-style:none}}.jkl-toggle-switch[aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch{--indicator-color:var(--jkl-color-background-container-inverted);--knob-color:var(--jkl-color-text-inverted);--knob-position:calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding)*2)}.jkl-toggle-switch[disabled]{cursor:revert;--text-color:var(--jkl-color-text-subdued);--switch-border-color:var(--jkl-color-border-subdued);--knob-border-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch[disabled][aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch[disabled]{--indicator-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch-widget{align-items:center;background-color:var(--indicator-color);border:var(--border-width) solid var(--switch-border-color);border-radius:9999px;box-sizing:border-box;display:flex;flex-direction:row;height:var(--jkl-toggle-switch-height);overflow:hidden;padding:var(--switch-padding);pointer-events:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--jkl-toggle-switch-width)}@media screen and (forced-colors:active){.jkl-toggle-switch-widget{border:.0625rem solid ButtonText}}.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-toggle-switch-widget__slider{box-sizing:border-box;color:var(--icon-color);height:var(--jkl-toggle-switch-knob-size);position:relative;transition-duration:.15s;transition-property:translate;transition-timing-function:ease;translate:var(--knob-position);width:var(--jkl-toggle-switch-knob-size)}.jkl-toggle-switch-widget__knob{background-color:var(--knob-color);border:var(--border-width) solid var(--knob-border-color);border-radius:9999px;inset:0;position:absolute}.jkl-toggle-switch-widget__indicator{margin-right:var(--jkl-toggle-switch-indicator-spacing);position:absolute;right:100%;top:50%;transform:translateY(-50%)}.jkl-toggle-switch-widget__indicator>.jkl-icon__icon{inset:0;position:absolute}

package/src/components/toggle-switch/styles/toggle-switch.scss

@@ -0,0 +1,138 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+@use "./toggle-slider";
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-toggle", "body");
+
+    --jkl-toggle-switch-height: #{jkl.rem(28px)};
+    --jkl-toggle-switch-width: #{jkl.rem(48px)};
+    --jkl-toggle-switch-knob-size: #{jkl.rem(20px)};
+    --jkl-toggle-switch-indicator-spacing: 0;
+    --jkl-toggle-switch-help-label-spacing: var(--jkl-spacing-2);
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-toggle", "small");
+
+    --jkl-toggle-switch-height: #{jkl.rem(20px)};
+    --jkl-toggle-switch-width: #{jkl.rem(36px)};
+    --jkl-toggle-switch-knob-size: #{jkl.rem(12px)};
+    --jkl-toggle-switch-indicator-spacing: #{jkl.rem(-2px)};
+    --jkl-toggle-switch-help-label-spacing: 0;
+}
+
+.jkl-toggle-switch {
+    --border-width: #{jkl.rem(1px)};
+    --switch-padding: #{jkl.rem(4px)};
+    --knob-position: 0;
+    --switch-border-color: var(--jkl-color-border-action);
+    --indicator-color: var(--jkl-color-background-container-high);
+    --knob-border-color: var(--jkl-color-border-action);
+    --knob-color: var(--jkl-color-background-container-high);
+    --text-color: var(--jkl-color-text-default);
+    --icon-color: var(--jkl-color-text-inverted);
+
+    background: transparent;
+    color: var(--text-color);
+    padding: 0;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: var(--jkl-spacing-8);
+    touch-action: none; // Forhindrer at siden flytter på seg når man drar i toggle
+
+    @include jkl.use-font-variables("jkl-toggle");
+
+    @include jkl.reset-outline;
+
+    @include jkl.forced-colors-mode {
+        border-color: transparent;
+        border-style: none;
+    }
+
+    &[aria-pressed="true"],
+    [aria-checked="true"] > & {
+        --indicator-color: var(--jkl-color-background-container-inverted);
+        --knob-color: var(--jkl-color-text-inverted);
+        --knob-position: calc(
+            var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding) * 2
+        );
+    }
+
+    &[disabled] {
+        cursor: revert;
+
+        --text-color: var(--jkl-color-text-subdued);
+        --switch-border-color: var(--jkl-color-border-subdued);
+        --knob-border-color: var(--jkl-color-border-subdued);
+
+        &[aria-pressed="true"],
+        [aria-checked="true"] > & {
+            --indicator-color: var(--jkl-color-border-subdued);
+        }
+    }
+}
+
+.jkl-toggle-switch-widget {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: var(--jkl-toggle-switch-height);
+    width: var(--jkl-toggle-switch-width);
+    border-radius: 9999px;
+    border: var(--border-width) solid var(--switch-border-color);
+    overflow: hidden;
+    user-select: none;
+    padding: var(--switch-padding);
+    background-color: var(--indicator-color);
+    pointer-events: none;
+
+    @include jkl.forced-colors-mode {
+        border: jkl.rem(1px) solid ButtonText;
+    }
+
+    .jkl-toggle-switch:focus-visible & {
+        @include jkl.focus-outline;
+    }
+
+    &__slider {
+        position: relative;
+        box-sizing: border-box;
+        height: var(--jkl-toggle-switch-knob-size);
+        width: var(--jkl-toggle-switch-knob-size);
+        color: var(--icon-color);
+
+        @include jkl.motion;
+        transition-property: translate;
+        translate: var(--knob-position);
+    }
+
+    &__knob {
+        position: absolute;
+        inset: 0;
+        border-radius: 9999px;
+        border: var(--border-width) solid var(--knob-border-color);
+        background-color: var(--knob-color);
+    }
+
+    &__indicator {
+        position: absolute;
+        top: 50%;
+        right: 100%;
+        margin-right: var(--jkl-toggle-switch-indicator-spacing);
+        transform: translate(0, -50%);
+
+        & > .jkl-icon__icon {
+            // Uten dette får ikonet feil alignment. Mulig bug i ikonpakken?
+            position: absolute;
+            inset: 0;
+        }
+    }
+}