@knime/kds-components 0.13.0 → 0.13.1

package/dist/accessories/Badge/KdsBadge.vue.d.ts

@@ -0,0 +1,8 @@
+import { KdsBadgeProps, KdsBadgeSize } from './types';
+declare const _default: import('vue').DefineComponent<KdsBadgeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<KdsBadgeProps> & Readonly<{}>, {
+    size: KdsBadgeSize;
+    variant: import('./types').KdsBadgeVariant;
+    icon: import('packages/styles/dist/img/icons/def').IconName;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;
+//# sourceMappingURL=KdsBadge.vue.d.ts.map

package/dist/accessories/Badge/KdsBadge.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KdsBadge.vue.d.ts","sourceRoot":"","sources":["../../../src/accessories/Badge/KdsBadge.vue"],"names":[],"mappings":"AAgGA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;;;;;;AAwF3D,wBAQG"}

package/dist/accessories/Badge/enums.d.ts

@@ -0,0 +1,15 @@
+export declare const kdsBadgeVariant: {
+    readonly NEUTRAL: "neutral";
+    readonly INFO: "info";
+    readonly WARNING: "warning";
+    readonly SUCCESS: "success";
+    readonly ERROR: "error";
+    readonly GHOST: "ghost";
+};
+export declare const kdsBadgeVariants: ("info" | "warning" | "neutral" | "success" | "error" | "ghost")[];
+export declare const kdsBadgeSize: {
+    readonly XXSMALL: "xxsmall";
+    readonly XSMALL: "xsmall";
+};
+export declare const kdsBadgeSizes: ("xsmall" | "xxsmall")[];
+//# sourceMappingURL=enums.d.ts.map

package/dist/accessories/Badge/enums.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.d.ts","sourceRoot":"","sources":["../../../src/accessories/Badge/enums.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAC;AAEX,eAAO,MAAM,gBAAgB,oEAAiC,CAAC;AAE/D,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,eAAO,MAAM,aAAa,0BAA8B,CAAC"}

package/dist/accessories/Badge/index.d.ts

@@ -0,0 +1,4 @@
+export { default as KdsBadge } from './KdsBadge.vue';
+export { kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, } from './enums';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/accessories/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/accessories/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EACL,YAAY,EACZ,aAAa,EACb,eAAe,EACf,gBAAgB,GACjB,MAAM,SAAS,CAAC;AACjB,mBAAmB,SAAS,CAAC"}

package/dist/accessories/Badge/types.d.ts

@@ -0,0 +1,15 @@
+import { KdsIconName } from '../Icon';
+import { kdsBadgeSize, kdsBadgeVariant } from './enums';
+export type KdsBadgeVariant = (typeof kdsBadgeVariant)[keyof typeof kdsBadgeVariant];
+export type KdsBadgeSize = (typeof kdsBadgeSize)[keyof typeof kdsBadgeSize];
+export type KdsBadgeProps = {
+    /** Text content of the badge. */
+    label: string;
+    /** Visual variant of the badge. */
+    variant?: KdsBadgeVariant;
+    /** Size of the badge. Defaults to "xsmall". */
+    size?: KdsBadgeSize;
+    /** Icon shown next to the label. */
+    icon?: KdsIconName;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/accessories/Badge/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/accessories/Badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAExD,MAAM,MAAM,eAAe,GACzB,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEzD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG;IAC1B,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IAEd,mCAAmC;IACnC,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC"}

package/dist/accessories/index.d.ts

@@ -1,5 +1,7 @@
 export * from './Avatar';
 export type * from './Avatar';
+export * from './Badge';
+export type * from './Badge';
 export * from './ColorSwatch';
 export type * from './ColorSwatch';
 export * from './Icon';

package/dist/accessories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accessories/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,mBAAmB,UAAU,CAAC;AAE9B,cAAc,eAAe,CAAC;AAC9B,mBAAmB,eAAe,CAAC;AAEnC,cAAc,QAAQ,CAAC;AACvB,mBAAmB,QAAQ,CAAC;AAE5B,cAAc,cAAc,CAAC;AAC7B,mBAAmB,cAAc,CAAC;AAElC,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accessories/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,mBAAmB,UAAU,CAAC;AAE9B,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC;AAE7B,cAAc,eAAe,CAAC;AAC9B,mBAAmB,eAAe,CAAC;AAEnC,cAAc,QAAQ,CAAC;AACvB,mBAAmB,QAAQ,CAAC;AAE5B,cAAc,cAAc,CAAC;AAC7B,mBAAmB,cAAc,CAAC;AAElC,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,kBAAkB,CAAC"}

package/dist/forms/Checkbox/KdsCheckboxGroup.vue.d.ts

@@ -8,8 +8,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
-    disabled: boolean;
     error: boolean;
+    disabled: boolean;
     alignment: import('./types').KdsCheckboxGroupAlignment;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/forms/RadioButton/KdsRadioButton.vue.d.ts

@@ -8,8 +8,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-    disabled: boolean;
     error: boolean;
+    disabled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 export default _default;
 //# sourceMappingURL=KdsRadioButton.vue.d.ts.map

package/dist/forms/RadioButton/KdsValueSwitch.vue.d.ts

@@ -9,8 +9,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     size: import('./types').KdsValueSwitchSize;
-    disabled: boolean;
     variant: import('./types').KdsValueSwitchVariant;
+    disabled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     availableWidthContainer: HTMLDivElement;
     optionContainer: HTMLDivElement;

package/dist/forms/inputs/BaseInput.vue.d.ts

@@ -147,11 +147,11 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     role: string;
     placeholder: string;
     name: string;
+    error: boolean;
     disabled: boolean;
     leadingIcon: KdsIconName;
     ariaLabel: string;
     trailingIcon: KdsIconName;
-    error: boolean;
     min: number;
     max: number;
     step: number;

package/dist/forms/inputs/BaseInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.vue.d.ts","sourceRoot":"","sources":["../../../src/forms/inputs/BaseInput.vue"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseInput.vue.d.ts","sourceRoot":"","sources":["../../../src/forms/inputs/BaseInput.vue"],"names":[],"mappings":"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"}

package/dist/index.css

@@ -57,29 +57,6 @@
 .kds-avatar-initials > span[data-v-d6a313f1] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
-
-.kds-color-swatch {
-&[data-v-bdb3dd24] {
-  display: inline-block;
-  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);
@@ -212,6 +189,87 @@
 }
 }
 
