@knime/kds-components 0.5.9 → 0.6.0

package/dist/index.css

@@ -12,16 +12,16 @@
   min-height: var(--icon-height);
   vertical-align: middle;
   stroke-width: var(--icon-stroke-width);
-  shape-rendering: geometricprecision;
+  shape-rendering: geometricPrecision;
 }
 &.xsmall[data-v-d965b88c] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 @media (max-resolution: 1.5dppx) {
-      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel 
+      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
       rendering issues which manifests in misaligned or 'jumping' svg content.
-      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a 
+      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
       CSS transform. Thus the position of the SVG elements stays intact. */
 &[data-v-d965b88c] {
         --scaling-factor: 0.75;
@@ -30,7 +30,6 @@
         --icon-stroke-width: calc(
           var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
         );
-        shape-rendering: crispEdges;
         transform: scale(var(--scaling-factor));
 }
 }
@@ -52,7 +51,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-dd209f83] {
+&[data-v-ab4824cd] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -66,143 +65,143 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-dd209f83]:is(a) {
+&[data-v-ab4824cd]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-dd209f83] {
+&.disabled[data-v-ab4824cd] {
     cursor: default;
 }
-&[data-v-dd209f83]:focus-visible {
+&[data-v-ab4824cd]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-dd209f83] {
+&[data-v-ab4824cd] {
     color: var(--kds-color-text-and-icon-primary-inverted);
     background-color: var(--kds-color-background-primary-bold-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-dd209f83] {
+&.disabled[data-v-ab4824cd] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
-&:not(.disabled) {
-&[data-v-dd209f83]:hover {
+&:not(.disabled, .success, .error) {
+&[data-v-ab4824cd]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-dd209f83]:active {
+&[data-v-ab4824cd]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-dd209f83] {
+&[data-v-ab4824cd] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-dd209f83] {
+&.disabled[data-v-ab4824cd] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
-&:not(.disabled) {
-&[data-v-dd209f83]:hover {
+&:not(.disabled, .success, .error) {
+&[data-v-ab4824cd]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-dd209f83]:active {
+&[data-v-ab4824cd]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-dd209f83] {
+&[data-v-ab4824cd] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-default);
 }
-&.disabled[data-v-dd209f83] {
+&.disabled[data-v-ab4824cd] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
-&:not(.disabled) {
-&[data-v-dd209f83]:hover {
+&:not(.disabled, .success, .error) {
+&[data-v-ab4824cd]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-dd209f83]:active {
+&[data-v-ab4824cd]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-dd209f83] {
+&[data-v-ab4824cd] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-dd209f83] {
+&.disabled[data-v-ab4824cd] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
-&:not(.disabled) {
-&[data-v-dd209f83]:hover {
+&:not(.disabled, .success, .error) {
+&[data-v-ab4824cd]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-dd209f83]:active {
+&[data-v-ab4824cd]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-dd209f83] {
+&[data-v-ab4824cd] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-dd209f83] {
+&.disabled[data-v-ab4824cd] {
       color: var(--kds-color-text-and-icon-disabled);
 }
-&:not(.disabled) {
-&[data-v-dd209f83]:hover {
+&:not(.disabled, .success, .error) {
+&[data-v-ab4824cd]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-dd209f83]:active {
+&[data-v-ab4824cd]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-dd209f83] {
+&[data-v-ab4824cd] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-dd209f83] {
+&.disabled[data-v-ab4824cd] {
         color: var(--kds-color-text-and-icon-disabled);
 }
-&:not(.disabled) {
-&[data-v-dd209f83]:hover {
+&:not(.disabled, .success, .error) {
+&[data-v-ab4824cd]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-dd209f83]:active {
+&[data-v-ab4824cd]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-dd209f83] {
+&[data-v-ab4824cd] {
     color: var(--kds-color-text-and-icon-selected);
     background-color: var(--kds-color-background-selected-initial);
     border: var(--kds-border-action-selected);
 }
-&.disabled[data-v-dd209f83] {
+&.disabled[data-v-ab4824cd] {
       color: var(--kds-color-text-and-icon-disabled);
 }
-&:not(.disabled) {
-&[data-v-dd209f83]:hover {
+&:not(.disabled, .success, .error) {
+&[data-v-ab4824cd]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-dd209f83]:active {
+&[data-v-ab4824cd]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-dd209f83] {
+& .label[data-v-ab4824cd] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
@@ -210,7 +209,7 @@ html.kds-legacy {
     white-space: nowrap;
     text-rendering: geometricprecision;
 }
-&.xsmall[data-v-dd209f83] {
+&.xsmall[data-v-ab4824cd] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -222,7 +221,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-dd209f83] {
+&.small[data-v-ab4824cd] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -234,7 +233,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-dd209f83] {
+&.medium[data-v-ab4824cd] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -247,7 +246,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-dd209f83] {
+&[data-v-ab4824cd] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -259,195 +258,32 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-dd209f83] {
+& .label[data-v-ab4824cd] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-}
-
-.checkbox {
-&[data-v-a0ec0f68] {
-  --bg-initial: var(--kds-color-background-input-initial);
-  --bg-hover: var(--kds-color-background-input-hover);
-  --bg-active: var(--kds-color-background-input-active);
-  --border: var(--kds-border-action-input);
-  --icon-color: var(--kds-color-text-and-icon-selected);
-  --text-color: var(--kds-color-text-and-icon-neutral);
-  --helper-text-color: var(--kds-color-text-and-icon-muted);
-
-  display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: flex-start;
-  padding: 0;
-  margin: 0;
-  text-align: left;
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-& .control[data-v-a0ec0f68] {
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: var(--kds-dimension-component-height-0-88x);
-    height: var(--kds-dimension-component-height-0-88x);
-    color: var(--icon-color);
-    background: var(--bg-initial);
-    border: var(--border);
-    border-radius: var(--kds-border-radius-container-0-25x);
-}
-&:focus-visible {
-&[data-v-a0ec0f68] {
-    outline: none;
-}
-& .control[data-v-a0ec0f68] {
-      outline: var(--kds-border-action-focused);
-      outline-offset: var(--kds-spacing-offset-focus);
-}
-}
-&:hover:not(.disabled) .control[data-v-a0ec0f68] {
-    background: var(--bg-hover);
-}
-&:active:not(.disabled) .control[data-v-a0ec0f68] {
-    background: var(--bg-active);
-}
-&.checked[data-v-a0ec0f68],
-  &.indeterminate[data-v-a0ec0f68] {
-    --bg-initial: var(--kds-color-background-selected-initial);
-    --bg-hover: var(--kds-color-background-selected-hover);
-    --bg-active: var(--kds-color-background-selected-active);
-    --border: var(--kds-border-action-selected);
-}
-& .content {
-&[data-v-a0ec0f68] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--kds-spacing-container-0-12x);
-    text-rendering: geometricprecision;
-}
-& .label[data-v-a0ec0f68] {
-      padding-top: var(--kds-spacing-container-0-10x);
-      font: var(--kds-font-base-interactive-small);
-      color: var(--text-color);
-}
-& .helper-text[data-v-a0ec0f68] {
-      font: var(--kds-font-base-subtext-small);
-      color: var(--helper-text-color);
-}
-}
-&.disabled[data-v-a0ec0f68] {
-    --border: var(--kds-border-action-disabled);
-    --icon-color: var(--kds-color-text-and-icon-disabled);
-    --text-color: var(--kds-color-text-and-icon-disabled);
-    --helper-text-color: var(--kds-color-text-and-icon-disabled);
-
-    cursor: default;
-}
-&.error {
-&[data-v-a0ec0f68] {
-    --border: var(--kds-border-action-error);
-    --icon-color: var(--kds-color-text-and-icon-danger);
-    --text-color: var(--kds-color-text-and-icon-danger);
-    --helper-text-color: var(--kds-color-text-and-icon-danger);
-    --bg-hover: var(--kds-color-background-danger-hover);
-    --bg-active: var(--kds-color-background-danger-active);
-}
-&.checked[data-v-a0ec0f68],
-    &.indeterminate[data-v-a0ec0f68] {
-      --bg-initial: var(--kds-color-background-danger-initial);
-}
-}
-}
-.kds-icon {
-&[data-v-f7d93fdf] {
-  --icon-width: var(--kds-dimension-icon-1x);
-  --icon-height: var(--kds-dimension-icon-1x);
-  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
-
-  display: inline-block;
-  width: var(--icon-width);
-  /* min sizes, otherwise they might collapse if there is not enough space */
-  min-width: var(--icon-width);
-  height: var(--icon-height);
-  min-height: var(--icon-height);
-  vertical-align: middle;
-  stroke-width: var(--icon-stroke-width);
-  shape-rendering: geometricprecision;
-}
-&.xsmall[data-v-f7d93fdf] {
-    --icon-width: var(--kds-dimension-icon-0-56x);
-    --icon-height: var(--kds-dimension-icon-0-56x);
-    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
-@media (max-resolution: 1.5dppx) {
-      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel 
-      rendering issues which manifests in misaligned or 'jumping' svg content.
-      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a 
-      CSS transform. Thus the position of the SVG elements stays intact. */
-&[data-v-f7d93fdf] {
-        --scaling-factor: 0.75;
-        --icon-width: var(--kds-dimension-icon-0-75x);
-        --icon-height: var(--kds-dimension-icon-0-75x);
-        --icon-stroke-width: calc(
-          var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
-        );
-        shape-rendering: crispEdges;
-        transform: scale(var(--scaling-factor));
-}
-}
-}
-&.small[data-v-f7d93fdf] {
-    --icon-width: var(--kds-dimension-icon-0-75x);
-    --icon-height: var(--kds-dimension-icon-0-75x);
-    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
-}
-&.large[data-v-f7d93fdf] {
-    --icon-width: var(--kds-dimension-icon-1-25x);
-    --icon-height: var(--kds-dimension-icon-1-25x);
-    --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
-}
-}
-.kds-data-type-icon-container {
-&[data-v-f7d93fdf] {
-  --data-type-height: var(--kds-dimension-component-height-1x);
-  --data-type-width: var(--kds-dimension-component-width-1x);
-  --data-type-padding: var(--kds-spacing-container-0-12x);
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--data-type-width);
-  height: var(--data-type-height);
-  padding: var(--data-type-padding);
-  color: var(--kds-color-desktop-header-text-and-icon-muted);
-  background-color: var(--kds-color-page-default);
-  border: var(--kds-border-base-muted);
-  border-radius: var(--kds-border-radius-container-0-12x);
-
-  /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
-}
-&.small[data-v-f7d93fdf] {
-    --data-type-height: var(--kds-dimension-icon-0-75x);
-    --data-type-width: var(--kds-dimension-icon-0-75x);
-    --data-type-padding: var(--kds-spacing-container-none);
-}
-&.large[data-v-f7d93fdf] {
-    --data-type-height: var(--kds-dimension-component-height-1-25x);
-    --data-type-width: var(--kds-dimension-component-width-1-25x);
-}
-& .kds-icon.kds-data-type-icon {
-&.small[data-v-f7d93fdf] {
-      --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
-}
-&.medium[data-v-f7d93fdf] {
-      --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
-}
+&.success[data-v-ab4824cd] {
+    color: var(--kds-color-text-and-icon-success-inverted);
+    background-color: var(--kds-color-background-success-bold-initial);
+    border: var(--kds-border-action-transparent);
+    transition:
+      background-color 200ms ease-out,
+      border-color 200ms ease-out,
+      color 200ms ease-out;
+}
+&.error[data-v-ab4824cd] {
+    color: var(--kds-color-text-and-icon-danger-inverted);
+    background-color: var(--kds-color-background-danger-bold-initial);
+    border: var(--kds-border-action-transparent);
+    transition:
+      background-color 200ms ease-out,
+      border-color 200ms ease-out,
+      color 200ms ease-out;
 }
 }
 
 .modal-header {
-&[data-v-c600bf4b] {
+&[data-v-583e34fe] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -456,12 +292,12 @@ html.kds-legacy {
   font: var(--kds-font-base-title-medium-strong);
   color: var(--kds-color-text-and-icon-neutral);
 }
-& .modal-header-title[data-v-c600bf4b] {
+& .modal-header-title[data-v-583e34fe] {
     flex: 1 1 auto;
 }
 }
 .modal-body {
-&[data-v-c600bf4b] {
+&[data-v-583e34fe] {
   --modal-padding-left: var(--kds-spacing-container-1-5x);
   --modal-padding-right: var(--kds-spacing-container-1-5x);
   --modal-padding-top: var(--kds-spacing-container-0-5x);
@@ -470,17 +306,17 @@ html.kds-legacy {
 
   display: flex;
   flex-direction: column;
-  overflow: var(--v7613d0dd);
+  overflow: var(--c5a8c866);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-variant="padded"][data-v-c600bf4b] {
+&[data-variant="padded"][data-v-583e34fe] {
     gap: var(--modal-gap);
     padding: var(--modal-padding-top) var(--modal-padding-right)
       var(--modal-padding-bottom) var(--modal-padding-left);
 }
 }
-.modal-footer[data-v-c600bf4b] {
+.modal-footer[data-v-583e34fe] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;
@@ -596,10 +432,124 @@ body:has(dialog.modal[open]) {
 }
 }
 
-.ask-again[data-v-bd3a851b] {
+.subtext {
+&[data-v-78af6eac] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  min-height: 1lh;
+  margin-top: var(--kds-spacing-container-0-25x);
+  font: var(--kds-font-base-subtext-small);
+  color: var(--kds-color-text-and-icon-muted);
+}
+&.error[data-v-78af6eac] {
+    color: var(--kds-color-text-and-icon-danger);
+}
+& .subtext-text[data-v-78af6eac] {
+    min-width: 0;
+}
+}
+
+.checkbox {
+&[data-v-593a7b0c] {
+  --bg-initial: var(--kds-color-background-input-initial);
+  --bg-hover: var(--kds-color-background-input-hover);
+  --bg-active: var(--kds-color-background-input-active);
+  --border: var(--kds-border-action-input);
+  --icon-color: var(--kds-color-text-and-icon-selected);
+  --text-color: var(--kds-color-text-and-icon-neutral);
+  --helper-text-color: var(--kds-color-text-and-icon-muted);
+
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+}
+.control[data-v-593a7b0c] {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-dimension-component-height-0-88x);
+    height: var(--kds-dimension-component-height-0-88x);
+    color: var(--icon-color);
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&:focus-visible .control[data-v-593a7b0c] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-593a7b0c] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-593a7b0c] {
+    background: var(--bg-active);
+}
+&.checked[data-v-593a7b0c],
+  &.indeterminate[data-v-593a7b0c] {
+    --bg-initial: var(--kds-color-background-selected-initial);
+    --bg-hover: var(--kds-color-background-selected-hover);
+    --bg-active: var(--kds-color-background-selected-active);
+    --border: var(--kds-border-action-selected);
+}
+.content {
+&[data-v-593a7b0c] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    text-rendering: geometricprecision;
+}
+& .label[data-v-593a7b0c] {
+      padding-top: var(--kds-spacing-container-0-10x);
+      font: var(--kds-font-base-interactive-small);
+      color: var(--text-color);
+}
+& .helper-text[data-v-593a7b0c] {
+      font: var(--kds-font-base-subtext-small);
+      color: var(--helper-text-color);
+}
+}
+&.disabled[data-v-593a7b0c] {
+    --border: var(--kds-border-action-disabled);
+    --icon-color: var(--kds-color-text-and-icon-disabled);
+    --text-color: var(--kds-color-text-and-icon-disabled);
+    --helper-text-color: var(--kds-color-text-and-icon-disabled);
+
+    cursor: default;
+}
+&.error {
+&[data-v-593a7b0c] {
+    --border: var(--kds-border-action-error);
+    --icon-color: var(--kds-color-text-and-icon-danger);
+    --text-color: var(--kds-color-text-and-icon-danger);
+    --bg-hover: var(--kds-color-background-danger-hover);
+    --bg-active: var(--kds-color-background-danger-active);
+}
+&.checked[data-v-593a7b0c],
+    &.indeterminate[data-v-593a7b0c] {
+      --bg-initial: var(--kds-color-background-danger-initial);
+}
+}
+}
+.subtext-wrapper[data-v-593a7b0c] {
+  padding-left: calc(
+    var(--kds-dimension-component-height-0-88x) +
+      var(--kds-spacing-container-0-37x)
+  );
+}
+
+.ask-again[data-v-c0769cfd] {
   padding: var(--kds-spacing-container-0-5x) 0 0 0;
 }
-.flush-left[data-v-bd3a851b] {
+.flush-left[data-v-c0769cfd] {
   margin-right: auto;
 }
 
@@ -659,6 +609,156 @@ to {
 }
 }
 
+.variable-toggle-button {
+&[data-v-8b6f8b81] {
+  --bg-initial: var(--kds-color-background-neutral-initial);
+  --bg-hover: var(--kds-color-background-neutral-hover);
+  --bg-active: var(--kds-color-background-neutral-active);
+  --border: var(--kds-border-action-transparent);
+  --icon-color: var(--kds-color-text-and-icon-neutral);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-0-75x);
+  height: var(--kds-dimension-component-height-0-75x);
+  padding: 0;
+  color: var(--icon-color);
+  cursor: pointer;
+  background-color: var(--bg-initial);
+  border: var(--border);
+  border-radius: var(--kds-border-radius-container-0-12x);
+  opacity: 1;
+}
+&.hidden[data-v-8b6f8b81]:not(:focus-visible, :hover, .disabled) {
+    opacity: 0;
+}
+&[data-v-8b6f8b81]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-8b6f8b81]:hover:not(.disabled) {
+    background-color: var(--bg-hover);
+}
+&[data-v-8b6f8b81]:active:not(.disabled) {
+    background-color: var(--bg-active);
+}
+&.pressed-or-set[data-v-8b6f8b81] {
+    --bg-initial: var(--kds-color-background-selected-initial);
+    --bg-hover: var(--kds-color-background-selected-hover);
+    --bg-active: var(--kds-color-background-selected-active);
+    --border: var(--kds-border-action-selected);
+    --icon-color: var(--kds-color-text-and-icon-success);
+}
+&.error[data-v-8b6f8b81] {
+    --bg-initial: var(--kds-color-background-danger-initial);
+    --bg-hover: var(--kds-color-background-danger-hover);
+    --bg-active: var(--kds-color-background-danger-active);
+    --border: var(--kds-border-action-error);
+    --icon-color: var(--kds-color-text-and-icon-danger);
+}
+&.disabled {
+&[data-v-8b6f8b81] {
+    --icon-color: var(--kds-color-text-and-icon-disabled);
+
+    cursor: default;
+}
+&.pressed-or-set[data-v-8b6f8b81] {
+      --border: var(--kds-border-action-disabled);
+}
+}
+}
+
+.info-toggle-button {
+&[data-v-24b40e36] {
+  --bg-initial: transparent;
+  --bg-hover: var(--kds-color-background-neutral-hover);
+  --bg-active: var(--kds-color-background-neutral-active);
+  --border: var(--kds-border-action-transparent);
+  --icon-color: var(--kds-color-text-and-icon-neutral);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-0-75x);
+  height: var(--kds-dimension-component-height-0-75x);
+  padding: 0;
+  color: var(--icon-color);
+  cursor: pointer;
+  background-color: var(--bg-initial);
+  border: var(--border);
+  border-radius: var(--kds-border-radius-container-0-12x);
+  opacity: 1;
+}
+&.hidden[data-v-24b40e36]:not(:focus-visible, :hover, .disabled) {
+    opacity: 0;
+}
+&[data-v-24b40e36]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-24b40e36]:hover:not(.disabled) {
+    background-color: var(--bg-hover);
+}
+&[data-v-24b40e36]:active:not(.disabled) {
+    background-color: var(--bg-active);
+}
+&.selected[data-v-24b40e36] {
+    --bg-initial: var(--kds-color-background-selected-initial);
+    --bg-hover: var(--kds-color-background-selected-hover);
+    --bg-active: var(--kds-color-background-selected-active);
+    --border: var(--kds-border-action-selected);
+    --icon-color: var(--kds-color-text-and-icon-selected);
+}
+&.disabled[data-v-24b40e36] {
+    --icon-color: var(--kds-color-text-and-icon-disabled);
+
+    cursor: default;
+}
+&.selected.disabled[data-v-24b40e36] {
+    --border: var(--kds-border-action-disabled);
+}
+}
+
+.leading {
+&[data-v-6648b2f8] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-icon-1x);
+  height: var(--kds-dimension-icon-1x);
+}
+&.xsmall[data-v-6648b2f8] {
+    width: var(--kds-dimension-icon-0-56x);
+    height: var(--kds-dimension-icon-0-56x);
+}
+&.small[data-v-6648b2f8] {
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+}
+&.large[data-v-6648b2f8] {
+    width: var(--kds-dimension-icon-1-25x);
+    height: var(--kds-dimension-icon-1-25x);
+}
+}
+.leading-icon[data-v-6648b2f8],
+.spinner[data-v-6648b2f8] {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+}
+.leading-icon[data-visible="true"][data-v-6648b2f8],
+.spinner[data-visible="true"][data-v-6648b2f8] {
+  opacity: 1;
+}
+
 .label[data-v-174d476a] {
   display: block;
   max-width: 100%;
@@ -671,25 +771,23 @@ to {
   white-space: nowrap;
 }
 
-.subtext {
-&[data-v-8fccdd6d] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-25x);
-  min-height: 1lh;
-  margin-top: var(--kds-spacing-container-0-25x);
-  font: var(--kds-font-base-subtext-small);
-  color: var(--kds-color-text-and-icon-muted);
-}
-&.error[data-v-8fccdd6d] {
-    color: var(--kds-color-text-and-icon-danger);
+.checkbox-group[data-v-4363a8f9] {
+  padding: 0;
+  margin: 0;
+  border: none;
 }
-& .subtext-text[data-v-8fccdd6d] {
-    min-width: 0;
+.options[data-v-4363a8f9] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
 }
+.options.horizontal[data-v-4363a8f9] {
+  flex-flow: row wrap;
+  align-items: flex-start;
 }
 
 .radio {
-&[data-v-f6d4be71] {
+&[data-v-a7490a52] {
   --bg-initial: var(--kds-color-background-input-initial);
   --bg-hover: var(--kds-color-background-input-hover);
   --bg-active: var(--kds-color-background-input-active);
@@ -705,10 +803,11 @@ to {
   margin: 0;
   text-align: left;
   cursor: pointer;
+  outline: none;
   background: none;
   border: none;
 }
-& .control[data-v-f6d4be71] {
+.control[data-v-a7490a52] {
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -720,56 +819,51 @@ to {
     border: var(--border);
     border-radius: 50%;
 }
-& .control .dot[data-v-f6d4be71] {
+.control .dot[data-v-a7490a52] {
     display: block;
     flex-shrink: 0;
     width: 100%;
     height: 100%;
 }
-& .control .dot circle[data-v-f6d4be71] {
+.control .dot circle[data-v-a7490a52] {
     fill: var(--dot-color);
     transform: scale(0.5);
     transform-origin: center;
     transform-box: fill-box;
 }
-&:focus-visible {
-&[data-v-f6d4be71] {
-    outline: none;
-}
-& .control[data-v-f6d4be71] {
-      outline: var(--kds-border-action-focused);
-      outline-offset: var(--kds-spacing-offset-focus);
-}
+&:focus-visible .control[data-v-a7490a52] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-f6d4be71] {
+&:hover:not(.disabled) .control[data-v-a7490a52] {
     background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-f6d4be71] {
+&:active:not(.disabled) .control[data-v-a7490a52] {
     background: var(--bg-active);
 }
-&.selected[data-v-f6d4be71] {
+&.selected[data-v-a7490a52] {
     --border: var(--kds-border-action-selected);
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
 }
-& .content {
-&[data-v-f6d4be71] {
+.content {
+&[data-v-a7490a52] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-25x);
 }
-& .label[data-v-f6d4be71] {
+& .label[data-v-a7490a52] {
       padding-top: var(--kds-spacing-container-0-10x);
       font: var(--kds-font-base-interactive-small);
       color: var(--text-color);
 }
-& .helper-text[data-v-f6d4be71] {
+& .helper-text[data-v-a7490a52] {
       font: var(--kds-font-base-subtext-small);
       color: var(--helper-text-color);
 }
 }
-&.disabled[data-v-f6d4be71] {
+&.disabled[data-v-a7490a52] {
     --bg-initial: var(--kds-color-background-input-initial);
     --border: var(--kds-border-action-disabled);
     --dot-color: var(--kds-color-text-and-icon-disabled);
@@ -779,31 +873,31 @@ to {
     cursor: default;
 }
 &.error {
-&[data-v-f6d4be71] {
+&[data-v-a7490a52] {
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
     --border: var(--kds-border-action-error);
     --dot-color: var(--kds-color-text-and-icon-danger);
     --text-color: var(--kds-color-text-and-icon-danger);
 }
-&.selected[data-v-f6d4be71] {
+&.selected[data-v-a7490a52] {
       --bg-initial: var(--kds-color-background-danger-initial);
       --border: var(--kds-border-action-error);
 }
 }
 }
 
-.radio-button-group[data-v-9ef66ae5] {
+.radio-button-group[data-v-b0e27ba1] {
   padding: 0;
   margin: 0;
   border: none;
 }
-.options[data-v-9ef66ae5] {
+.options[data-v-b0e27ba1] {
   display: flex;
   flex-direction: column;
-  gap: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-75x);
+  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
 }
-.options.horizontal[data-v-9ef66ae5] {
+.options.horizontal[data-v-b0e27ba1] {
   flex-flow: row wrap;
   align-items: flex-start;
 }
@@ -887,7 +981,7 @@ to {
   white-space: nowrap;
 }
 
-.value-switch[data-v-96323ea1] {
+.value-switch[data-v-e5da4485] {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -896,7 +990,7 @@ to {
   border: none;
 }
 .options {
-&[data-v-96323ea1] {
+&[data-v-e5da4485] {
   display: flex;
   flex-flow: row nowrap;
   gap: var(--kds-spacing-container-none);
@@ -913,12 +1007,12 @@ to {
   border-radius: var(--kds-border-radius-container-0-37x);
   box-shadow: var(--kds-fake-border-xs-muted);
   }
-&[data-v-96323ea1]:focus-within:has(:focus-visible) {
+&[data-v-e5da4485]:has(:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
     border-radius: var(--kds-border-radius-container-0-44x);
 }
-&.error[data-v-96323ea1] {
+&.error[data-v-e5da4485] {
     border: var(--kds-border-action-error);
     box-shadow: none;
 }