@knime/kds-components 0.30.2 → 0.30.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @knime/kds-components
 
+## 0.30.4
+
+### Patch Changes
+
+- a3fd80a: Defer mounting the popover contents of `KdsContextMenu`, `KdsColorInput`, `KdsDateTimeFormatInput`, `KdsDropdown`, `KdsInfoToggleButton`, `KdsIntervalInput`, `KdsMenu`, `KdsMenuButton`, `KdsMultiSelectDropdown`, `KdsSearchInput`, `KdsSplitButton`, and `KdsTextInput` until the popover is opened.
+- e81d027: Add KdsToggleSwitch
+- af37b2f: Add KdsDateTimeInput and KdsZonedDateTimeInput
+  - @knime/kds-styles@0.30.4
+
+## 0.30.3
+
+### Patch Changes
+
+- c3d0507: KdsLiveStatus: Hide title when label is provided
+- d896ae8: KDS-889: Reduce default height of twinlist
+- dcd8cf9: KdsPopover: Add center alignments
+- c5776f1: KdsProgressBar - expose percentage CSS transition variable
+  - @knime/kds-styles@0.30.3
+
 ## 0.30.2
 
 ### Patch Changes

package/dist/index.css

@@ -280,7 +280,7 @@
 }
 
 .kds-progress-bar {
-&[data-v-5fdfbce2] {
+&[data-v-884d689a] {
   --progress-bar-background-color: var(--kds-color-surface-subtle);
   --progress-bar-foreground-color: var(
     --kds-color-background-primary-bold-initial
@@ -298,7 +298,7 @@
 
   /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
 }
-& .progress[data-v-5fdfbce2] {
+& .progress[data-v-884d689a] {
     display: block;
     width: 100%;
     height: var(--progress-bar-height);
@@ -311,44 +311,44 @@
     border: none;
     border-radius: var(--progress-bar-radius);
 }
-& .progress[data-v-5fdfbce2]::-webkit-progress-bar {
+& .progress[data-v-884d689a]::-webkit-progress-bar {
     background-color: var(--progress-bar-background-color);
 }
-& .progress[data-v-5fdfbce2]::-webkit-progress-value {
+& .progress[data-v-884d689a]::-webkit-progress-value {
     background-color: var(--progress-bar-foreground-color);
     border-radius: var(--progress-bar-radius);
-    transition: width 0.5s;
+    transition: width var(--progress-bar-transition-duration, 0.5s);
 }
-& .progress[data-v-5fdfbce2]::-moz-progress-bar {
+& .progress[data-v-884d689a]::-moz-progress-bar {
     background-color: var(--progress-bar-foreground-color);
 }
-& .progress[data-v-5fdfbce2]:indeterminate {
+& .progress[data-v-884d689a]:indeterminate {
     background-color: var(--progress-bar-background-color);
     background-image: none;
 }
-& .progress[data-v-5fdfbce2]:indeterminate::-webkit-progress-bar {
+& .progress[data-v-884d689a]:indeterminate::-webkit-progress-bar {
     background-color: transparent;
 }
-& .progress[data-v-5fdfbce2]:indeterminate::-moz-progress-bar {
+& .progress[data-v-884d689a]:indeterminate::-moz-progress-bar {
     background-color: transparent;
 }
-& .indeterminate-bar[data-v-5fdfbce2] {
+& .indeterminate-bar[data-v-884d689a] {
     position: absolute;
     inset-block: 0;
     width: 35%;
     pointer-events: none;
     background-color: var(--progress-bar-foreground-color);
     border-radius: var(--kds-border-radius-container-pill);
-    animation: move-indeterminate-5fdfbce2 1.5s linear infinite;
+    animation: move-indeterminate-884d689a 1.5s linear infinite;
 }
 }
-.kds-progress-bar-medium[data-v-5fdfbce2] {
+.kds-progress-bar-medium[data-v-884d689a] {
   --progress-bar-height: var(--kds-dimension-component-height-0-25x);
 }
-.kds-progress-bar-large[data-v-5fdfbce2] {
+.kds-progress-bar-large[data-v-884d689a] {
   --progress-bar-height: var(--kds-dimension-component-height-0-75x);
 }
-@keyframes move-indeterminate-5fdfbce2 {
+@keyframes move-indeterminate-884d689a {
 0% {
     transform: translateX(-120%);
 }
@@ -390,7 +390,7 @@
 }
 
 .kds-live-status {
-&[data-v-01555495] {
+&[data-v-f20c5c00] {
   --dot-color: var(--kds-color-state-disabled);
   --dot-border-color: var(--kds-color-state-disabled-border);
 
@@ -401,20 +401,20 @@
   max-width: 100%;
   line-height: 0;
 }
-&.red[data-v-01555495] {
+&.red[data-v-f20c5c00] {
     --dot-color: var(--kds-color-state-error);
     --dot-border-color: var(--kds-color-state-error-border);
 }
-&.orange[data-v-01555495] {
+&.orange[data-v-f20c5c00] {
     --dot-color: var(--kds-color-state-warning);
     --dot-border-color: var(--kds-color-state-warning-border);
 }
-&.green[data-v-01555495] {
+&.green[data-v-f20c5c00] {
     --dot-color: var(--kds-color-state-success);
     --dot-border-color: var(--kds-color-state-success-border);
 }
 .dot {
-&[data-v-01555495] {
+&[data-v-f20c5c00] {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -422,7 +422,7 @@
     width: var(--kds-dimension-icon-1-25x);
     height: var(--kds-dimension-icon-1-25x);
 }
-&[data-v-01555495]::after {
+&[data-v-f20c5c00]::after {
       display: block;
       width: 50%;
       height: 50%;
@@ -434,7 +434,7 @@
       border-radius: var(--kds-border-radius-container-pill);
 }
 }
-.label[data-v-01555495] {
+.label[data-v-f20c5c00] {
     overflow: hidden;
     text-overflow: ellipsis;
     font: var(--kds-font-base-subtext-medium);
@@ -442,26 +442,26 @@
     white-space: nowrap;
 }
 &.size-medium {
-.dot[data-v-01555495] {
+.dot[data-v-f20c5c00] {
       width: var(--kds-dimension-icon-1x);
       height: var(--kds-dimension-icon-1x);
 }
-&[data-v-01555495]::after {
+&[data-v-f20c5c00]::after {
       border-width: var(--kds-border-width-icon-stroke-m);
 }
-.label[data-v-01555495] {
+.label[data-v-f20c5c00] {
       font: var(--kds-font-base-subtext-small);
 }
 }
 &.size-small {
-.dot[data-v-01555495] {
+.dot[data-v-f20c5c00] {
       width: var(--kds-dimension-icon-0-75x);
       height: var(--kds-dimension-icon-0-75x);
 }
-&[data-v-01555495]::after {
+&[data-v-f20c5c00]::after {
       border-width: var(--kds-border-width-icon-stroke-s);
 }
-.label[data-v-01555495] {
+.label[data-v-f20c5c00] {
       font: var(--kds-font-base-subtext-xsmall);
 }
 }
@@ -1192,7 +1192,7 @@ html.kds-legacy {
 }
 
 .kds-menu-container {
-&[data-v-9dc6d3f6] {
+&[data-v-ae4f1dab] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-10x);
@@ -1204,12 +1204,12 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-9dc6d3f6]:focus-visible {
+&[data-v-ae4f1dab]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
-.submenu-popover[data-v-9dc6d3f6] {
+.submenu-popover[data-v-ae4f1dab] {
   inset: anchor(top) auto auto anchor(right);
   padding: 0 var(--kds-spacing-container-0-25x);
   margin: 0;
@@ -1224,29 +1224,21 @@ html.kds-legacy {
   border-radius: 0;
   box-shadow: none;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-right-dropdown {
   inset: anchor(top) auto auto anchor(right);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-left-dropdown {
   inset: anchor(top) anchor(left) auto auto;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-right-dropup {
   inset: auto auto anchor(bottom) anchor(right);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-left-dropup {
   inset: auto anchor(left) anchor(bottom) auto;
 }
 
 .kds-popover {
-&[data-v-3354d162] {
+&[data-v-f41f0af7] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1257,16 +1249,6 @@ html.kds-legacy {
   border-radius: 0;
   box-shadow: none;
 
-  /* noinspection CssInvalidFunction */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
   /*
    * For custom placement the popover is positioned statically via inline
    * left/top styles. Explicitly clear the UA default `inset: 0` so the
@@ -1274,11 +1256,11 @@ html.kds-legacy {
    * light-dismiss / click-outside behavior).
    */
 }
-&.full-width[data-v-3354d162] {
+&.full-width[data-v-f41f0af7] {
     min-inline-size: anchor-size(width);
     max-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-3354d162] {
+&.floating.top-right[data-v-f41f0af7] {
     inset: auto anchor(right) anchor(top) auto;
     margin: var(--kds-spacing-container-0-25x) 0
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1286,7 +1268,14 @@ html.kds-legacy {
       --kds-popover-try-top-left, --kds-popover-try-bottom-right,
       --kds-popover-try-bottom-left, --kds-popover-try-top-right;
 }
-&.floating.top-left[data-v-3354d162] {
+&.floating.top-center[data-v-f41f0af7] {
+    inset: auto 0 anchor(top);
+    justify-self: anchor-center;
+    margin: var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-bottom-center, --kds-popover-try-top-center;
+}
+&.floating.top-left[data-v-f41f0af7] {
     inset: auto auto anchor(top) anchor(left);
     margin: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1294,7 +1283,7 @@ html.kds-legacy {
       --kds-popover-try-top-right, --kds-popover-try-bottom-left,
       --kds-popover-try-bottom-right, --kds-popover-try-top-left;
 }
-&.floating.bottom-right[data-v-3354d162] {
+&.floating.bottom-right[data-v-f41f0af7] {
     inset: anchor(bottom) anchor(right) auto auto;
     margin: var(--kds-spacing-container-0-25x) 0
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1302,7 +1291,14 @@ html.kds-legacy {
       --kds-popover-try-bottom-left, --kds-popover-try-top-right,
       --kds-popover-try-top-left, --kds-popover-try-bottom-right;
 }
-&.floating.bottom-left[data-v-3354d162] {
+&.floating.bottom-center[data-v-f41f0af7] {
+    inset: anchor(bottom) 0 auto;
+    justify-self: anchor-center;
+    margin: var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-top-center, --kds-popover-try-bottom-center;
+}
+&.floating.bottom-left[data-v-f41f0af7] {
     inset: anchor(bottom) auto auto anchor(left);
     margin: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1310,41 +1306,43 @@ html.kds-legacy {
       --kds-popover-try-bottom-right, --kds-popover-try-top-left,
       --kds-popover-try-top-right, --kds-popover-try-bottom-left;
 }
-&.floating.custom[data-v-3354d162] {
+&.floating.custom[data-v-f41f0af7] {
     position: fixed;
     inset: auto;
     margin: 0;
 }
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-top-right {
   inset: auto anchor(right) anchor(top) auto;
   margin: var(--kds-spacing-container-0-25x) 0
     var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-top-center {
+  inset: auto auto anchor(top);
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
 @position-try --kds-popover-try-top-left {
   inset: auto auto anchor(top) anchor(left);
   margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
     var(--kds-spacing-container-0-25x) 0;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-bottom-right {
   inset: anchor(bottom) anchor(right) auto auto;
   margin: var(--kds-spacing-container-0-25x) 0
     var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-bottom-center {
+  inset: anchor(bottom) auto auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
 @position-try --kds-popover-try-bottom-left {
   inset: anchor(bottom) auto auto anchor(left);
   margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
     var(--kds-spacing-container-0-25x) 0;
 }
-.kds-popover-default-content[data-v-3354d162] {
+.kds-popover-default-content[data-v-f41f0af7] {
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1354,24 +1352,24 @@ html.kds-legacy {
 }
 
 .kds-split-button {
-&[data-v-8f48b87a] {
+&[data-v-ebc30e66] {
   display: flex;
 }
-&.filled[data-v-8f48b87a] {
+&.filled[data-v-ebc30e66] {
     gap: var(--kds-spacing-container-0-10x);
 }
-&.outlined[data-v-8f48b87a] {
+&.outlined[data-v-ebc30e66] {
     gap: var(--kds-spacing-container-none);
 }
-& .kds-split-button-primary.outlined[data-v-8f48b87a] {
+& .kds-split-button-primary.outlined[data-v-ebc30e66] {
     border-right: none;
 }
 }
-.kds-split-button-primary[data-v-8f48b87a] {
+.kds-split-button-primary[data-v-ebc30e66] {
   flex-shrink: 1;
   min-width: 0;
 }
-.kds-split-button-secondary[data-v-8f48b87a] {
+.kds-split-button-secondary[data-v-ebc30e66] {
   flex-shrink: 0;
 }
 
@@ -1625,7 +1623,7 @@ html.kds-legacy {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 
-.kds-text-input-suggestions[data-v-83f45d15] {
+.kds-text-input-suggestions[data-v-dd35e2a4] {
   max-height: var(--kds-dimension-component-height-12x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
@@ -2083,6 +2081,144 @@ table:focus {
   align-items: flex-start;
 }
 
+.toggle-switch {
+&[data-v-417fc16d] {
+  --bg-initial: var(--kds-color-background-neutral-bold-initial);
+  --bg-hover: var(--kds-color-background-neutral-bold-hover);
+  --bg-active: var(--kds-color-background-neutral-bold-active);
+  --border: var(--kds-border-action-input);
+  --knob-color: var(--kds-color-toggle-switch-knob-initial);
+  --icon-color: var(--kds-color-toggle-switch-icon-off);
+  --text-color: var(--kds-color-text-and-icon-neutral);
+
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+}
+&.small[data-v-417fc16d] {
+    font: var(--kds-font-base-title-small);
+}
+&.medium[data-v-417fc16d] {
+    font: var(--kds-font-base-title-medium);
+}
+&.label-right[data-v-417fc16d] {
+    flex-direction: row;
+    gap: var(--kds-spacing-container-0-37x);
+}
+&.label-top[data-v-417fc16d] {
+    flex-direction: column-reverse;
+    gap: var(--kds-spacing-container-0-12x);
+    align-items: flex-start;
+}
+&.small.label-right[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-37x);
+}
+&.medium.label-right[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-5x);
+}
+&.small.label-top[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-12x);
+}
+&.medium.label-top[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-25x);
+}
+.control[data-v-417fc16d] {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: var(--kds-border-radius-container-pill);
+    transition:
+      background 0.2s ease,
+      border 0.2s ease;
+}
+&.small .control[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-1-75x);
+    height: var(--kds-dimension-component-height-1x);
+    padding: var(--kds-spacing-container-0-10x);
+}
+&.medium .control[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-2-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+    padding: var(--kds-spacing-container-0-10x);
+}
+&:focus-visible .control[data-v-417fc16d] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-417fc16d] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-417fc16d] {
+    background: var(--bg-active);
+}
+&.checked[data-v-417fc16d] {
+    --bg-initial: var(--kds-color-background-primary-bold-initial);
+    --bg-hover: var(--kds-color-background-primary-bold-hover);
+    --bg-active: var(--kds-color-background-primary-bold-active);
+    --border: var(--kds-border-action-primary);
+    --icon-color: var(--kds-color-toggle-switch-icon-on);
+}
+.knob[data-v-417fc16d] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-color);
+    background: var(--knob-color);
+    border-radius: var(--kds-border-radius-container-pill);
+    box-shadow: var(--kds-box-shadow-knob);
+    transition:
+      transform 0.2s ease,
+      background 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+.knob[data-v-417fc16d] {
+      transition: none;
+}
+}
+&.small .knob[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-0-75x);
+    height: var(--kds-dimension-component-height-0-75x);
+}
+&.medium .knob[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-1x);
+    height: var(--kds-dimension-component-height-1x);
+}
+&.checked .knob[data-v-417fc16d] {
+    transform: translateX(100%);
+}
+.content {
+&[data-v-417fc16d] {
+    display: flex;
+    flex-direction: column;
+}
+& .label[data-v-417fc16d] {
+      color: var(--text-color);
+}
+}
+&.disabled[data-v-417fc16d] {
+    --bg-initial: var(--kds-color-background-disabled-default);
+    --border: var(--kds-border-action-disabled);
+    --knob-color: var(--kds-color-toggle-switch-knob-disabled);
+    --icon-color: var(--kds-color-toggle-switch-icon-disabled);
+    --text-color: var(--kds-color-text-and-icon-disabled);
+
+    cursor: default;
+}
+&.disabled.checked[data-v-417fc16d] {
+    --bg-initial: var(--kds-color-background-disabled-primary);
+    --border: var(--kds-border-action-transparent);
+}
+}
+
 .radio {
 &[data-v-f4f6392a] {
   --bg-initial: var(--kds-color-background-input-initial);
@@ -2660,7 +2796,7 @@ table:focus {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-aec3e3d0] {
+.kds-search-results-container[data-v-8930f00a] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -2792,6 +2928,12 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
+.kds-date-time-input[data-v-f2ad3cef] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--kds-spacing-container-0-25x);
+}
+
 .kds-dropdown-trigger-button {
 &[data-v-1bb2d375] {
   display: flex;
@@ -2881,6 +3023,17 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
+.kds-zoned-date-time-input[data-v-7dcebccd] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-75x);
+}
+.date-time-row[data-v-7dcebccd] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--kds-spacing-container-0-25x);
+}
+
 .kds-list-item-button {
 &[data-v-21fb5571] {
   position: relative;
@@ -3078,7 +3231,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   pointer-events: none;
 }
 
-.kds-twin-list-body[data-v-11062d8e] {
+.kds-twin-list-body[data-v-eb1bc043] {
   display: grid;
   grid-template-columns:
     minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
@@ -3086,31 +3239,31 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   gap: var(--kds-spacing-container-0-25x);
 }
 .kds-list-column {
-&[data-v-11062d8e] {
+&[data-v-eb1bc043] {
   display: flex;
   flex-direction: column;
   min-block-size: 0;
   }
-& .kds-list-box[data-v-11062d8e] {
+& .kds-list-box[data-v-eb1bc043] {
     flex: 1;
     min-block-size: 0;
 }
 }
-.kds-list-header[data-v-11062d8e] {
+.kds-list-header[data-v-eb1bc043] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
 }
-.kds-list-label[data-v-11062d8e] {
+.kds-list-label[data-v-eb1bc043] {
   font: var(--kds-font-base-title-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.kds-list-count[data-v-11062d8e] {
+.kds-list-count[data-v-eb1bc043] {
   font: var(--kds-font-base-title-xsmall);
   color: var(--kds-color-text-and-icon-muted);
 }
-.kds-button-column[data-v-11062d8e] {
+.kds-button-column[data-v-eb1bc043] {
   display: flex;
   flex-direction: column;
   padding-top: var(--kds-spacing-container-4x);
@@ -3162,7 +3315,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .info-toggle-button {
-&[data-v-2e9ef96a] {
+&[data-v-67a8974e] {
   --bg-initial: transparent;
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3183,20 +3336,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-2e9ef96a] {
+&.hidden[data-v-67a8974e] {
     opacity: 0;
 }
-&[data-v-2e9ef96a]:focus-visible {
+&[data-v-67a8974e]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-2e9ef96a]:hover {
+&[data-v-67a8974e]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-2e9ef96a]:active {
+&[data-v-67a8974e]:active {
     background-color: var(--bg-active);
 }
-&.selected[data-v-2e9ef96a] {
+&.selected[data-v-67a8974e] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);