+.kds-badge {
+&[data-v-5c6c74a8] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  border-radius: var(--kds-border-radius-container-pill);
+}
+& .label-wrapper[data-v-5c6c74a8] {
+    min-width: 0;
+    max-width: var(--kds-dimension-component-width-16x);
+    padding: 0 var(--kds-spacing-container-0-12x);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+&.xxsmall[data-v-5c6c74a8] {
+    height: var(--kds-dimension-component-height-1x);
+    padding: 0 var(--kds-spacing-container-0-25x);
+    font: var(--kds-font-base-title-xsmall);
+}
+&.xsmall[data-v-5c6c74a8] {
+    gap: var(--kds-spacing-container-0-12x);
+    height: var(--kds-dimension-component-height-1-25x);
+    padding: 0 var(--kds-spacing-container-0-37x);
+    font: var(--kds-font-base-title-small);
+}
+&.neutral[data-v-5c6c74a8] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: var(--kds-color-background-neutral-bold-initial);
+    border: var(--kds-border-base-subtle);
+}
+&.info[data-v-5c6c74a8] {
+    color: var(--kds-color-text-and-icon-info);
+    background-color: var(--kds-color-background-static-info);
+    border: var(--kds-border-base-info);
+}
+&.warning[data-v-5c6c74a8] {
+    color: var(--kds-color-text-and-icon-warning);
+    background-color: var(--kds-color-background-static-warning);
+    border: var(--kds-border-base-warning);
+}
+&.success[data-v-5c6c74a8] {
+    color: var(--kds-color-text-and-icon-success);
+    background-color: var(--kds-color-background-static-success);
+    border: var(--kds-border-base-success);
+}
+&.error[data-v-5c6c74a8] {
+    color: var(--kds-color-text-and-icon-danger);
+    background-color: var(--kds-color-background-static-danger);
+    border: var(--kds-border-base-danger);
+}
+&.ghost[data-v-5c6c74a8] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: transparent;
+    border: var(--kds-border-base-subtle);
+}
+}
+
+.kds-color-swatch {
+&[data-v-bdb3dd24] {
+  display: inline-block;
+  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-live-status {
 &[data-v-4dec8e94] {
   --dot-color: var(--kds-color-text-and-icon-disabled);

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, normalizeStyle, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, useTemplateRef, createCommentVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, createVNode, defineAsyncComponent, useId, Fragment, renderList, onBeforeUpdate, nextTick, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, watchEffect, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, createVNode, defineAsyncComponent, useId, Fragment, renderList, onBeforeUpdate, nextTick, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, watchEffect, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -9,14 +9,14 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$q = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_1$r = ["role", "title", "aria-hidden", "aria-label"];
 const _hoisted_2$b = ["src"];
 const _hoisted_3$6 = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -62,7 +62,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         }, null, 40, _hoisted_2$b)) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$q);
