@knime/kds-components 0.29.1 → 0.29.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @knime/kds-components
 
+## 0.29.3
+
+### Patch Changes
+
+- 252e71b: Add `KdsProgressBar`
+  - @knime/kds-styles@0.29.3
+
+## 0.29.2
+
+### Patch Changes
+
+- 68a53dd: `KdsDescription`: Adjust token assignment to headlines to fit also font hierarchy (KDS-559)
+- Updated dependencies [61d2f6b]
+  - @knime/kds-styles@0.29.2
+
 ## 0.29.1
 
 ### Patch Changes

package/dist/import-table-BaqmTPnF.js

@@ -0,0 +1,23 @@
+import { openBlock, createElementBlock, createElementVNode } from 'vue';
+
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 12 12"
+};
+
+function render(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1, [...(_cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M6 10.015H2.447a.95.95 0 0 1-.947-.946V2.446a.945.945 0 0 1 .947-.946H9.08a.95.95 0 0 1 .947.946v3.548M1.5 4.811h8.526M4.816 1.5v8.515m4.263-2.773V10.8M7.658 9.38l1.421 1.42L10.5 9.38",
+      "vector-effect": "non-scaling-stroke"
+    }, null, -1)
+  ]))]))
+}
+const importTable = { render: render };
+
+export { importTable as default, render };
+//# sourceMappingURL=import-table-BaqmTPnF.js.map

package/dist/import-table-BaqmTPnF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"import-table-BaqmTPnF.js","sources":["../../styles/dist/img/icons/import-table.svg"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\",\n  viewBox: \"0 0 12 12\"\n}\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [...(_cache[0] || (_cache[0] = [\n    _createElementVNode(\"path\", {\n      d: \"M6 10.015H2.447a.95.95 0 0 1-.947-.946V2.446a.945.945 0 0 1 .947-.946H9.08a.95.95 0 0 1 .947.946v3.548M1.5 4.811h8.526M4.816 1.5v8.515m4.263-2.773V10.8M7.658 9.38l1.421 1.42L10.5 9.38\",\n      \"vector-effect\": \"non-scaling-stroke\"\n    }, null, -1)\n  ]))]))\n}\nexport default { render: render }"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;AAEA,MAAM,UAAU,GAAG;AACnB,EAAE,KAAK,EAAE,4BAA4B;AACrC,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,MAAM,EAAE,cAAc;AACxB,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,iBAAiB,EAAE,OAAO;AAC5B,EAAE,OAAO,EAAE;AACX;;AAEO,SAAS,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE;AACrC,EAAE,QAAQA,SAAU,EAAE,EAAEC,kBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG;AAC9F,IAAIC,kBAAmB,CAAC,MAAM,EAAE;AAChC,MAAM,CAAC,EAAE,yLAAyL;AAClM,MAAM,eAAe,EAAE;AACvB,KAAK,EAAE,IAAI,EAAE,EAAE;AACf,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;AACA,oBAAe,EAAE,MAAM,EAAE,MAAM;;;;"}

package/dist/index.css

@@ -311,6 +311,84 @@
 }
 }
 
+.kds-progress-bar {
+&[data-v-5fdfbce2] {
+  --progress-bar-background-color: var(--kds-color-surface-subtle);
+  --progress-bar-foreground-color: var(
+    --kds-color-background-primary-bold-initial
+  );
+  --progress-bar-radius: var(--kds-border-radius-container-pill);
+  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+
+  position: relative;
+  width: 100%;
+  height: var(--progress-bar-height);
+  overflow: hidden;
+  border-radius: var(--progress-bar-radius);
+
+  /* Firefox uses this to target the bar that represents the value of the progress element */
+
+  /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
+}
+& .progress[data-v-5fdfbce2] {
+    display: block;
+    width: 100%;
+    height: var(--progress-bar-height);
+    padding: 0;
+    overflow: hidden;
+    appearance: none;
+
+    /* Firefox sets the background of the bar from here  */
+    background-color: var(--progress-bar-background-color);
+    border: none;
+    border-radius: var(--progress-bar-radius);
+}
+& .progress[data-v-5fdfbce2]::-webkit-progress-bar {
+    background-color: var(--progress-bar-background-color);
+}
+& .progress[data-v-5fdfbce2]::-webkit-progress-value {
+    background-color: var(--progress-bar-foreground-color);
+    border-radius: var(--progress-bar-radius);
+    transition: width 0.5s;
+}
+& .progress[data-v-5fdfbce2]::-moz-progress-bar {
+    background-color: var(--progress-bar-foreground-color);
+}
+& .progress[data-v-5fdfbce2]:indeterminate {
+    background-color: var(--progress-bar-background-color);
+    background-image: none;
+}
+& .progress[data-v-5fdfbce2]:indeterminate::-webkit-progress-bar {
+    background-color: transparent;
+}
+& .progress[data-v-5fdfbce2]:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+}
+& .indeterminate-bar[data-v-5fdfbce2] {
+    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;
+}
+}
+.kds-progress-bar-medium[data-v-5fdfbce2] {
+  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+}
+.kds-progress-bar-large[data-v-5fdfbce2] {
+  --progress-bar-height: var(--kds-dimension-component-height-0-75x);
+}
+@keyframes move-indeterminate-5fdfbce2 {
+0% {
+    transform: translateX(-120%);
+}
+100% {
+    transform: translateX(320%);
+}
+}
+
 .kds-color-swatch {
 &[data-v-91e0130d] {
   display: inline-block;
@@ -4285,17 +4363,17 @@ body:has(dialog.modal[open]) {
 }
 
 .description {
-&[data-v-43067f23] {
+&[data-v-ed6ba7bb] {
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   overflow-wrap: anywhere;
 
   /* stylelint-disable knime/no-deep-nesting */
 }
-&.plain[data-v-43067f23] {
+&.plain[data-v-ed6ba7bb] {
     white-space: pre-line;
 }
-&[data-v-43067f23]  {
+&[data-v-ed6ba7bb]  {
 p {
 & {
       padding: 0;
@@ -4316,11 +4394,11 @@ i,
 }
 h3 {
       margin: 0;
-      font: var(--kds-font-base-body-large-strong);
+      font: var(--kds-font-base-body-medium-strong);
 }
 h4 {
       margin: 0;
-      font: var(--kds-font-base-body-medium-strong);
+      font: var(--kds-font-base-body-small-strong);
 }
 pre {
 & {
@@ -4399,7 +4477,7 @@ a {
           margin-left: var(--kds-spacing-container-0-12x);
           content: "";
           background-color: var(--link-color);
-          mask-image: var(--v0c7d182f);
+          mask-image: var(--v4209a14a);
           mask-repeat: no-repeat;
           mask-size: contain;
 }