@knime/kds-components 0.5.0 → 0.5.2

package/dist/index.css

@@ -52,7 +52,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-67f7d3ae] {
+&[data-v-18cd4b75] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -66,143 +66,143 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-67f7d3ae]:is(a) {
+&[data-v-18cd4b75]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-67f7d3ae] {
+&.disabled[data-v-18cd4b75] {
     cursor: not-allowed;
 }
-&[data-v-67f7d3ae]:focus-visible {
+&[data-v-18cd4b75]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-67f7d3ae] {
+&[data-v-18cd4b75] {
     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-67f7d3ae] {
+&.disabled[data-v-18cd4b75] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled) {
-&[data-v-67f7d3ae]:hover {
+&[data-v-18cd4b75]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-67f7d3ae]:active {
+&[data-v-18cd4b75]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-67f7d3ae] {
+&[data-v-18cd4b75] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-67f7d3ae] {
+&.disabled[data-v-18cd4b75] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled) {
-&[data-v-67f7d3ae]:hover {
+&[data-v-18cd4b75]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-67f7d3ae]:active {
+&[data-v-18cd4b75]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-67f7d3ae] {
+&[data-v-18cd4b75] {
     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-67f7d3ae] {
+&.disabled[data-v-18cd4b75] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled) {
-&[data-v-67f7d3ae]:hover {
+&[data-v-18cd4b75]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-67f7d3ae]:active {
+&[data-v-18cd4b75]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-67f7d3ae] {
+&[data-v-18cd4b75] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-67f7d3ae] {
+&.disabled[data-v-18cd4b75] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled) {
-&[data-v-67f7d3ae]:hover {
+&[data-v-18cd4b75]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-67f7d3ae]:active {
+&[data-v-18cd4b75]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-67f7d3ae] {
+&[data-v-18cd4b75] {
     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-67f7d3ae] {
+&.disabled[data-v-18cd4b75] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled) {
-&[data-v-67f7d3ae]:hover {
+&[data-v-18cd4b75]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-67f7d3ae]:active {
+&[data-v-18cd4b75]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-67f7d3ae] {
+&[data-v-18cd4b75] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-67f7d3ae] {
+&.disabled[data-v-18cd4b75] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled) {
-&[data-v-67f7d3ae]:hover {
+&[data-v-18cd4b75]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-67f7d3ae]:active {
+&[data-v-18cd4b75]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-67f7d3ae] {
+&[data-v-18cd4b75] {
     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-67f7d3ae] {
+&.disabled[data-v-18cd4b75] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled) {
-&[data-v-67f7d3ae]:hover {
+&[data-v-18cd4b75]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-67f7d3ae]:active {
+&[data-v-18cd4b75]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-67f7d3ae] {
+& .label[data-v-18cd4b75] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
@@ -210,7 +210,7 @@ html.kds-legacy {
     white-space: nowrap;
     text-rendering: geometricprecision;
 }
-&.xsmall[data-v-67f7d3ae] {
+&.xsmall[data-v-18cd4b75] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -222,7 +222,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-67f7d3ae] {
+&.small[data-v-18cd4b75] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -234,7 +234,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-67f7d3ae] {
+&.medium[data-v-18cd4b75] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -247,7 +247,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-67f7d3ae] {
+&[data-v-18cd4b75] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -259,7 +259,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-67f7d3ae] {
+& .label[data-v-18cd4b75] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
@@ -447,7 +447,7 @@ html.kds-legacy {
 }
 
 .modal-header {
-&[data-v-2a54ec89] {
+&[data-v-c600bf4b] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -456,12 +456,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-2a54ec89] {
+& .modal-header-title[data-v-c600bf4b] {
     flex: 1 1 auto;
 }
 }
 .modal-body {
-&[data-v-2a54ec89] {
+&[data-v-c600bf4b] {
   --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,19 +470,17 @@ html.kds-legacy {
 
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: var(--v7613d0dd);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&.modal-body-variant-default[data-v-2a54ec89] {
+&[data-variant="padded"][data-v-c600bf4b] {
     gap: var(--modal-gap);
     padding: var(--modal-padding-top) var(--modal-padding-right)
       var(--modal-padding-bottom) var(--modal-padding-left);
-    overflow-y: auto; /* scroll if needed */
-    overscroll-behavior: contain;
 }
 }
-.modal-footer[data-v-2a54ec89] {
+.modal-footer[data-v-c600bf4b] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;
@@ -495,7 +493,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-modal {
-&[data-v-7dc0f65d] {
+&[data-v-a80b4b47] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
@@ -507,7 +505,7 @@ body:has(dialog.modal[open]) {
   height: var(--modal-height);
   max-height: var(--modal-full-size);
   padding: 0;
-  overflow: hidden;
+  overflow: var(--v5f410792);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   background-color: var(--kds-color-surface-default);
@@ -515,64 +513,64 @@ body:has(dialog.modal[open]) {
   border-radius: var(--kds-border-radius-container-0-37x);
   box-shadow: var(--kds-elevation-level-3);
 
-  /* hide if its not open */
-
   /** Animation */
   opacity: 0;
   transform: scale(var(--modal-scale-base));
   transition: var(--modal-animation-time) allow-discrete;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   transition-property: display, opacity, overlay, transform;
+
+  /* hide if its not open */
 }
-&.width-small[data-v-7dc0f65d] {
+&.width-small[data-v-a80b4b47] {
     --modal-width: var(--kds-dimension-component-width-25x);
     --modal-animation-time: 100ms;
     --modal-scale-base: 0.85;
 }
-&.width-medium[data-v-7dc0f65d] {
+&.width-medium[data-v-a80b4b47] {
     --modal-width: var(--kds-dimension-component-width-32x);
     --modal-animation-time: 140ms;
     --modal-scale-base: 0.88;
 }
-&.width-large[data-v-7dc0f65d] {
+&.width-large[data-v-a80b4b47] {
     --modal-width: var(--kds-dimension-component-width-45x);
     --modal-animation-time: 210ms;
     --modal-scale-base: 0.88;
 }
-&.width-xlarge[data-v-7dc0f65d] {
+&.width-xlarge[data-v-a80b4b47] {
     --modal-width: var(--kds-dimension-component-width-61x);
     --modal-animation-time: 300ms;
     --modal-scale-base: 0.88;
 }
-&.width-full[data-v-7dc0f65d] {
+&.width-full[data-v-a80b4b47] {
     --modal-width: var(--modal-full-size);
     --modal-animation-time: 350ms;
     --modal-scale-base: 0.92;
 }
-&.height-full[data-v-7dc0f65d] {
+&.height-full[data-v-a80b4b47] {
     --modal-height: var(--modal-full-size);
 }
-&.height-auto[data-v-7dc0f65d] {
+&.height-auto[data-v-a80b4b47] {
     --modal-height: fit-content;
 }
-&[data-v-7dc0f65d]:not([open]) {
+&[data-v-a80b4b47]:not([open]) {
     display: none;
 }
-&[data-v-7dc0f65d]:focus-visible,
-  &[data-v-7dc0f65d]:focus {
+&[data-v-a80b4b47]:focus-visible,
+  &[data-v-a80b4b47]:focus {
     outline: none;
 }
-&[data-v-7dc0f65d]::backdrop {
+&[data-v-a80b4b47]::backdrop {
     background: var(--kds-color-blanket-default);
     opacity: 0;
     transition: var(--modal-animation-time) allow-discrete;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-property: display, opacity, overlay;
 }
-&[open][data-v-7dc0f65d]::backdrop {
+&[open][data-v-a80b4b47]::backdrop {
     opacity: 1;
 }
-&[open][data-v-7dc0f65d] {
+&[open][data-v-a80b4b47] {
     opacity: 1;
     transform: scale(1);
 }
@@ -581,26 +579,26 @@ body:has(dialog.modal[open]) {
 /** Animation starting styles */
 @starting-style {
 .kds-modal {
-&[data-v-7dc0f65d] {
+&[data-v-a80b4b47] {
     opacity: 1;
     transform: scale(1);
 }
-&[open][data-v-7dc0f65d] {
+&[open][data-v-a80b4b47] {
       opacity: 0;
       transform: scale(var(--modal-scale-base));
 }
-&[data-v-7dc0f65d]::backdrop {
+&[data-v-a80b4b47]::backdrop {
       opacity: 1;
 }
-&[open][data-v-7dc0f65d]::backdrop {
+&[open][data-v-a80b4b47]::backdrop {
       opacity: 0;
 }
 }
 }
 
-.ask-again[data-v-c868f587] {
+.ask-again[data-v-bd3a851b] {
   padding: var(--kds-spacing-container-0-5x) 0 0 0;
 }
-.flush-left[data-v-c868f587] {
+.flush-left[data-v-bd3a851b] {
   margin-right: auto;
 }