@comfyorg/design-system 1.2.0 → 1.3.0-alpha.0

package/README.md

@@ -21,6 +21,9 @@ Import the full theme from your app's entry stylesheet:
 @import '@comfyorg/design-system/css/style.css';
 ```
 
+Use this package import rather than a filesystem path into the package. Its
+published export registers the compiled component sources for Tailwind.
+
 This pulls in the fonts, the color palette, the Tailwind theme and utilities
 layers, `tw-animate-css`, the PrimeUI plugin, and the Comfy and Lucide icon
 plugins.
@@ -31,12 +34,32 @@ For the palette and fonts without the Tailwind layers or icon plugins:
 @import '@comfyorg/design-system/css/base.css';
 ```
 
+## Void theme
+
+Void is the near-black look used by Comfy Desktop. An app with its own Tailwind
+build and global styles imports it instead of `style.css`, which carries
+ComfyUI's colors and app-wide rules:
+
+```css
+@import 'tailwindcss';
+@import '@comfyorg/design-system/css/themes/void.css';
+```
+
+The theme gives the components their colors, registers the compiled component
+sources for Tailwind, and adds Void's type, radius, shadow and motion tokens.
+ComfyUI does not import it, so changing Void cannot change ComfyUI. It does not
+declare fonts: the host provides `Inter` and `PP Formula`. Published consumers
+still import `components.css`, as described under [Vue components](#vue-components).
+
 ## Exports
 
 | Path                            | Contents                                                                         |
 | ------------------------------- | -------------------------------------------------------------------------------- |
 | `./css/style.css`               | Full theme — palette, fonts, Tailwind layers, icon plugins                       |
+| `./css/theme.css`               | Full theme without automatic component source registration                       |
 | `./css/base.css`                | Palette and fonts only                                                           |
+| `./css/component-support.css`   | Palette, icon plugins, animations, layers and utilities the components need      |
+| `./css/themes/void.css`         | Void theme for apps other than ComfyUI, including component support              |
 | `./css/_palette.css`            | Color variables                                                                  |
 | `./css/fonts.css`               | Font faces                                                                       |
 | `./css/_deprecated-aliases.css` | Deprecated variable names kept for extensions; scheduled for removal             |
@@ -58,15 +81,16 @@ utilities. Size them with `size-*`, not font-size classes.
 Install the component peers alongside the package:
 
 ```sh
-pnpm add vue reka-ui vue-component-type-helpers
+pnpm add vue reka-ui vue-component-type-helpers @vueuse/core @vueuse/integrations
 ```
 
 Published components are compiled ES modules with declarations for TypeScript's
 `Bundler` module resolution; workspace imports use their Vue source. Reka is a
 peer so host providers and packaged components share its injection contexts.
 Its declarations require `vue-component-type-helpers`, which Reka currently
-omits from its published dependencies. These peers are optional for CSS-only
-consumers.
+omits from its published dependencies. VueUse provides the component composables
+and search integration. These peers are optional for CSS-only consumers and are
+not automatically installed. Install them explicitly when using Vue components.
 
 With strict dependency checking, VueUse also requires the `web-bluetooth`
 ambient types. Install `@types/web-bluetooth` and include `web-bluetooth` if your

package/dist/accordion/PropertiesAccordionItem.vue.d.ts

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    label?: string;
+    enableEmptyState?: boolean;
+    tooltip?: string;
+    size?: 'default' | 'lg';
+    variant?: 'default' | 'card';
+    class?: string;
+};
+type __VLS_ModelProps = {
+    'collapse'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_13: {}, __VLS_27: {}, __VLS_29: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_27) => any;
+} & {
+    empty?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:collapse": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:collapse"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/accordion/PropertiesAccordionItem.vue.js

@@ -0,0 +1,62 @@
+import { t as Tooltip_default } from "../shared/Tooltip-4rCebVao.js";
+import { t as TooltipContent_default } from "../shared/TooltipContent-0GR7hBNu.js";
+import { t as TooltipTrigger_default } from "../shared/TooltipTrigger-64EIE5f2.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as TransitionCollapse_default } from "../shared/TransitionCollapse-VfBzyj5a.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
+// src/components/accordion/PropertiesAccordionItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "sticky top-0 z-10 flex items-center justify-between bg-inherit backdrop-blur-xl" };
+var _hoisted_2 = ["tabindex"];
+var _hoisted_3 = ["disabled"];
+var _hoisted_4 = {
+	key: 0,
+	class: "pb-4"
+};
+// src/components/accordion/PropertiesAccordionItem.vue
+var PropertiesAccordionItem_default = /* @__PURE__ */ defineComponent({
+	__name: "PropertiesAccordionItem",
+	props: /*@__PURE__*/ mergeModels({
+		disabled: { type: Boolean },
+		label: {},
+		enableEmptyState: { type: Boolean },
+		tooltip: {},
+		size: { default: "default" },
+		variant: { default: "default" },
+		class: {}
+	}, {
+		"collapse": {
+			type: Boolean,
+			default: false
+		},
+		"collapseModifiers": {}
+	}),
+	emits: ["update:collapse"],
+	setup(__props) {
+		const isCollapse = useModel(__props, "collapse");
+		const isExpanded = computed(() => !isCollapse.value && !__props.disabled);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("flex flex-col bg-background", __props.variant === "card" && "border-t bg-card", __props.class)) }, [createElementVNode("div", _hoisted_1, [createVNode(unref(Tooltip_default), { disabled: !__props.tooltip }, {
+				default: withCtx(() => [createVNode(unref(TooltipTrigger_default), { "as-child": "" }, {
+					default: withCtx(() => [createElementVNode("div", {
+						class: "w-full",
+						tabindex: __props.disabled && __props.tooltip ? 0 : void 0
+					}, [createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(unref(cn)("group flex w-full items-center justify-between border-0 bg-transparent pr-3 pl-4 text-left ring-0 outline-0 disabled:text-muted-foreground", __props.size === "lg" ? "min-h-16" : "min-h-12", !__props.disabled && "cursor-pointer")),
+						disabled: __props.disabled,
+						onClick: _cache[0] || (_cache[0] = ($event) => isCollapse.value = !isCollapse.value)
+					}, [createElementVNode("span", { class: normalizeClass(unref(cn)("line-clamp-2 flex-1 font-semibold", __props.variant === "card" ? "text-xs uppercase select-none" : "text-sm")) }, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 2), createElementVNode("i", { class: normalizeClass(unref(cn)("icon-[lucide--chevron-up] text-muted-foreground transition-all group-hover:text-foreground group-focus:text-foreground group-has-[.subbutton:hover]:text-muted-foreground", isCollapse.value && "-rotate-180", __props.disabled && "opacity-0")) }, null, 2)], 10, _hoisted_3)], 8, _hoisted_2)]),
+					_: 3
+				}), createVNode(unref(TooltipContent_default), null, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.tooltip), 1)]),
+					_: 1
+				})]),
+				_: 3
+			}, 8, ["disabled"])]), createVNode(unref(TransitionCollapse_default), null, {
+				default: withCtx(() => [isExpanded.value ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])) : __props.enableEmptyState && __props.disabled ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 1) : createCommentVNode("", true)]),
+				_: 3
+			})], 2);
+		};
+	}
+});
+export { PropertiesAccordionItem_default as default };

