@rotki/ui-library 2.27.0 → 3.0.0-beta.1

package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,18 @@
 import { cn, tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from "./chip-props.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, withModifiers } from "vue";
-import { objectOmit } from "@vueuse/shared";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useSlots, useTemplateRef, withModifiers } from "vue";
+import { get, objectOmit } from "@vueuse/shared";
 //#region src/components/chips/RuiChip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-variant",
 	"data-color",
-	"data-disabled"
+	"data-disabled",
+	"role",
+	"tabindex",
+	"aria-disabled"
 ];
-var _hoisted_2 = ["disabled"];
+var _hoisted_2 = ["disabled", "tabindex"];
 var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiChip",
 	inheritAttrs: false,
@@ -34,41 +37,54 @@ var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		size: { default: () => ChipSize.md },
 		variant: { default: () => ChipVariant.filled },
 		color: { default: "grey" },
-		closeIcon: { default: "lu-circle-x" },
+		closeIcon: { default: "lu-x" },
+		closeUnfocusable: {
+			type: Boolean,
+			default: false
+		},
 		bgColor: { default: () => void 0 },
 		textColor: { default: () => void 0 },
-		classNames: {},
-		contentClass: { default: "" }
+		classNames: {}
 	},
 	emits: ["click:close", "click"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const slots = useSlots();
+		const root = useTemplateRef("root");
 		const chipStyles = tv({
 			slots: {
-				root: "inline-flex items-center justify-between px-2 py-1 transition-all cursor-default outline-none max-w-full truncate",
-				prepend: "rounded-full flex items-center justify-center pr-0 w-6 h-6 text-[0.6rem] text-white bg-rui-grey-400 dark:bg-rui-grey-700 overflow-hidden",
-				label: "truncate px-2 text-[0.8125rem]",
-				close: "rounded-full flex items-center p-[0.13rem] pl-0 inset-y-0 focus:outline-none",
-				closeIcon: "opacity-50 hover:opacity-80 dark:hover:text-rui-grey-300 transition-opacity"
+				root: "inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate",
+				prepend: "rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden",
+				label: "truncate px-2 text-[0.8125rem]/5",
+				close: "rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed",
+				closeIcon: "opacity-60 hover:opacity-100 transition-opacity"
 			},
 			variants: {
 				tile: {
-					true: { root: "rounded-lg" },
+					true: { root: "rounded-rui-sm" },
 					false: { root: "rounded-full" }
 				},
 				size: {
-					md: { root: "min-h-8" },
+					md: { root: "min-h-7" },
 					sm: {
-						root: "py-[0.19rem]",
+						root: "min-h-6",
 						prepend: "text-[0.5rem] p-[0.08rem] w-4 h-4",
-						label: "px-1.5 text-[0.7rem]",
-						close: "p-[0.08rem]"
+						label: "px-1.5 text-xs/4",
+						close: "p-px"
 					}
 				},
+				prepended: {
+					true: { root: "pl-0.5" },
+					false: {}
+				},
+				closeable: {
+					true: {},
+					false: {}
+				},
 				disabled: {
 					true: {
-						root: "opacity-40 cursor-default",
-						close: "cursor-default"
+						root: "!text-rui-text-disabled cursor-default",
+						close: "cursor-default hover:bg-transparent dark:hover:bg-transparent"
 					},
 					false: {}
 				},
@@ -81,7 +97,8 @@ var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				},
 				variant: {
 					filled: {},
-					outlined: {}
+					outlined: {},
+					tonal: {}
 				},
 				color: {
 					grey: { root: "text-rui-text" },
@@ -97,24 +114,16 @@ var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				{
 					clickable: true,
 					disabled: false,
-					class: { root: "hover:brightness-90 focus:brightness-75 dark:hover:brightness-110" }
+					class: { root: "hover:state-layer active:state-layer-pressed focus-visible:focus-ring" }
 				},
 				{
 					color: "grey",
 					variant: "filled",
-					class: { root: "bg-rui-grey-200 dark:bg-rui-grey-800" }
+					class: { root: "bg-rui-neutral-200 dark:bg-rui-neutral-700" }
 				},
 				{
-					color: "grey",
 					variant: "outlined",
-					class: { root: "border border-black/[0.26] bg-transparent dark:border-white/[0.26]" }
-				},
-				{
-					color: "grey",
-					variant: "outlined",
-					clickable: true,
-					disabled: false,
-					class: { root: "hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.04] dark:focus:bg-white/[0.12]" }
+					class: { root: "border border-current/40 bg-transparent" }
 				},
 				{
 					color: "primary",
@@ -129,94 +138,121 @@ var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				{
 					color: "error",
 					variant: "filled",
-					class: { root: "bg-rui-error" }
+					class: { root: "bg-rui-error dark:bg-rui-error-darker" }
 				},
 				{
 					color: "warning",
 					variant: "filled",
-					class: { root: "bg-rui-warning" }
+					class: { root: "bg-rui-warning dark:bg-rui-warning-darker" }
 				},
 				{
 					color: "info",
 					variant: "filled",
-					class: { root: "bg-rui-info" }
+					class: { root: "bg-rui-info dark:bg-rui-info-darker" }
 				},
 				{
 					color: "success",
 					variant: "filled",
-					class: { root: "bg-rui-success" }
+					class: { root: "bg-rui-success dark:bg-rui-success-darker" }
 				},
 				{
 					color: "primary",
 					variant: "outlined",
-					class: { root: "border text-rui-primary border-rui-primary/50 bg-transparent" }
+					class: { root: "text-rui-primary dark:text-rui-primary-lighter" }
 				},
 				{
 					color: "secondary",
 					variant: "outlined",
-					class: { root: "border text-rui-secondary border-rui-secondary/50 bg-transparent" }
+					class: { root: "text-rui-secondary dark:text-rui-secondary-lighter" }
 				},
 				{
 					color: "error",
 					variant: "outlined",
-					class: { root: "border text-rui-error border-rui-error/50 bg-transparent" }
+					class: { root: "text-rui-error dark:text-rui-error-lighter" }
 				},
 				{
 					color: "warning",
 					variant: "outlined",
-					class: { root: "border text-rui-warning border-rui-warning/50 bg-transparent" }
+					class: { root: "text-rui-warning" }
 				},
 				{
 					color: "info",
 					variant: "outlined",
-					class: { root: "border text-rui-info border-rui-info/50 bg-transparent" }
+					class: { root: "text-rui-info" }
 				},
 				{
 					color: "success",
 					variant: "outlined",
-					class: { root: "border text-rui-success border-rui-success/50 bg-transparent" }
+					class: { root: "text-rui-success" }
+				},
+				{
+					color: "grey",
+					variant: "tonal",
+					class: { root: "bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10" }
 				},
 				{
 					color: "primary",
-					variant: "outlined",
-					clickable: true,
-					disabled: false,
-					class: { root: "hover:bg-rui-primary/[0.04] focus:bg-rui-primary/[0.12]" }
+					variant: "tonal",
+					class: { root: "bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter" }
 				},
 				{
 					color: "secondary",
-					variant: "outlined",
-					clickable: true,
-					disabled: false,
-					class: { root: "hover:bg-rui-secondary/[0.04] focus:bg-rui-secondary/[0.12]" }
+					variant: "tonal",
+					class: { root: "bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter" }
 				},
 				{
 					color: "error",
-					variant: "outlined",
-					clickable: true,
-					disabled: false,
-					class: { root: "hover:bg-rui-error/[0.04] focus:bg-rui-error/[0.12]" }
+					variant: "tonal",
+					class: { root: "bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter" }
 				},
 				{
 					color: "warning",
-					variant: "outlined",
-					clickable: true,
-					disabled: false,
-					class: { root: "hover:bg-rui-warning/[0.04] focus:bg-rui-warning/[0.12]" }
+					variant: "tonal",
+					class: { root: "bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter" }
 				},
 				{
 					color: "info",
-					variant: "outlined",
-					clickable: true,
-					disabled: false,
-					class: { root: "hover:bg-rui-info/[0.04] focus:bg-rui-info/[0.12]" }
+					variant: "tonal",
+					class: { root: "bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter" }
 				},
 				{
 					color: "success",
+					variant: "tonal",
+					class: { root: "bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter" }
+				},
+				{
+					size: "sm",
+					prepended: true,
+					class: { root: "pl-1" }
+				},
+				{
+					tile: true,
+					class: { prepend: "rounded-sm" }
+				},
+				{
+					closeable: true,
+					class: {
+						root: "pr-1",
+						label: "pr-1"
+					}
+				},
+				{
+					closeable: true,
+					size: "sm",
+					class: {
+						root: "pr-1",
+						label: "pr-0.5"
+					}
+				},
+				{
+					disabled: true,
+					variant: ["filled", "tonal"],
+					class: { root: "!bg-rui-neutral-100 dark:!bg-rui-neutral-800" }
+				},
+				{
+					disabled: true,
 					variant: "outlined",
-					clickable: true,
-					disabled: false,
-					class: { root: "hover:bg-rui-success/[0.04] focus:bg-rui-success/[0.12]" }
+					class: { root: "!border-rui-divider" }
 				}
 			],
 			compoundSlots: [{
@@ -231,15 +267,6 @@ var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				],
 				variant: "filled",
 				class: "text-rui-dark-text"
-			}, {
-				slots: ["root"],
-				color: [
-					"warning",
-					"success",
-					"info"
-				],
-				variant: "filled",
-				class: "dark:text-rui-light-text"
 			}],
 			defaultVariants: {
 				tile: false,
@@ -256,7 +283,9 @@ var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			color: __props.color,
 			variant: __props.variant,
 			disabled: __props.disabled,
-			clickable: __props.clickable
+			clickable: __props.clickable,
+			prepended: !!slots.prepend,
+			closeable: __props.closeable
 		}));
 		const style = computed(() => {
 			const s = {};
@@ -268,26 +297,46 @@ var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			if (!__props.clickable || __props.disabled) return;
 			emit("click", e);
 		}
+		/**
+		* Enter and Space activate a clickable chip as they would a button, through a
+		* real click so the handler still gets a `MouseEvent`.
+		*
+		* @param e - the key press on the chip
+		*/
+		function onKeydown(e) {
+			if (!__props.clickable || __props.disabled || e.target !== get(root)) return;
+			if (e.key !== "Enter" && e.key !== " ") return;
+			e.preventDefault();
+			get(root)?.click();
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root,
 				class: unref(ui).root({ class: unref(cn)(__props.classNames?.root) }),
 				style: unref(style),
 				"data-variant": __props.variant,
 				"data-color": __props.color,
 				"data-disabled": __props.disabled || void 0,
-				role: "button",
-				tabindex: "0"
-			}, unref(objectOmit)(_ctx.$attrs, ["onClick"]), { onClick: _cache[1] || (_cache[1] = ($event) => click($event)) }), [
+				role: __props.clickable ? "button" : void 0,
+				tabindex: __props.clickable && !__props.disabled ? 0 : void 0,
+				"aria-disabled": __props.clickable && __props.disabled ? true : void 0
+			}, unref(objectOmit)(_ctx.$attrs, ["onClick"]), {
+				onClick: _cache[1] || (_cache[1] = ($event) => click($event)),
+				onKeydown: _cache[2] || (_cache[2] = ($event) => onKeydown($event))
+			}), [
 				_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(unref(ui).prepend())
 				}, [renderSlot(_ctx.$slots, "prepend")], 2)) : createCommentVNode("", true),
