@fremtind/jokul 0.16.0 → 0.17.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;
+        }
+    }
+}

package/src/components/tooltip/styles/tooltip.css

@@ -2,49 +2,32 @@
  * Do not edit directly
  * Generated on Mon, 23 Sep 2024 08:51:40 GMT
  */
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-tooltip-size: 1.5rem;
-  --jkl-tooltip-content-padding: 1rem;
+.jkl .jkl-tooltip-content,
+.jkl-tooltip-content[data-layout-density=comfortable],
+.jkl-tooltip-content[data-density=comfortable],
+[data-layout-density=comfortable] .jkl-tooltip-content,
+[data-density=comfortable] .jkl-tooltip-content {
+  --content-padding: 1rem;
 }
 @media (width >= 0) and (max-width: 679px) {
-  :root,
-  [data-layout-density=comfortable],
-  [data-density=comfortable] {
-    --jkl-tooltip-size: 1.25rem;
-    --jkl-tooltip-content-padding: 0.75rem;
+  .jkl .jkl-tooltip-content,
+  .jkl-tooltip-content[data-layout-density=comfortable],
+  .jkl-tooltip-content[data-density=comfortable],
+  [data-layout-density=comfortable] .jkl-tooltip-content,
+  [data-density=comfortable] .jkl-tooltip-content {
+    --content-padding: 0.75rem;
   }
 }
 
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-tooltip-size: 1.25rem;
-  --jkl-tooltip-content-padding: 0.5rem;
+.jkl-tooltip-content[data-layout-density=compact],
+.jkl-tooltip-content[data-density=compact],
+[data-layout-density=compact] .jkl-tooltip-content,
+[data-density=compact] .jkl-tooltip-content {
+  --content-padding: 0.5rem;
 }
 
 .jkl-tooltip-trigger {
-  background-color: unset;
-  padding: unset;
-  color: unset;
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-tooltip-trigger:active, .jkl-tooltip-trigger:hover, .jkl-tooltip-trigger:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
-  .jkl-tooltip-trigger {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
-  }
-  .jkl-tooltip-trigger:active, .jkl-tooltip-trigger:hover, .jkl-tooltip-trigger:focus {
-    outline: revert;
-    outline-style: revert;
-  }
+  all: unset;
 }
 html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus {
   --jkl-icon-weight: 500;
@@ -53,18 +36,16 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 }
 
 .jkl-tooltip-content {
-  --background-color: var(--jkl-color-background-container-inverted);
-  --text-color: var(--jkl-color-text-inverted);
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 400;
   --jkl-icon-weight: 300;
-  background-color: var(--background-color);
-  color: var(--text-color);
+  background-color: var(--jkl-color-background-container-inverted);
+  color: var(--jkl-color-text-inverted);
   display: inline-block;
   min-width: min-content;
   max-width: min(19.375rem, 100%);
-  padding: var(--jkl-tooltip-content-padding);
+  padding: var(--content-padding);
   position: absolute;
   z-index: 10000;
 }
@@ -88,7 +69,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 .jkl-tooltip-content__arrow {
   overflow: hidden;
   position: absolute;
-  background-color: var(--background-color);
+  background-color: var(--jkl-color-background-container-inverted);
   transform: rotate(45deg);
   height: 1rem;
   width: 1rem;
@@ -100,7 +81,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 }
 
 .jkl-tooltip-question-button {
-  --button-color: var(--jkl-color-text-interactive);
   transition-timing-function: ease-in;
   transition-duration: 100ms;
   transition-property: color;
@@ -110,7 +90,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   padding: 0;
   display: inline-flex;
   align-items: center;
-  color: var(--button-color);
+  color: var(--jkl-color-text-interactive);
   transform: translateY(max(0.16em, 0.25rem));
   font-size: 1.2em;
   border-radius: 9999px;

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

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tooltip-size:1.5rem;--jkl-tooltip-content-padding:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tooltip-size:1.25rem;--jkl-tooltip-content-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-tooltip-size:1.25rem;--jkl-tooltip-content-padding:0.5rem}.jkl-tooltip-trigger{background-color:unset;border-style:none;color:unset;padding:unset}.jkl-tooltip-trigger,.jkl-tooltip-trigger:active,.jkl-tooltip-trigger:focus,.jkl-tooltip-trigger:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-trigger{border-style:revert}.jkl-tooltip-trigger,.jkl-tooltip-trigger:active,.jkl-tooltip-trigger:focus,.jkl-tooltip-trigger:hover{outline:revert;outline-style:revert}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-tooltip-content{--background-color:var(--jkl-color-background-container-inverted);--text-color:var(--jkl-color-text-inverted);font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;background-color:var(--background-color);color:var(--text-color);display:inline-block;max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--jkl-tooltip-content-padding);position:absolute;z-index:10000}.jkl-tooltip-content[data-placement^=top]>.jkl-tooltip-content__arrow{bottom:-.5rem}.jkl-tooltip-content[data-placement^=bottom]>.jkl-tooltip-content__arrow{top:-.5rem}.jkl-tooltip-content[data-placement^=left]>.jkl-tooltip-content__arrow{right:-.5rem}.jkl-tooltip-content[data-placement^=right]>.jkl-tooltip-content__arrow{left:-.5rem}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-content__arrow{background-color:var(--background-color);height:1rem;overflow:hidden;position:absolute;transform:rotate(45deg);width:1rem}@media screen and (forced-colors:active){.jkl-tooltip-content__arrow{background-color:CanvasText}}.jkl-tooltip-question-button{--button-color:var(--jkl-color-text-interactive);align-items:center;background-color:initial;border-radius:9999px;border-style:none;color:var(--button-color);cursor:pointer;display:inline-flex;font-size:1.2em;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(max(.16em,.25rem));transition-duration:.1s;transition-property:color;transition-timing-function:ease-in}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert}.jkl-tooltip-question-button,.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}
+.jkl .jkl-tooltip-content,.jkl-tooltip-content[data-density=comfortable],.jkl-tooltip-content[data-layout-density=comfortable],[data-density=comfortable] .jkl-tooltip-content,[data-layout-density=comfortable] .jkl-tooltip-content{--content-padding:1rem}@media (width >= 0) and (max-width:679px){.jkl .jkl-tooltip-content,.jkl-tooltip-content[data-density=comfortable],.jkl-tooltip-content[data-layout-density=comfortable],[data-density=comfortable] .jkl-tooltip-content,[data-layout-density=comfortable] .jkl-tooltip-content{--content-padding:0.75rem}}.jkl-tooltip-content[data-density=compact],.jkl-tooltip-content[data-layout-density=compact],[data-density=compact] .jkl-tooltip-content,[data-layout-density=compact] .jkl-tooltip-content{--content-padding:0.5rem}.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-tooltip-content{font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;background-color:var(--jkl-color-background-container-inverted);color:var(--jkl-color-text-inverted);display:inline-block;max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}.jkl-tooltip-content[data-placement^=top]>.jkl-tooltip-content__arrow{bottom:-.5rem}.jkl-tooltip-content[data-placement^=bottom]>.jkl-tooltip-content__arrow{top:-.5rem}.jkl-tooltip-content[data-placement^=left]>.jkl-tooltip-content__arrow{right:-.5rem}.jkl-tooltip-content[data-placement^=right]>.jkl-tooltip-content__arrow{left:-.5rem}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-content__arrow{background-color:var(--jkl-color-background-container-inverted);height:1rem;overflow:hidden;position:absolute;transform:rotate(45deg);width:1rem}@media screen and (forced-colors:active){.jkl-tooltip-content__arrow{background-color:CanvasText}}.jkl-tooltip-question-button{align-items:center;background-color:initial;border-radius:9999px;border-style:none;color:var(--jkl-color-text-interactive);cursor:pointer;display:inline-flex;font-size:1.2em;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(max(.16em,.25rem));transition-duration:.1s;transition-property:color;transition-timing-function:ease-in}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert}.jkl-tooltip-question-button,.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}