package/dist/badge/Badge.vue.js

@@ -1,2 +1 @@
-import { t as Badge_default } from "../shared/Badge-D3uWa3yk.js";
-export { Badge_default as default };
+export { t as default } from "../shared/Badge-DFHO3AFi.js";

package/dist/badge/CreditBadge.vue.d.ts

@@ -1,6 +1,5 @@
 type __VLS_Props = {
     text: string;
-    rest?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/badge/CreditBadge.vue.js

@@ -1,35 +1,21 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
-import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
-//#region src/components/badge/CreditBadge.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["textContent"];
-var _hoisted_2 = {
-	key: 0,
-	"data-testid": "credit-badge-rest",
-	class: "-ml-1 flex h-5 max-w-max min-w-0 grow basis-0 items-center truncate rounded-r-full bg-input text-xs"
+import { createElementBlock, createElementVNode, defineComponent, openBlock, toDisplayString } from "vue";
+// src/components/badge/CreditBadge.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"data-testid": "credit-badge",
+	class: "flex h-5 shrink-0 items-center gap-1 rounded-md bg-input px-2 py-0.5 text-xs"
 };
-var _hoisted_3 = ["textContent"];
-//#endregion
-//#region src/components/badge/CreditBadge.vue
+var _hoisted_2 = ["textContent"];
+// src/components/badge/CreditBadge.vue
 var CreditBadge_default = /* @__PURE__ */ defineComponent({
 	__name: "CreditBadge",
-	props: {
-		text: {},
-		rest: {}
-	},
+	props: { text: {} },
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
-				"data-testid": "credit-badge-required",
-				class: normalizeClass(unref(cn)("flex h-5 shrink-0 items-center bg-input p-1 text-xs", __props.rest ? "rounded-l-full pr-1" : "rounded-full"))
-			}, [_cache[0] || (_cache[0] = createElementVNode("i", { class: "icon-[lucide--coins] aspect-square h-full w-auto bg-credit" }, null, -1)), createElementVNode("span", {
+			return openBlock(), createElementBlock("span", _hoisted_1, [_cache[0] || (_cache[0] = createElementVNode("i", { class: "icon-[lucide--coins] aspect-square size-3.5 bg-credit" }, null, -1)), createElementVNode("span", {
 				class: "truncate",
 				textContent: toDisplayString(__props.text)
-			}, null, 8, _hoisted_1)], 2), __props.rest ? (openBlock(), createElementBlock("span", _hoisted_2, [createElementVNode("span", {
-				class: "pr-2",
-				textContent: toDisplayString(__props.rest)
-			}, null, 8, _hoisted_3)])) : createCommentVNode("", true)], 64);
+			}, null, 8, _hoisted_2)]);
 		};
 	}
 });