-				createElementVNode("span", { class: normalizeClass(unref(ui).label({ class: unref(cn)(__props.classNames?.content) ?? __props.contentClass })) }, [renderSlot(_ctx.$slots, "default")], 2),
+				createElementVNode("span", { class: normalizeClass(unref(ui).label({ class: unref(cn)(__props.classNames?.content) })) }, [renderSlot(_ctx.$slots, "default")], 2),
 				__props.closeable ? (openBlock(), createElementBlock("button", {
 					key: 1,
 					class: normalizeClass(unref(ui).close()),
 					disabled: __props.disabled,
 					type: "button",
+					"aria-label": "Remove",
+					tabindex: __props.closeUnfocusable ? -1 : void 0,
 					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("click:close"), ["stop"]))
 				}, [createVNode(RuiIcon_default, {
 					class: normalizeClass(unref(ui).closeIcon()),

package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-circle-x',\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst chipStyles = tv({\n  slots: {\n    root: 'inline-flex items-center justify-between px-2 py-1 transition-all cursor-default outline-none max-w-full truncate',\n    prepend: 'rounded-full flex items-center justify-center pr-0 w-6 h-6 text-[0.6rem] text-white bg-rui-grey-400 dark:bg-rui-grey-700 overflow-hidden',\n    label: 'truncate px-2 text-[0.8125rem]',\n    close: 'rounded-full flex items-center p-[0.13rem] pl-0 inset-y-0 focus:outline-none',\n    closeIcon: 'opacity-50 hover:opacity-80 dark:hover:text-rui-grey-300 transition-opacity',\n  },\n  variants: {\n    tile: {\n      true: { root: 'rounded-lg' },\n      false: { root: 'rounded-full' },\n    },\n    size: {\n      md: { root: 'min-h-8' },\n      sm: {\n        root: 'py-[0.19rem]',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1.5 text-[0.7rem]',\n        close: 'p-[0.08rem]',\n      },\n    },\n    disabled: {\n      true: { root: 'opacity-40 cursor-default', close: 'cursor-default' },\n      false: {},\n    },\n    clickable: {\n      true: { root: 'cursor-pointer' },\n      false: { root: 'cursor-default', close: 'cursor-default' },\n    },\n    variant: {\n      filled: {},\n      outlined: {},\n    },\n    color: {\n      grey: { root: 'text-rui-text' },\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Interactive states (clickable + not disabled)\n    { clickable: true, disabled: false, class: { root: 'hover:brightness-90 focus:brightness-75 dark:hover:brightness-110' } },\n\n    // Grey filled/outlined\n    { color: 'grey', variant: 'filled', class: { root: 'bg-rui-grey-200 dark:bg-rui-grey-800' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'border border-black/[0.26] bg-transparent dark:border-white/[0.26]' } },\n    { color: 'grey', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.04] dark:focus:bg-white/[0.12]' } },\n\n    // Context colors — filled bg\n    { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n    { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n    { color: 'error', variant: 'filled', class: { root: 'bg-rui-error' } },\n    { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning' } },\n    { color: 'info', variant: 'filled', class: { root: 'bg-rui-info' } },\n    { color: 'success', variant: 'filled', class: { root: 'bg-rui-success' } },\n\n    // Context colors — outlined base\n    { color: 'primary', variant: 'outlined', class: { root: 'border text-rui-primary border-rui-primary/50 bg-transparent' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'border text-rui-secondary border-rui-secondary/50 bg-transparent' } },\n    { color: 'error', variant: 'outlined', class: { root: 'border text-rui-error border-rui-error/50 bg-transparent' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'border text-rui-warning border-rui-warning/50 bg-transparent' } },\n    { color: 'info', variant: 'outlined', class: { root: 'border text-rui-info border-rui-info/50 bg-transparent' } },\n    { color: 'success', variant: 'outlined', class: { root: 'border text-rui-success border-rui-success/50 bg-transparent' } },\n\n    // Context colors — outlined interactive\n    { color: 'primary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-primary/[0.04] focus:bg-rui-primary/[0.12]' } },\n    { color: 'secondary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-secondary/[0.04] focus:bg-rui-secondary/[0.12]' } },\n    { color: 'error', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-error/[0.04] focus:bg-rui-error/[0.12]' } },\n    { color: 'warning', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-warning/[0.04] focus:bg-rui-warning/[0.12]' } },\n    { color: 'info', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-info/[0.04] focus:bg-rui-info/[0.12]' } },\n    { color: 'success', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-success/[0.04] focus:bg-rui-success/[0.12]' } },\n  ],\n  compoundSlots: [\n    // All context colors filled share dark text\n    { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n    // Dark mode: warning/success/info filled use light text\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'filled', class: 'dark:text-rui-light-text' },\n  ],\n  defaultVariants: {\n    tile: false,\n    size: 'md',\n    disabled: false,\n    clickable: false,\n    variant: 'filled',\n    color: 'grey',\n  },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    role=\"button\"\n    tabindex=\"0\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) ?? contentClass })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  /**\n   * Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n   * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n   */\n  closeUnfocusable?: boolean;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-x',\n  closeUnfocusable = false,\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n  slots: {\n    // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n    root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n    // the avatar's neutral pair, so initials stay readable on any chip color\n    prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n    label: 'truncate px-2 text-[0.8125rem]/5',\n    // a round hover fill marks the close icon as its own button\n    close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n    closeIcon: 'opacity-60 hover:opacity-100 transition-opacity',\n  },\n  variants: {\n    tile: {\n      true: { root: 'rounded-rui-sm' },\n      false: { root: 'rounded-full' },\n    },\n    size: {\n      // 28px, to sit in a 44px table row; sm is 24px with 12px text, the smallest the library sets\n      md: { root: 'min-h-7' },\n      sm: {\n        root: 'min-h-6',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1.5 text-xs/4',\n        close: 'p-px',\n      },\n    },\n    // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n    prepended: {\n      true: { root: 'pl-0.5' },\n      false: {},\n    },\n    closeable: {\n      true: {},\n      false: {},\n    },\n    disabled: {\n      true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\n      false: {},\n    },\n    clickable: {\n      true: { root: 'cursor-pointer' },\n      false: { root: 'cursor-default', close: 'cursor-default' },\n    },\n    variant: {\n      filled: {},\n      outlined: {},\n      tonal: {},\n    },\n    color: {\n      grey: { root: 'text-rui-text' },\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Interactive states (clickable + not disabled): a tint over any fill, which keeps the text color\n    { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n    // Grey filled: a solid step above the tonal tint\n    { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n    // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n    { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\n\n    // Context colors — filled bg\n    { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n    { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n    // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n    { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n    { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n    { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n    { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n    // Context colors: outlined text\n    { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n    { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n    { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n    // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n    { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n    { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n    { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n    { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n    // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n    { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n    // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n    { tile: true, class: { prepend: 'rounded-sm' } },\n    // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n    { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n    { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n\n    // Disabled: a flat neutral chip in any color, like a disabled button\n    { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n    { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n  ],\n  compoundSlots: [\n    // Every filled color takes light text, in both themes\n    { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n  ],\n  defaultVariants: {\n    tile: false,\n    size: 'md',\n    disabled: false,\n    clickable: false,\n    variant: 'filled',\n    color: 'grey',\n  },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n  prepended: !!slots.prepend,\n  closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n\n/**\n * Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n *\n * @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!clickable || disabled || e.target !== get(root))\n    return;\n  if (e.key !== 'Enter' && e.key !== ' ')\n    return;\n\n  e.preventDefault();\n  get(root)?.click();\n}\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    :role=\"clickable ? 'button' : undefined\"\n    :tabindex=\"clickable && !disabled ? 0 : undefined\"\n    :aria-disabled=\"clickable && disabled ? true : undefined\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n    @keydown=\"onKeydown($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      aria-label=\"Remove\"\n      :tabindex=\"closeUnfocusable ? -1 : undefined\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/chips/chip-props.d.ts

@@ -6,6 +6,8 @@ export type ChipSize = (typeof ChipSize)[keyof typeof ChipSize];
 export declare const ChipVariant: {
     readonly filled: "filled";
     readonly outlined: "outlined";
+    /** A soft tint of the color with deeper text, for status tags in dense views */
+    readonly tonal: "tonal";
 };
 export type ChipVariant = (typeof ChipVariant)[keyof typeof ChipVariant];
 export declare const CHIP_CLOSE_ICON_SIZES: Record<ChipSize, number>;

package/dist/components/chips/chip-props.js

@@ -5,11 +5,13 @@ var ChipSize = {
 };
 var ChipVariant = {
 	filled: "filled",
-	outlined: "outlined"
+	outlined: "outlined",
+	/** A soft tint of the color with deeper text, for status tags in dense views */
+	tonal: "tonal"
 };
 var CHIP_CLOSE_ICON_SIZES = {
-	sm: 16,
-	md: 24
+	sm: 12,
+	md: 14
 };
 //#endregion
 export { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant };

package/dist/components/chips/chip-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip-props.js","names":[],"sources":["../../../src/components/chips/chip-props.ts"],"sourcesContent":["export const ChipSize = {\n  sm: 'sm',\n  md: 'md',\n} as const;\n\nexport type ChipSize = (typeof ChipSize)[keyof typeof ChipSize];\n\nexport const ChipVariant = {\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type ChipVariant = (typeof ChipVariant)[keyof typeof ChipVariant];\n\nexport const CHIP_CLOSE_ICON_SIZES: Record<ChipSize, number> = {\n  sm: 16,\n  md: 24,\n};\n"],"mappings":";AAAA,IAAa,WAAW;CACtB,IAAI;CACJ,IAAI;AACN;AAIA,IAAa,cAAc;CACzB,QAAQ;CACR,UAAU;AACZ;AAIA,IAAa,wBAAkD;CAC7D,IAAI;CACJ,IAAI;AACN"}
+{"version":3,"file":"chip-props.js","names":[],"sources":["../../../src/components/chips/chip-props.ts"],"sourcesContent":["export const ChipSize = {\n  sm: 'sm',\n  md: 'md',\n} as const;\n\nexport type ChipSize = (typeof ChipSize)[keyof typeof ChipSize];\n\nexport const ChipVariant = {\n  filled: 'filled',\n  outlined: 'outlined',\n  /** A soft tint of the color with deeper text, for status tags in dense views */\n  tonal: 'tonal',\n} as const;\n\nexport type ChipVariant = (typeof ChipVariant)[keyof typeof ChipVariant];\n\nexport const CHIP_CLOSE_ICON_SIZES: Record<ChipSize, number> = {\n  sm: 12,\n  md: 14,\n};\n"],"mappings":";AAAA,IAAa,WAAW;CACtB,IAAI;CACJ,IAAI;AACN;AAIA,IAAa,cAAc;CACzB,QAAQ;CACR,UAAU;;CAEV,OAAO;AACT;AAIA,IAAa,wBAAkD;CAC7D,IAAI;CACJ,IAAI;AACN"}

package/dist/components/color-picker/RuiColorBoard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorBoard.js","names":[],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorBoard.js","names":[],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow-rui-control rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js

@@ -69,7 +69,7 @@ var RuiColorBoard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		onMounted(() => {
 			updatePosition();
 		});
-		const rootStyle = tv({ base: "relative w-full h-40 overflow-hidden cursor-pointer" });
+		const rootStyle = tv({ base: "relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control" });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				ref_key: "wrapper",
@@ -88,11 +88,11 @@ var RuiColorBoard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				onMousedown: _cache[1] || (_cache[1] = ($event) => unref(onMouseDown)($event)),
 				onTouchstart: _cache[2] || (_cache[2] = ($event) => unref(onTouchStart)($event))
 			}), [
-				_cache[3] || (_cache[3] = createElementVNode("div", { class: "absolute inset-0 to-transparent bg-gradient-to-r from-white" }, null, -1)),
-				_cache[4] || (_cache[4] = createElementVNode("div", { class: "absolute inset-0 to-transparent bg-gradient-to-t from-black" }, null, -1)),
+				_cache[3] || (_cache[3] = createElementVNode("div", { class: "absolute inset-0 to-transparent bg-linear-to-r from-white" }, null, -1)),
+				_cache[4] || (_cache[4] = createElementVNode("div", { class: "absolute inset-0 to-transparent bg-linear-to-t from-black" }, null, -1)),
 				createElementVNode("div", {
 					"data-id": "cursor",
-					class: "absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15",
+					class: "absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow-rui-control rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15",
 					style: normalizeStyle(unref(cursorStyle))
 				}, null, 4)
 			], 16, _hoisted_1);