package/src/components/tooltip/styles/tooltip.scss

@@ -6,27 +6,20 @@ $_tooltip-arrow-height: jkl.rem(8px);
 $_focus-ring-distance: jkl.rem(-1px); // Negativ margin for å unngå subpixel mellomrom mellom border og box-shadow
 $_focus-ring-width: jkl.rem(2px);
 
-@include jkl.comfortable-density-variables {
-    --jkl-tooltip-size: #{jkl.rem(24px)};
-    --jkl-tooltip-content-padding: #{jkl.$spacing-m};
+@include jkl.comfortable-density(".jkl-tooltip-content") {
+    --content-padding: #{jkl.$spacing-16};
 
     @include jkl.small-device {
-        --jkl-tooltip-size: #{jkl.rem(20px)};
-        --jkl-tooltip-content-padding: #{jkl.$spacing-s};
+        --content-padding: #{jkl.$spacing-12};
     }
 }
 
-@include jkl.compact-density-variables {
-    --jkl-tooltip-size: #{jkl.rem(20px)};
-    --jkl-tooltip-content-padding: #{jkl.$spacing-xs};
+@include jkl.compact-density(".jkl-tooltip-content") {
+    --content-padding: #{jkl.$spacing-8};
 }
 
 .jkl-tooltip-trigger {
-    background-color: unset;
-    padding: unset;
-    color: unset;
-
-    @include jkl.reset-outline;
+    all: unset;
 
     &:focus {
         @include jkl.keyboard-navigation {
@@ -36,16 +29,13 @@ $_focus-ring-width: jkl.rem(2px);
 }
 
 .jkl-tooltip-content {
-    --background-color: var(--jkl-color-background-container-inverted);
-    --text-color: var(--jkl-color-text-inverted);
-
     @include jkl.text-style("small");
-    background-color: var(--background-color);
-    color: var(--text-color);
+    background-color: var(--jkl-color-background-container-inverted);
+    color: var(--jkl-color-text-inverted);
     display: inline-block;
     min-width: min-content;
     max-width: min(jkl.rem(310px), 100%); // 10px mindre enn smaleste støttede skjerm
-    padding: var(--jkl-tooltip-content-padding);
+    padding: var(--content-padding);
     position: absolute;
     z-index: jkl.$z-index--floating;
 
@@ -72,7 +62,7 @@ $_focus-ring-width: jkl.rem(2px);
     &__arrow {
         overflow: hidden;
         position: absolute;
-        background-color: var(--background-color);
+        background-color: var(--jkl-color-background-container-inverted);
         transform: rotate(45deg);
         height: $_tooltip-arrow-height * 2;
         width: $_tooltip-arrow-height * 2;
@@ -84,8 +74,6 @@ $_focus-ring-width: jkl.rem(2px);
 }
 
 .jkl-tooltip-question-button {
-    --button-color: var(--jkl-color-text-interactive);
-
     @include jkl.motion("exit", "snappy");
     transition-property: color;
     cursor: pointer;
@@ -94,7 +82,7 @@ $_focus-ring-width: jkl.rem(2px);
     padding: 0;
     display: inline-flex;
     align-items: center;
-    color: var(--button-color);
+    color: var(--jkl-color-text-interactive);
     transform: translateY(max(0.16em, jkl.rem(4px))); // Cap på 4px
     font-size: 1.2em;
     border-radius: 9999px;
@@ -112,6 +100,7 @@ $_focus-ring-width: jkl.rem(2px);
     &::after {
         content: "";
         position: absolute;
+
         top: 50%;
         left: 50%;
         translate: -50% -50%;