-//#endregion
 export { CreditBadge_default as default };

package/dist/badge/badge.variants.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'cva';
 export declare const badgeVariants: (props?: ({
     variant?: "label" | "circle" | "tag" | "chip" | "badge" | "compact" | "outline" | "square" | "pill" | "dot" | undefined;
-    severity?: "contrast" | "warning" | "info" | "success" | "secondary" | "default" | "primary" | "muted" | "danger" | undefined;
+    severity?: "warning" | "info" | "success" | "secondary" | "default" | "contrast" | "primary" | "muted" | "danger" | undefined;
 } & ({
     class?: import('cva').ClassValue;
     className?: never;

package/dist/button/Button.vue.js

@@ -1,2 +1 @@
-import { t as Button_default } from "../shared/Button-CilmsOkY.js";
-export { Button_default as default };
+export { t as default } from "../shared/Button-Dj_H5v3V.js";

package/dist/button-group/ButtonGroup.vue.js

@@ -1,8 +1,7 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
 import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
-//#endregion
-//#region src/components/button-group/ButtonGroup.vue
+// src/components/button-group/ButtonGroup.vue
 var ButtonGroup_default = /* @__PURE__ */ defineComponent({
 	__name: "ButtonGroup",
 	props: {
@@ -33,5 +32,4 @@ var ButtonGroup_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { ButtonGroup_default as default };

package/dist/button-group/IconGroup.vue.js

@@ -1,7 +1,6 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
 import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
-//#endregion
-//#region src/components/button-group/IconGroup.vue
+// src/components/button-group/IconGroup.vue
 var IconGroup_default = /* @__PURE__ */ defineComponent({
 	__name: "IconGroup",
 	props: { backgroundClass: {} },
@@ -11,5 +10,4 @@ var IconGroup_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { IconGroup_default as default };

package/dist/card/Card.vue.js

@@ -1,2 +1 @@
-import { t as Card_default } from "../shared/Card-l7baUdn0.js";
-export { Card_default as default };
+export { t as default } from "../shared/Card-BrvqUM49.js";

package/dist/card/CardFooter.vue.js

@@ -1,2 +1 @@
-import { t as CardFooter_default } from "../shared/CardFooter-BM6EmVi7.js";
-export { CardFooter_default as default };
+export { t as default } from "../shared/CardFooter-BV_I0pM-.js";

package/dist/card/CardHeader.vue.js

@@ -1,2 +1 @@
-import { t as CardHeader_default } from "../shared/CardHeader-B5To28Jp.js";
-export { CardHeader_default as default };
+export { t as default } from "../shared/CardHeader-CMutruBx.js";

package/dist/card/CoachmarkCard.vue.js

@@ -1,5 +1,5 @@
 import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, toDisplayString } from "vue";
-//#region src/components/card/CoachmarkCard.vue?vue&type=script&setup=true&lang.ts
+// src/components/card/CoachmarkCard.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex w-full flex-col items-start justify-center gap-3 rounded-2xl bg-secondary p-4 drop-shadow-md" };
 var _hoisted_2 = {
 	key: 0,
@@ -15,8 +15,7 @@ var _hoisted_9 = {
 	key: 0,
 	class: "flex w-full items-center gap-3"
 };
-//#endregion
-//#region src/components/card/CoachmarkCard.vue
+// src/components/card/CoachmarkCard.vue
 var CoachmarkCard_default = /* @__PURE__ */ defineComponent({
 	__name: "CoachmarkCard",
 	props: {
@@ -53,5 +52,4 @@ var CoachmarkCard_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { CoachmarkCard_default as default };

package/dist/chart/Chart.vue.js

@@ -1,7 +1,7 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
 import { createElementBlock, createElementVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, toRaw, toRef, unref, useTemplateRef, watch } from "vue";
 import { BarController, BarElement, CategoryScale, Chart, Colors, Filler, Legend, LineController, LineElement, LinearScale, PointElement, Tooltip } from "chart.js";
-//#region src/components/chart/useChart.ts
+// src/components/chart/useChart.ts
 Chart.register(BarController, BarElement, CategoryScale, Colors, Filler, Legend, LinearScale, LineController, LineElement, PointElement, Tooltip);
 function getCssVar(name) {
 	return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
@@ -143,12 +143,10 @@ function useChart(canvasRef, type, data) {
 		chart = void 0;
 	});
 }
-//#endregion
-//#region src/components/chart/Chart.vue?vue&type=script&setup=true&lang.ts
+// src/components/chart/Chart.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "relative" };
 var _hoisted_2 = ["aria-label"];
-//#endregion
-//#region src/components/chart/Chart.vue
+// src/components/chart/Chart.vue
 var Chart_default = /* @__PURE__ */ defineComponent({
 	__name: "Chart",
 	props: {
@@ -176,5 +174,4 @@ var Chart_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { Chart_default as default };

package/dist/chart/__tests__/chartTestUtils.d.ts

@@ -0,0 +1,3 @@
+import { Chart } from 'chart.js';
+export declare function getChartByName(name: string): Chart | undefined;
+export declare function stubCanvasGetContext(): void;

package/dist/checkbox/Checkbox.vue.js

@@ -1,9 +1,8 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
 import { createBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
-//#endregion
-//#region src/components/checkbox/Checkbox.vue
+// src/components/checkbox/Checkbox.vue
 var Checkbox_default = /* @__PURE__ */ defineComponent({
 	__name: "Checkbox",
 	props: {
@@ -45,5 +44,4 @@ var Checkbox_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { Checkbox_default as default };

package/dist/chip/Tag.vue.d.ts

@@ -0,0 +1,61 @@
+import { HTMLAttributes } from 'vue';
+import { TagVariants } from '@comfyorg/design-system/tag.variants';
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<({
+    label: string;
+    shape?: TagVariants["shape"];
+    state?: TagVariants["state"];
+    removeTooltip?: string;
+    interactive?: boolean;
+    class?: HTMLAttributes["class"];
+} & {
+    removable: true;
+    removeLabel: string;
+}) | ({
+    label: string;
+    shape?: TagVariants["shape"];
+    state?: TagVariants["state"];
+    removeTooltip?: string;
+    interactive?: boolean;
+    class?: HTMLAttributes["class"];
+} & {
+    removable?: false;
+    removeLabel?: string;
+}), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    remove: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<({
+    label: string;
+    shape?: TagVariants["shape"];
+    state?: TagVariants["state"];
+    removeTooltip?: string;
+    interactive?: boolean;
+    class?: HTMLAttributes["class"];
+} & {
+    removable: true;
+    removeLabel: string;
+}) | ({
+    label: string;
+    shape?: TagVariants["shape"];
+    state?: TagVariants["state"];
+    removeTooltip?: string;
+    interactive?: boolean;
+    class?: HTMLAttributes["class"];
+} & {
+    removable?: false;
+    removeLabel?: string;
+})> & Readonly<{
+    onRemove?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/chip/Tag.vue.js

@@ -0,0 +1,71 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as TagRemoveButton_default } from "../shared/TagRemoveButton-D919R-To.js";
+import { n as tagVariants } from "../shared/tag.variants-BEXRRbPc.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withModifiers } from "vue";
+// src/components/chip/Tag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "tabindex"];
+var _hoisted_2 = { class: "min-w-0 truncate" };
+// src/components/chip/Tag.vue
+var Tag_default = /* @__PURE__ */ defineComponent({
+	__name: "Tag",
+	props: {
+		label: {},
+		shape: { default: "square" },
+		state: { default: "default" },
+		removeTooltip: {},
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		removable: { type: Boolean },
+		removeLabel: {}
+	},
+	emits: ["remove"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		function handleKeydown(event) {
+			if (event.target !== event.currentTarget) return;
+			if (!__props.interactive) return;
+			if (event.key === "Enter" || event.key === " ") event.preventDefault();
+			if (event.key === "Enter" && event.currentTarget instanceof HTMLElement) event.currentTarget.click();
+		}
+		function handleKeyup(event) {
+			if (event.target !== event.currentTarget) return;
+			if (!__props.interactive || event.key !== " ") return;
+			event.preventDefault();
+			if (event.currentTarget instanceof HTMLElement) event.currentTarget.click();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				role: __props.interactive ? "button" : void 0,
+				tabindex: __props.interactive ? 0 : void 0,
+				class: normalizeClass(unref(cn)(unref(tagVariants)({
+					shape: __props.shape,
+					state: __props.state,
+					removable: __props.removable,
+					interactive: __props.interactive
+				}), __props.class)),
+				onKeydown: handleKeydown,
+				onKeyup: handleKeyup
+			}, [
+				renderSlot(_ctx.$slots, "icon"),
+				createElementVNode("span", _hoisted_2, toDisplayString(__props.label), 1),
+				renderSlot(_ctx.$slots, "default"),
+				__props.removable ? (openBlock(), createBlock(unref(TagRemoveButton_default), {
+					key: 0,
+					"aria-label": __props.removeLabel,
+					tooltip: __props.removeTooltip,
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("remove", $event), ["stop"]))
+				}, null, 8, ["aria-label", "tooltip"])) : createCommentVNode("", true)
+			], 42, _hoisted_1);
+		};
+	}
+});
+export { Tag_default as default };

package/dist/chip/TagRemoveButton.vue.js

@@ -1,2 +1 @@
-import { t as TagRemoveButton_default } from "../shared/TagRemoveButton-BiCdscIC.js";
-export { TagRemoveButton_default as default };
+export { t as default } from "../shared/TagRemoveButton-D919R-To.js";

package/dist/color-picker/ColorPicker.vue.d.ts

@@ -0,0 +1,23 @@
+import { ColorPickerProps } from '@comfyorg/design-system/lib/color-picker/types';
+type __VLS_Props = ColorPickerProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};