package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAeA,MAAM,OAAO;EAIb,MAAM,UAAU,eAA4B,SAAS;EAErD,MAAM,QAAQ,SAAS;GACrB,WAAW,SAAS,QAAA,MAAM,GAAG;GAC7B,YAAY,QAAA,MAAM;GAClB,YAAY,QAAA,MAAM;EACpB,CAAC;EAED,MAAM,YAAY,IAAY,CAAC;EAC/B,MAAM,aAAa,IAAY,CAAC;EAEhC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,SAAS;EAE3E,MAAM,cAAc,gBAA+C;GACjE,KAAK,GAAG,IAAI,SAAS,IAAI,IAAI;GAC7B,MAAM,GAAG,IAAI,UAAU,IAAI,IAAI;EACjC,EAAE;EAEF,SAAS,SAAS,KAAqB;GACrC,OAAO,UAAU;IAAE,GAAG;IAAK,GAAG;IAAG,GAAG;GAAE,CAAC,CAAC,CAAC,YAAY;EACvD;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,MAAM,UAAU;GAChC,IAAI,WAAW,IAAI,MAAM,UAAU;EACrC;EAEA,SAAS,UAAU,GAAW,GAAiB;GAC7C,MAAM,KAAK,IAAI,OAAO;GACtB,IAAI,CAAC,IACH;GAGF,MAAM,EAAE,OAAO,QAAQ,MAAM,QADhB,GAAG,sBACqB;GACrC,IAAI,cAAc,IAAI;GACtB,IAAI,cAAc,IAAI;GAEtB,cAAc,MAAM,aAAa,GAAG,KAAK;GACzC,cAAc,MAAM,aAAa,GAAG,MAAM;GAE1C,MAAM,aAAa,cAAc;GACjC,MAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,CAAC;GAE1D,IAAI,YAAY,cAAc,KAAK;GACnC,IAAI,WAAW,cAAc,MAAM;GAEnC,MAAM,aAAa;GACnB,MAAM,aAAa;GAEnB,KAAK,gBAAgB;IAAE;IAAY;GAAW,CAAC;EACjD;EAEA,YACQ;GAAC,QAAA,MAAM;GAAK,QAAA,MAAM;GAAY,QAAA,MAAM;EAAU,IACnD,CAAC,KAAK,YAAY,gBAAgB;GACjC,MAAM,YAAY,SAAS,GAAG;GAC9B,MAAM,aAAa;GACnB,MAAM,aAAa;GACnB,eAAe;EACjB,CACF;EAEA,gBAAgB;GACd,eAAe;EACjB,CAAC;EAED,MAAM,YAAY,GAAG,EAAE,MAAM,sDAAsD,CAAC;;GAIlF,OAAA,UAAA,GAAA,mBAoBM,OApBN,WAoBM;IAnBA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,kBAAc,cAAgB,KAAK,MAAM,MAAA,KAAA,CAAK,CAAC,aAAU,GAAA,EAAA,gBAAwB,KAAK,MAAM,MAAA,KAAA,CAAK,CAAC,aAAU,GAAA,EAAA;IAC7G,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,OAAK,EAAA,iBAAqB,MAAA,KAAA,CAAK,CAAC,UAAS;IACzC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,CAAY,CAAC,MAAM;;IAEhC,OAAA,OAAA,OAAA,KAAA,mBAA2E,OAAA,EAAtE,OAAM,8DAA6D,GAAA,MAAA,EAAA;IACxE,OAAA,OAAA,OAAA,KAAA,mBAA2E,OAAA,EAAtE,OAAM,8DAA6D,GAAA,MAAA,EAAA;IACxE,mBAIE,OAAA;KAHA,WAAQ;KACR,OAAM;KACL,OAAK,eAAE,MAAA,WAAA,CAAW"}
+{"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow-rui-control rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAeA,MAAM,OAAO;EAIb,MAAM,UAAU,eAA4B,SAAS;EAErD,MAAM,QAAQ,SAAS;GACrB,WAAW,SAAS,QAAA,MAAM,GAAG;GAC7B,YAAY,QAAA,MAAM;GAClB,YAAY,QAAA,MAAM;EACpB,CAAC;EAED,MAAM,YAAY,IAAY,CAAC;EAC/B,MAAM,aAAa,IAAY,CAAC;EAEhC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,SAAS;EAE3E,MAAM,cAAc,gBAA+C;GACjE,KAAK,GAAG,IAAI,SAAS,IAAI,IAAI;GAC7B,MAAM,GAAG,IAAI,UAAU,IAAI,IAAI;EACjC,EAAE;EAEF,SAAS,SAAS,KAAqB;GACrC,OAAO,UAAU;IAAE,GAAG;IAAK,GAAG;IAAG,GAAG;GAAE,CAAC,CAAC,CAAC,YAAY;EACvD;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,MAAM,UAAU;GAChC,IAAI,WAAW,IAAI,MAAM,UAAU;EACrC;EAEA,SAAS,UAAU,GAAW,GAAiB;GAC7C,MAAM,KAAK,IAAI,OAAO;GACtB,IAAI,CAAC,IACH;GAGF,MAAM,EAAE,OAAO,QAAQ,MAAM,QADhB,GAAG,sBACqB;GACrC,IAAI,cAAc,IAAI;GACtB,IAAI,cAAc,IAAI;GAEtB,cAAc,MAAM,aAAa,GAAG,KAAK;GACzC,cAAc,MAAM,aAAa,GAAG,MAAM;GAE1C,MAAM,aAAa,cAAc;GACjC,MAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,CAAC;GAE1D,IAAI,YAAY,cAAc,KAAK;GACnC,IAAI,WAAW,cAAc,MAAM;GAEnC,MAAM,aAAa;GACnB,MAAM,aAAa;GAEnB,KAAK,gBAAgB;IAAE;IAAY;GAAW,CAAC;EACjD;EAEA,YACQ;GAAC,QAAA,MAAM;GAAK,QAAA,MAAM;GAAY,QAAA,MAAM;EAAU,IACnD,CAAC,KAAK,YAAY,gBAAgB;GACjC,MAAM,YAAY,SAAS,GAAG;GAC9B,MAAM,aAAa;GACnB,MAAM,aAAa;GACnB,eAAe;EACjB,CACF;EAEA,gBAAgB;GACd,eAAe;EACjB,CAAC;EAED,MAAM,YAAY,GAAG,EAAE,MAAM,0EAA0E,CAAC;;GAItG,OAAA,UAAA,GAAA,mBAoBM,OApBN,WAoBM;IAnBA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,kBAAc,cAAgB,KAAK,MAAM,MAAA,KAAA,CAAK,CAAC,aAAU,GAAA,EAAA,gBAAwB,KAAK,MAAM,MAAA,KAAA,CAAK,CAAC,aAAU,GAAA,EAAA;IAC7G,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,OAAK,EAAA,iBAAqB,MAAA,KAAA,CAAK,CAAC,UAAS;IACzC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,CAAY,CAAC,MAAM;;IAEhC,OAAA,OAAA,OAAA,KAAA,mBAAyE,OAAA,EAApE,OAAM,4DAA2D,GAAA,MAAA,EAAA;IACtE,OAAA,OAAA,OAAA,KAAA,mBAAyE,OAAA,EAApE,OAAM,4DAA2D,GAAA,MAAA,EAAA;IACtE,mBAIE,OAAA;KAHA,WAAQ;KACR,OAAM;KACL,OAAK,eAAE,MAAA,WAAA,CAAW"}