+      ], 10, _hoisted_1$r);
     };
   }
 });
@@ -75,67 +75,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-d6a313f1"]]);
-
-const kdsColorSwatchType = {
-  LEARNER: "learner",
-  MANIPULATOR: "manipulator",
-  PREDICTOR: "predictor",
-  SINK: "sink",
-  SOURCE: "source",
-  VISUALIZER: "visualizer",
-  OTHER: "other"
-};
-const kdsColorSwatchTypes = Object.values(kdsColorSwatchType);
-const kdsColorSwatchSize = {
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large"
-};
-const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
-
-const _hoisted_1$p = ["role", "title", "aria-hidden", "aria-label"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
-  __name: "KdsColorSwatch",
-  props: {
-    color: {},
-    size: { default: kdsColorSwatchSize.SMALL },
-    title: { default: void 0 }
-  },
-  setup(__props) {
-    const props = __props;
-    const typeToTokenColor = {
-      learner: "var(--kds-color-nodes-and-variables-learner)",
-      manipulator: "var(--kds-color-nodes-and-variables-manipulator)",
-      predictor: "var(--kds-color-nodes-and-variables-predictor)",
-      sink: "var(--kds-color-nodes-and-variables-sink)",
-      source: "var(--kds-color-nodes-and-variables-source)",
-      visualizer: "var(--kds-color-nodes-and-variables-visualizer)",
-      other: "var(--kds-color-nodes-and-variables-other)"
-    };
-    const isKdsColorSwatchType = (value) => Object.hasOwn(typeToTokenColor, value);
-    const backgroundColor = computed(() => {
-      if (isKdsColorSwatchType(props.color)) {
-        return typeToTokenColor[props.color];
-      }
-      return props.color;
-    });
-    const accessibleTitle = computed(() => props.title?.trim() ?? "");
-    const hasTitle = computed(() => accessibleTitle.value.length > 0);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        role: hasTitle.value ? "img" : "presentation",
-        class: normalizeClass(["kds-color-swatch", props.size]),
-        title: hasTitle.value ? accessibleTitle.value : void 0,
-        style: normalizeStyle({ backgroundColor: backgroundColor.value }),
-        "aria-hidden": hasTitle.value ? void 0 : "true",
-        "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$p);
-    };
-  }
-});
-
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-bdb3dd24"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-d6a313f1"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -171,7 +111,7 @@ const useIcon = ({
   return iconComponent;
 };
 
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -196,7 +136,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-3a57d423"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-3a57d423"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -521,8 +461,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$o = ["title"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = ["title"];
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -562,12 +502,118 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$o);
+      ], 10, _hoisted_1$q);
+    };
+  }
+});
+
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-d7166d18"]]);
+
+const kdsBadgeVariant = {
+  NEUTRAL: "neutral",
+  INFO: "info",
+  WARNING: "warning",
+  SUCCESS: "success",
+  ERROR: "error",
+  GHOST: "ghost"
+};
+const kdsBadgeVariants = Object.values(kdsBadgeVariant);
+const kdsBadgeSize = {
+  XXSMALL: "xxsmall",
+  XSMALL: "xsmall"
+};
+const kdsBadgeSizes = Object.values(kdsBadgeSize);
+
+const _hoisted_1$p = { class: "label-wrapper" };
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
+  __name: "KdsBadge",
+  props: {
+    label: {},
+    variant: { default: kdsBadgeVariant.NEUTRAL },
+    size: { default: kdsBadgeSize.XSMALL },
+    icon: { default: void 0 }
+  },
+  setup(__props) {
+    const sizeToIconSize = {
+      xxsmall: "xsmall",
+      xsmall: "small"
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(["kds-badge", __props.size, __props.variant])
+      }, [
+        __props.icon ? (openBlock(), createBlock(unref(KdsIcon), {
+          key: 0,
+          name: __props.icon,
+          size: sizeToIconSize[__props.size]
+        }, null, 8, ["name", "size"])) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_1$p, toDisplayString(__props.label), 1)
+      ], 2);
+    };
+  }
+});
+
+const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-5c6c74a8"]]);
+
+const kdsColorSwatchType = {
+  LEARNER: "learner",
+  MANIPULATOR: "manipulator",
+  PREDICTOR: "predictor",
+  SINK: "sink",
+  SOURCE: "source",
+  VISUALIZER: "visualizer",
+  OTHER: "other"
+};
+const kdsColorSwatchTypes = Object.values(kdsColorSwatchType);
+const kdsColorSwatchSize = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
+
+const _hoisted_1$o = ["role", "title", "aria-hidden", "aria-label"];
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  __name: "KdsColorSwatch",
+  props: {
+    color: {},
+    size: { default: kdsColorSwatchSize.SMALL },
+    title: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const typeToTokenColor = {
+      learner: "var(--kds-color-nodes-and-variables-learner)",
+      manipulator: "var(--kds-color-nodes-and-variables-manipulator)",
+      predictor: "var(--kds-color-nodes-and-variables-predictor)",
+      sink: "var(--kds-color-nodes-and-variables-sink)",
+      source: "var(--kds-color-nodes-and-variables-source)",
+      visualizer: "var(--kds-color-nodes-and-variables-visualizer)",
+      other: "var(--kds-color-nodes-and-variables-other)"
+    };
+    const isKdsColorSwatchType = (value) => Object.hasOwn(typeToTokenColor, value);
+    const backgroundColor = computed(() => {
+      if (isKdsColorSwatchType(props.color)) {
+        return typeToTokenColor[props.color];
+      }
+      return props.color;
+    });
+    const accessibleTitle = computed(() => props.title?.trim() ?? "");
+    const hasTitle = computed(() => accessibleTitle.value.length > 0);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        role: hasTitle.value ? "img" : "presentation",
+        class: normalizeClass(["kds-color-swatch", props.size]),
+        title: hasTitle.value ? accessibleTitle.value : void 0,
+        style: normalizeStyle({ backgroundColor: backgroundColor.value }),
+        "aria-hidden": hasTitle.value ? void 0 : "true",
+        "aria-label": hasTitle.value ? accessibleTitle.value : void 0
+      }, null, 14, _hoisted_1$o);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-d7166d18"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-bdb3dd24"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -3654,5 +3700,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67e036b5"]]);
 
-export { KdsAvatar, _sfc_main$t as KdsButton, KdsCardClickable, _sfc_main$m as KdsCheckbox, KdsCheckboxGroup, KdsColorSwatch, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$s as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$b as KdsTextInput, KdsTextarea, _sfc_main$r as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, KdsBadge, _sfc_main$t as KdsButton, KdsCardClickable, _sfc_main$m as KdsCheckbox, KdsCheckboxGroup, KdsColorSwatch, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$s as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$b as KdsTextInput, KdsTextarea, _sfc_main$r as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map