@knime/kds-components 0.10.0 → 0.11.0

package/dist/index.css

@@ -1,15 +1,32 @@
 
-.kds-avatar[data-v-4a34a186] {
+.kds-avatar {
+&[data-v-d6a313f1] {
   position: relative;
   display: inline-block;
-  inline-size: var(--kds-dimension-component-width-1-5x);
-  block-size: var(--kds-dimension-component-width-1-5x);
+  flex-shrink: 0;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   vertical-align: middle;
   border-radius: var(--kds-border-radius-container-pill);
 }
-.kds-avatar[data-v-4a34a186]::after {
+&.small[data-v-d6a313f1] {
+    inline-size: var(--kds-dimension-icon-0-75x);
+    block-size: var(--kds-dimension-icon-0-75x);
+}
+&.medium[data-v-d6a313f1] {
+    inline-size: var(--kds-dimension-icon-1x);
+    block-size: var(--kds-dimension-icon-1x);
+}
+&.large[data-v-d6a313f1] {
+    inline-size: var(--kds-dimension-component-width-1-25x);
+    block-size: var(--kds-dimension-component-height-1-25x);
+}
+&.xlarge[data-v-d6a313f1] {
+    inline-size: var(--kds-dimension-component-width-1-5x);
+    block-size: var(--kds-dimension-component-height-1-5x);
+}
+}
+.kds-avatar[data-v-d6a313f1]::after {
   position: absolute;
   inset: 0;
   box-sizing: border-box;
@@ -18,14 +35,14 @@
   border: var(--kds-border-base-muted);
   border-radius: inherit;
 }
-.kds-avatar-image[data-v-4a34a186] {
+.kds-avatar-image[data-v-d6a313f1] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.kds-avatar-initials[data-v-4a34a186] {
+.kds-avatar-initials[data-v-d6a313f1] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -37,19 +54,32 @@
   user-select: none;
   background: var(--kds-color-background-primary-bold-initial);
 }
-.kds-avatar-initials > span[data-v-4a34a186] {
+.kds-avatar-initials > span[data-v-d6a313f1] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
 
-.kds-color-swatch[data-v-c8fc7e8e] {
+.kds-color-swatch {
+&[data-v-bdb3dd24] {
   display: inline-block;
-  width: var(--kds-dimension-icon-0-75x);
-  height: var(--kds-dimension-icon-0-75x);
+  flex-shrink: 0;
   overflow: hidden;
   line-height: 0;
   border: var(--kds-border-base-muted);
   border-radius: var(--kds-border-radius-container-0-25x);
 }
+&.small[data-v-bdb3dd24] {
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+}
+&.medium[data-v-bdb3dd24] {
+    width: var(--kds-dimension-icon-1x);
+    height: var(--kds-dimension-icon-1x);
+}
+&.large[data-v-bdb3dd24] {
+    width: var(--kds-dimension-component-width-1-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+}
+}
 .kds-icon {
 &[data-v-3a57d423] {
   --icon-width: var(--kds-dimension-icon-1x);
@@ -1343,8 +1373,153 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
 }
 }
 
+.kds-empty-state[data-v-b4af30cf] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  max-width: 280px;
+  padding: var(--kds-spacing-container-0-5x);
+}
+.kds-empty-state-headline[data-v-b4af30cf] {
+  margin: 0;
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
+}
+.kds-empty-state-description[data-v-b4af30cf] {
+  margin: 0;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
+}
+.kds-empty-state-action[data-v-b4af30cf] {
+  margin-top: var(--kds-spacing-container-0-12x);
+}
+
+.kds-card {
+&[data-v-4607badd] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+  outline: none;
+  border-style: solid;
+  border-radius: var(--kds-border-radius-container-0-50x);
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+&[data-v-4607badd]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+    border-radius: var(--kds-border-radius-container-0-56x);
+}
+&[data-v-4607badd]:disabled {
+    cursor: default;
+}
+}
+
+/* Variant: Filled, Value: False */
+.variant-filled {
+&[data-v-4607badd] {
+  background: var(--kds-color-surface-default);
+  border: var(--kds-border-base-subtle);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: False */
+.variant-outlined {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-base-muted);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: False */
+.variant-transparent {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    background: var(--kds-color-background-neutral-hover);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Filled, Value: True */
+.variant-filled.selected {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: True */
+.variant-outlined.selected {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: True */
+.variant-transparent.selected {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    background: var(--kds-color-background-selected-initial);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
 .modal-header {
-&[data-v-7dbd159b] {
+&[data-v-ff11e839] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -1353,12 +1528,12 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
   font: var(--kds-font-base-title-medium-strong);
   color: var(--kds-color-text-and-icon-neutral);
 }
-& .modal-header-title[data-v-7dbd159b] {
+& .modal-header-title[data-v-ff11e839] {
     flex: 1 1 auto;
 }
 }
 .modal-body {
-&[data-v-7dbd159b] {
+&[data-v-ff11e839] {
   --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);
@@ -1366,18 +1541,19 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
   --modal-gap: var(--kds-spacing-container-1x);
 
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
-  overflow: var(--v3305d0f4);
+  overflow: var(--v670bbff1);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-variant="padded"][data-v-7dbd159b] {
+&[data-variant="padded"][data-v-ff11e839] {
     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-7dbd159b] {
+.modal-footer[data-v-ff11e839] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;
@@ -1499,143 +1675,3 @@ body:has(dialog.modal[open]) {
 .flush-left[data-v-67e036b5] {
   margin-right: auto;
 }
-
-.kds-card {
-&[data-v-c64f0e2e] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  outline: none;
-  border-style: solid;
-  border-radius: var(--kds-border-radius-container-0-50x);
-  transition:
-    background-color 0.2s,
-    border-color 0.2s,
-    box-shadow 0.2s;
-}
-&[data-v-c64f0e2e]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-    border-radius: var(--kds-border-radius-container-0-56x);
-}
-&.disabled[data-v-c64f0e2e] {
-    cursor: default;
-}
-}
-
-/* Variant: Filled, Value: False */
-.variant-filled {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-surface-default);
-  border: var(--kds-border-base-subtle);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-neutral-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Outlined, Value: False */
-.variant-outlined {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-neutral-initial);
-  border: var(--kds-border-base-muted);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-neutral-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Transparent, Value: False */
-.variant-transparent {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-neutral-initial);
-  border: var(--kds-border-action-transparent);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    background: var(--kds-color-background-neutral-hover);
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-neutral-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Filled, Value: True */
-.variant-filled.selected {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-selected-initial);
-  border: var(--kds-border-action-selected);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-selected-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Outlined, Value: True */
-.variant-outlined.selected {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-selected-initial);
-  border: var(--kds-border-action-selected);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-selected-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Transparent, Value: True */
-.variant-transparent.selected {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-selected-initial);
-  border: var(--kds-border-action-selected);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    background: var(--kds-color-background-selected-initial);
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-selected-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-.kds-empty-state[data-v-059bb01e] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  max-width: 280px;
-  padding: var(--kds-spacing-container-0-5x);
-}
-.kds-empty-state-headline[data-v-059bb01e] {
-  margin: 0;
-  font: var(--kds-font-base-title-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
-}
-.kds-empty-state-description[data-v-059bb01e] {
-  margin: 0;
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
-}
-.kds-empty-state-action[data-v-059bb01e] {
-  margin-top: var(--kds-spacing-container-0-12x);
-}

package/dist/index.d.ts

@@ -4,10 +4,10 @@ export * from './buttons';
 export type * from './buttons';
 export * from './forms';
 export type * from './forms';
+export * from './layouts';
+export type * from './layouts';
 export * from './overlays';
 export type * from './overlays';
-export * from './structures';
-export type * from './structures';
 export * from './util';
 export type * from './util';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,mBAAmB,eAAe,CAAC;AAGnC,cAAc,WAAW,CAAC;AAC1B,mBAAmB,WAAW,CAAC;AAG/B,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC;AAG7B,cAAc,YAAY,CAAC;AAC3B,mBAAmB,YAAY,CAAC;AAGhC,cAAc,cAAc,CAAC;AAC7B,mBAAmB,cAAc,CAAC;AAGlC,cAAc,QAAQ,CAAC;AACvB,mBAAmB,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,mBAAmB,eAAe,CAAC;AAGnC,cAAc,WAAW,CAAC;AAC1B,mBAAmB,WAAW,CAAC;AAG/B,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC;AAG7B,cAAc,WAAW,CAAC;AAC1B,mBAAmB,WAAW,CAAC;AAG/B,cAAc,YAAY,CAAC;AAC3B,mBAAmB,YAAY,CAAC;AAGhC,cAAc,QAAQ,CAAC;AACvB,mBAAmB,QAAQ,CAAC"}