package/dist/components/color-picker/RuiColorHue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorHue.js","names":[],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { cn, tv } from '@/utils/tv';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorHue.js","names":[],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { cn, tv } from '@/utils/tv';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-rui-control bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-picker/RuiColorHue.vue_vue_type_script_setup_true_lang.js

@@ -78,7 +78,7 @@ var RuiColorHue_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				onTouchstart: _cache[2] || (_cache[2] = ($event) => unref(onTouchStart)($event))
 			}), [createElementVNode("div", {
 				"data-id": "cursor",
-				class: "absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full",
+				class: "absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-rui-control bg-white rounded-full",
 				style: normalizeStyle(unref(cursorStyle))
 			}, null, 4)], 16, _hoisted_1);
 		};

package/dist/components/color-picker/RuiColorHue.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorHue.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { cn, tv } from '@/utils/tv';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;AAoBA,IAAM,UAAU;AAChB,IAAM,eAAe;;;;;;;;;;;EALrB,MAAM,aAAa,SAAmB,SAAA,YAAmB;EAEzD,MAAM,aAAa,eAA4B,YAAY;EAI3D,MAAM,aAAa,IAAY,EAAE;EAEjC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,OAAO;EAEzE,MAAM,cAAc,gBAAkC,EACpD,MAAM,IAAI,UAAU,EACtB,EAAE;EAEF,SAAS,SAAS,OAAsB;GACtC,MAAM,aAAa,eAAe;GAClC,MAAM,aAAa,QAAQ;GAG3B,OAAO;IAAE;IAAY;IAAY,gBAFV,aAAa;GAEY;EAClD;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,cAAc,CAAC;EACjC;EAEA,SAAS,gBAAwB;GAC/B,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH,OAAO;GAGT,MAAM,cADO,GAAG,sBACI,CAAA,CAAK;GACzB,MAAM,EAAE,YAAY,mBAAmB,SAAS,WAAW;GAE3D,MAAM,SAAS,IAAI,UAAU;GAC7B,MAAM,UAAU,WAAW,UAAU,UAAU,SAAS;GAGxD,OAAO,QADY,gBAAiB,UAAU,WAAY,iBAAiB,eAAe,GAC3E,EAAW,MAAM,WAAW;EAC7C;EAEA,SAAS,QAAQ,GAAiB;GAChC,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH;GAEF,MAAM,OAAO,GAAG,sBAAsB;GACtC,IAAI,cAAc,IAAI,KAAK;GAE3B,MAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,KAAK;GACtE,cAAc,MAAM,aAAa,YAAY,UAAU;GAEvD,IAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,OAAO,CAAC;EACrF;EAEA,MAAM,kBAAkB;GACtB,eAAe;EACjB,CAAC;EAED,gBAAgB;GACd,eAAe;EACjB,CAAC;EAED,MAAM,YAAY,GAAG,EAAE,MAAM,oEAAoE,CAAC;;GAIhG,OAAA,UAAA,GAAA,mBAmBM,OAnBN,WAmBM;IAlBA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,iBAAe,WAAA;IAChB,iBAAc;IACd,iBAAc;IACd,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,CAAY,CAAC,MAAM;GAEhC,CAAA,GAAA,CAAA,mBAIE,OAAA;IAHA,WAAQ;IACR,OAAM;IACL,OAAK,eAAE,MAAA,WAAA,CAAW"}
+{"version":3,"file":"RuiColorHue.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { cn, tv } from '@/utils/tv';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-rui-control bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;AAoBA,IAAM,UAAU;AAChB,IAAM,eAAe;;;;;;;;;;;EALrB,MAAM,aAAa,SAAmB,SAAA,YAAmB;EAEzD,MAAM,aAAa,eAA4B,YAAY;EAI3D,MAAM,aAAa,IAAY,EAAE;EAEjC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,OAAO;EAEzE,MAAM,cAAc,gBAAkC,EACpD,MAAM,IAAI,UAAU,EACtB,EAAE;EAEF,SAAS,SAAS,OAAsB;GACtC,MAAM,aAAa,eAAe;GAClC,MAAM,aAAa,QAAQ;GAG3B,OAAO;IAAE;IAAY;IAAY,gBAFV,aAAa;GAEY;EAClD;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,cAAc,CAAC;EACjC;EAEA,SAAS,gBAAwB;GAC/B,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH,OAAO;GAGT,MAAM,cADO,GAAG,sBACI,CAAA,CAAK;GACzB,MAAM,EAAE,YAAY,mBAAmB,SAAS,WAAW;GAE3D,MAAM,SAAS,IAAI,UAAU;GAC7B,MAAM,UAAU,WAAW,UAAU,UAAU,SAAS;GAGxD,OAAO,QADY,gBAAiB,UAAU,WAAY,iBAAiB,eAAe,GAC3E,EAAW,MAAM,WAAW;EAC7C;EAEA,SAAS,QAAQ,GAAiB;GAChC,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH;GAEF,MAAM,OAAO,GAAG,sBAAsB;GACtC,IAAI,cAAc,IAAI,KAAK;GAE3B,MAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,KAAK;GACtE,cAAc,MAAM,aAAa,YAAY,UAAU;GAEvD,IAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,OAAO,CAAC;EACrF;EAEA,MAAM,kBAAkB;GACtB,eAAe;EACjB,CAAC;EAED,gBAAgB;GACd,eAAe;EACjB,CAAC;EAED,MAAM,YAAY,GAAG,EAAE,MAAM,oEAAoE,CAAC;;GAIhG,OAAA,UAAA,GAAA,mBAmBM,OAnBN,WAmBM;IAlBA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,iBAAe,WAAA;IAChB,iBAAc;IACd,iBAAc;IACd,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,CAAY,CAAC,MAAM;GAEhC,CAAA,GAAA,CAAA,mBAIE,OAAA;IAHA,WAAQ;IACR,OAAM;IACL,OAAK,eAAE,MAAA,WAAA,CAAW"}

package/dist/components/color-picker/RuiColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorInput.js","names":[],"sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, ColorFormat } from './utils';\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\ndefineOptions({\n  name: 'RuiColorInput',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<Color>({ required: true });\n\nconst MAX_RGB = 255;\nconst VALID_HEX_LENGTHS = [3, 4, 6];\nconst DEFAULT_HEX = '000000';\n\nconst inputType = ref<ColorFormat>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nfunction applyRgbValue(value: string, key: number): void {\n  if (!state.rgb || !state.color)\n    return;\n\n  const clamped = clamp(Number(value), 0, MAX_RGB);\n  state.rgb[key] = clamped;\n  const [r, g, b] = state.rgb;\n  state.color.hex = tinycolor({ r, g, b }).toHex();\n}\n\nconst onBlurChange = useDebounceFn((format: ColorFormat, event: Event, key?: number) => {\n  if (!state.color)\n    return;\n\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length))\n      state.color.hex = hex;\n    else state.color.hex = DEFAULT_HEX;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 100);\n\nconst onInputChange = useDebounceFn((format: ColorFormat, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && state.color && hex.length === 6)\n      state.color.hex = hex;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nfunction onInputTypeChange(): void {\n  set(inputType, get(inputType) === 'rgb' ? 'hex' : 'rgb');\n}\n\nwatch(\n  () => {\n    const color = get(modelValue);\n    return [color.hex, ...color.rgb] as const;\n  },\n  () => {\n    const color = get(modelValue);\n    state.color = color;\n    state.hex = color.hex;\n    state.rgb = color.rgb;\n  },\n);\n</script>\n\n<template>\n  <div\n    data-id=\"color-input\"\n    class=\"flex justify-center gap-2\"\n    v-bind=\"$attrs\"\n  >\n    <div class=\"flex flex-col items-center gap-1 w-[16rem]\">\n      <div class=\"w-full\">\n        <RuiTextField\n          v-if=\"inputType === 'hex'\"\n          v-model=\"state.hex\"\n          variant=\"outlined\"\n          class=\"flex-1 w-full [&_input]:uppercase\"\n          maxlength=\"6\"\n          color=\"primary\"\n          dense\n          hide-details\n          @update:model-value=\"onInputChange(inputType, $event)\"\n          @blur=\"onBlurChange(inputType, $event)\"\n        >\n          <template #prepend>\n            <span class=\"text-rui-text\"> # </span>\n          </template>\n        </RuiTextField>\n        <div\n          v-else\n          class=\"flex flex-1 gap-1\"\n        >\n          <RuiTextField\n            v-for=\"(v, i) in state.rgb\"\n            :key=\"i\"\n            :model-value=\"v.toString()\"\n            variant=\"outlined\"\n            class=\"[&_input]:text-center w-full\"\n            maxlength=\"3\"\n            color=\"primary\"\n            dense\n            hide-details\n            @update:model-value=\"onInputChange(inputType, $event, i)\"\n            @blur=\"onBlurChange(inputType, $event, i)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"uppercase text-rui-text-secondary text-sm\">\n        {{ inputType }}\n      </div>\n    </div>\n    <RuiButton\n      class=\"h-10\"\n      variant=\"text\"\n      @click=\"onInputTypeChange()\"\n    >\n      <RuiIcon name=\"lu-chevrons-up-down\" />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorInput.js","names":[],"sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, ColorFormat } from './utils';\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiTab from '@/components/tabs/tab/RuiTab.vue';\nimport RuiTabs from '@/components/tabs/tabs/RuiTabs.vue';\n\ndefineOptions({\n  name: 'RuiColorInput',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<Color>({ required: true });\n\nconst MAX_RGB = 255;\nconst VALID_HEX_LENGTHS = [3, 4, 6];\nconst DEFAULT_HEX = '000000';\nconst RGB_CHANNELS = ['Red', 'Green', 'Blue'];\n\nconst inputType = ref<ColorFormat>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nfunction applyRgbValue(value: string, key: number): void {\n  if (!state.rgb || !state.color)\n    return;\n\n  const clamped = clamp(Number(value), 0, MAX_RGB);\n  state.rgb[key] = clamped;\n  const [r, g, b] = state.rgb;\n  state.color.hex = tinycolor({ r, g, b }).toHex();\n}\n\nconst onBlurChange = useDebounceFn((format: ColorFormat, event: Event, key?: number) => {\n  if (!state.color)\n    return;\n\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length))\n      state.color.hex = hex;\n    else state.color.hex = DEFAULT_HEX;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 100);\n\nconst onInputChange = useDebounceFn((format: ColorFormat, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && state.color && hex.length === 6)\n      state.color.hex = hex;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nfunction onInputTypeChange(value: string | number): void {\n  if (value === 'hex' || value === 'rgb')\n    set(inputType, value);\n}\n\nwatch(\n  () => {\n    const color = get(modelValue);\n    return [color.hex, ...color.rgb] as const;\n  },\n  () => {\n    const color = get(modelValue);\n    state.color = color;\n    state.hex = color.hex;\n    state.rgb = color.rgb;\n  },\n);\n</script>\n\n<template>\n  <div\n    data-id=\"color-input\"\n    class=\"flex flex-col gap-2 w-full\"\n    v-bind=\"$attrs\"\n  >\n    <!-- the format is a choice between two views of one value, which is what a segmented control is for -->\n    <RuiTabs\n      :model-value=\"inputType\"\n      variant=\"segmented\"\n      grow\n      data-id=\"color-format\"\n      @update:model-value=\"onInputTypeChange($event)\"\n    >\n      <RuiTab value=\"hex\">\n        Hex\n      </RuiTab>\n      <RuiTab value=\"rgb\">\n        RGB\n      </RuiTab>\n    </RuiTabs>\n    <RuiTextField\n      v-if=\"inputType === 'hex'\"\n      v-model=\"state.hex\"\n      class=\"w-full [&_input]:uppercase\"\n      maxlength=\"6\"\n      color=\"primary\"\n      aria-label=\"Hex color\"\n      dense\n      hide-details\n      @update:model-value=\"onInputChange(inputType, $event)\"\n      @blur=\"onBlurChange(inputType, $event)\"\n    >\n      <template #prepend>\n        <span class=\"text-rui-text-secondary\">#</span>\n      </template>\n    </RuiTextField>\n    <div\n      v-else\n      class=\"flex gap-1\"\n    >\n      <RuiTextField\n        v-for=\"(v, i) in state.rgb\"\n        :key=\"i\"\n        :model-value=\"v.toString()\"\n        class=\"[&_input]:text-center w-full\"\n        maxlength=\"3\"\n        color=\"primary\"\n        :aria-label=\"RGB_CHANNELS[i]\"\n        dense\n        hide-details\n        @update:model-value=\"onInputChange(inputType, $event, i)\"\n        @blur=\"onBlurChange(inputType, $event, i)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}