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

package/dist/components/forms/slider/slider-styles.js

@@ -8,64 +8,60 @@ var SliderInteraction = {
 };
 /** Static class map for highlighted big-tick colors (avoids dynamic class construction) */
 var HIGHLIGHT_COLOR_MAP = {
-	primary: "!bg-rui-primary",
-	secondary: "!bg-rui-secondary",
-	error: "!bg-rui-error",
-	warning: "!bg-rui-warning",
-	info: "!bg-rui-info",
-	success: "!bg-rui-success"
+	primary: "!bg-rui-primary-fill",
+	secondary: "!bg-rui-secondary-fill",
+	error: "!bg-rui-error-fill",
+	warning: "!bg-rui-warning-fill",
+	info: "!bg-rui-info-fill",
+	success: "!bg-rui-success-fill"
 };
 /** Default highlighted tick color (non-big-tick) */
-var HIGHLIGHT_DEFAULT = "bg-rui-grey-100 dark:bg-[#121212]";
+var HIGHLIGHT_DEFAULT = "bg-rui-neutral-100 dark:bg-rui-neutral-950";
 var sliderStyles = tv({
 	slots: {
-		wrapper: "flex items-start gap-3",
-		label: "mt-1 text-rui-text text-body-1",
+		root: "",
+		wrapper: "flex items-start",
+		label: "",
 		outer: "relative h-8 flex-1 min-w-[7.5rem]",
 		inner: "relative",
-		input: "h-full w-full opacity-0 cursor-pointer",
-		slider: "absolute h-full w-full top-0 px-2 pointer-events-none",
+		input: "peer h-full w-full opacity-0 cursor-pointer",
+		slider: "absolute h-full w-full top-0 px-2 pointer-events-none peer-focus-visible:[&_[data-id=slider-thumb]]:focus-ring",
 		sliderInner: "relative h-full w-full cursor-pointer",
-		container: "absolute top-1/2 -translate-y-1/2 w-full h-1 rounded-full",
+		container: "absolute top-1/2 -translate-y-1/2 w-full h-1.5 rounded-full bg-rui-neutral-200 dark:bg-rui-neutral-700",
 		track: "transition-all ease-linear duration-75 h-full rounded-full",
 		ticks: "h-full absolute top-0 flex justify-between items-center",
 		tick: "rounded-full",
-		thumb: "absolute top-1/2 transition-all ease-linear duration-75 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full shadow-2",
-		thumbRipple: [`before:content-[''] before:w-8 before:h-8 before:rounded-full before:absolute before:top-1/2 before:left-1/2`, "before:opacity-10 before:transition before:-translate-x-1/2 before:-translate-y-1/2 before:scale-0"].join(" "),
+		thumb: ["absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-4 rounded-full", "bg-white border-2 shadow-rui-control transition-[left,top,box-shadow] ease-linear duration-75"].join(" "),
 		thumbLabel: [
 			"invisible opacity-0",
 			"absolute -mt-7 transition-all ease-linear duration-75 -translate-x-1/2",
 			"px-2 py-1 text-xs font-normal",
-			"bg-rui-grey-700/90 text-white rounded shadow"
+			"bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip"
 		].join(" ")
 	},
 	variants: {
 		disabled: { true: {
-			label: "text-rui-text-disabled",
-			container: "!bg-rui-grey-300 dark:!bg-rui-grey-800",
-			track: "!bg-rui-grey-400 dark:!bg-rui-grey-700",
-			thumb: "!bg-rui-grey-400 dark:!bg-rui-grey-700"
+			container: "!bg-rui-neutral-200 dark:!bg-rui-neutral-800",
+			track: "!bg-rui-neutral-400 dark:!bg-rui-neutral-600",
+			thumb: "!border-rui-neutral-400 dark:!border-rui-neutral-600 dark:!bg-rui-neutral-300 !ring-0"
 		} },
 		vertical: { true: {
-			wrapper: "flex-col-reverse items-center h-full",
-			label: "mb-2 text-center",
+			root: "flex flex-col",
+			wrapper: "flex-col-reverse items-center flex-1 min-h-0",
+			label: "text-center",
 			outer: "min-w-0 min-h-[7.5rem] w-8",
-			inner: "-rotate-90",
+			inner: "-rotate-90 translate-y-(--rui-slider-shift)",
 			thumbLabel: "mt-6 rotate-90 translate-x-0 [transform-origin:0_50%]"
 		} },
 		interaction: {
 			idle: {},
-			hover: { thumbRipple: "before:scale-100" },
-			focus: { thumbRipple: "before:scale-100 before:opacity-15" },
+			hover: { thumb: "ring-4" },
+			focus: { thumbLabel: "visible opacity-100" },
 			active: {
-				thumbRipple: "before:scale-100 before:opacity-30",
+				thumb: "ring-6",
 				thumbLabel: "visible opacity-100"
 			}
 		},
-		validation: {
-			error: { label: "text-rui-error" },
-			success: { label: "text-rui-success" }
-		},
 		color: {
 			primary: {},
 			secondary: {},
@@ -74,122 +70,78 @@ var sliderStyles = tv({
 			info: {},
 			success: {}
 		},
-		bigTick: { true: {} }
+		bigTick: {
+			false: {
+				ticks: "[&>span:first-child]:invisible [&>span:last-child]:invisible",
+				tick: "bg-rui-neutral-500 dark:bg-rui-neutral-300"
+			},
+			true: {}
+		},
+		hasLabel: {
+			true: {},
+			false: {}
+		}
 	},
 	compoundSlots: [
 		{
-			slots: ["container"],
+			slots: ["track"],
 			color: "primary",
-			class: "bg-rui-primary bg-opacity-40"
+			class: "bg-rui-primary-fill"
 		},
 		{
-			slots: ["container"],
+			slots: ["track"],
 			color: "secondary",
-			class: "bg-rui-secondary bg-opacity-40"
+			class: "bg-rui-secondary-fill"
 		},
 		{
-			slots: ["container"],
+			slots: ["track"],
 			color: "error",
-			class: "bg-rui-error bg-opacity-40"
+			class: "bg-rui-error-fill"
 		},
 		{
-			slots: ["container"],
+			slots: ["track"],
 			color: "warning",
-			class: "bg-rui-warning bg-opacity-40"
+			class: "bg-rui-warning-fill"
 		},
 		{
-			slots: ["container"],
+			slots: ["track"],
 			color: "info",
-			class: "bg-rui-info bg-opacity-40"
+			class: "bg-rui-info-fill"
 		},
 		{
-			slots: ["container"],
+			slots: ["track"],
 			color: "success",
-			class: "bg-rui-success bg-opacity-40"
+			class: "bg-rui-success-fill"
 		},
 		{
-			slots: [
-				"track",
-				"thumb",
-				"tick"
-			],
+			slots: ["thumb"],
 			color: "primary",
-			class: "bg-rui-primary"
+			class: "border-rui-primary-fill ring-rui-primary-soft"
 		},
 		{
-			slots: [
-				"track",
-				"thumb",
-				"tick"
-			],
+			slots: ["thumb"],
 			color: "secondary",
-			class: "bg-rui-secondary"
+			class: "border-rui-secondary-fill ring-rui-secondary-soft"
 		},
 		{
-			slots: [
-				"track",
-				"thumb",
-				"tick"
-			],
+			slots: ["thumb"],
 			color: "error",
-			class: "bg-rui-error"
+			class: "border-rui-error-fill ring-rui-error-soft"
 		},
 		{
-			slots: [
-				"track",
-				"thumb",
-				"tick"
-			],
+			slots: ["thumb"],
 			color: "warning",
-			class: "bg-rui-warning"
+			class: "border-rui-warning-fill ring-rui-warning-soft"
 		},
 		{
-			slots: [
-				"track",
-				"thumb",
-				"tick"
-			],
+			slots: ["thumb"],
 			color: "info",
-			class: "bg-rui-info"
+			class: "border-rui-info-fill ring-rui-info-soft"
 		},
 		{
-			slots: [
-				"track",
-				"thumb",
-				"tick"
-			],
+			slots: ["thumb"],
 			color: "success",
-			class: "bg-rui-success"
-		},
-		{
-			slots: ["thumbRipple"],
-			color: "primary",
-			class: "before:bg-rui-primary"
-		},
-		{
-			slots: ["thumbRipple"],
-			color: "secondary",
-			class: "before:bg-rui-secondary"
-		},
-		{
-			slots: ["thumbRipple"],
-			color: "error",
-			class: "before:bg-rui-error"
-		},
-		{
-			slots: ["thumbRipple"],
-			color: "warning",
-			class: "before:bg-rui-warning"
-		},
-		{
-			slots: ["thumbRipple"],
-			color: "info",
-			class: "before:bg-rui-info"
-		},
-		{
-			slots: ["thumbRipple"],
-			color: "success",
-			class: "before:bg-rui-success"
+			class: "border-rui-success-fill ring-rui-success-soft"
 		}
 	],
 	compoundVariants: [
@@ -222,11 +174,17 @@ var sliderStyles = tv({
 			bigTick: true,
 			color: "success",
 			class: { tick: "!bg-rui-success-lighter" }
+		},
+		{
+			vertical: false,
+			hasLabel: true,
+			class: { outer: "-mt-2" }
 		}
 	],
 	defaultVariants: {
 		interaction: "idle",
-		color: "primary"
+		color: "primary",
+		bigTick: false
 	}
 });
 //#endregion

package/dist/components/forms/slider/slider-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-styles.js","names":[],"sources":["../../../../src/components/forms/slider/slider-styles.ts"],"sourcesContent":["import type { ContextColorsType } from '@/consts/colors';\nimport { tv } from '@/utils/tv';\n\nexport const SliderInteraction = {\n  idle: 'idle',\n  hover: 'hover',\n  focus: 'focus',\n  active: 'active',\n} as const;\n\nexport type SliderInteraction = (typeof SliderInteraction)[keyof typeof SliderInteraction];\n\n/** Static class map for highlighted big-tick colors (avoids dynamic class construction) */\nexport const HIGHLIGHT_COLOR_MAP: Record<ContextColorsType, string> = {\n  primary: '!bg-rui-primary',\n  secondary: '!bg-rui-secondary',\n  error: '!bg-rui-error',\n  warning: '!bg-rui-warning',\n  info: '!bg-rui-info',\n  success: '!bg-rui-success',\n};\n\n/** Default highlighted tick color (non-big-tick) */\nexport const HIGHLIGHT_DEFAULT = 'bg-rui-grey-100 dark:bg-[#121212]';\n\nexport const sliderStyles = tv({\n  slots: {\n    wrapper: 'flex items-start gap-3',\n    label: 'mt-1 text-rui-text text-body-1',\n    outer: 'relative h-8 flex-1 min-w-[7.5rem]',\n    inner: 'relative',\n    input: 'h-full w-full opacity-0 cursor-pointer',\n    slider: 'absolute h-full w-full top-0 px-2 pointer-events-none',\n    sliderInner: 'relative h-full w-full cursor-pointer',\n    container: 'absolute top-1/2 -translate-y-1/2 w-full h-1 rounded-full',\n    track: 'transition-all ease-linear duration-75 h-full rounded-full',\n    ticks: 'h-full absolute top-0 flex justify-between items-center',\n    tick: 'rounded-full',\n    thumb: 'absolute top-1/2 transition-all ease-linear duration-75 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full shadow-2',\n    thumbRipple: [\n      `before:content-[''] before:w-8 before:h-8 before:rounded-full before:absolute before:top-1/2 before:left-1/2`,\n      'before:opacity-10 before:transition before:-translate-x-1/2 before:-translate-y-1/2 before:scale-0',\n    ].join(' '),\n    thumbLabel: [\n      'invisible opacity-0',\n      'absolute -mt-7 transition-all ease-linear duration-75 -translate-x-1/2',\n      'px-2 py-1 text-xs font-normal',\n      'bg-rui-grey-700/90 text-white rounded shadow',\n    ].join(' '),\n  },\n  variants: {\n    disabled: {\n      true: {\n        label: 'text-rui-text-disabled',\n        container: '!bg-rui-grey-300 dark:!bg-rui-grey-800',\n        track: '!bg-rui-grey-400 dark:!bg-rui-grey-700',\n        thumb: '!bg-rui-grey-400 dark:!bg-rui-grey-700',\n      },\n    },\n    vertical: {\n      true: {\n        wrapper: 'flex-col-reverse items-center h-full',\n        label: 'mb-2 text-center',\n        outer: 'min-w-0 min-h-[7.5rem] w-8',\n        inner: '-rotate-90',\n        thumbLabel: 'mt-6 rotate-90 translate-x-0 [transform-origin:0_50%]',\n      },\n    },\n    interaction: {\n      idle: {},\n      hover: { thumbRipple: 'before:scale-100' },\n      focus: { thumbRipple: 'before:scale-100 before:opacity-15' },\n      active: { thumbRipple: 'before:scale-100 before:opacity-30', thumbLabel: 'visible opacity-100' },\n    },\n    validation: {\n      error: { label: 'text-rui-error' },\n      success: { label: 'text-rui-success' },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n    bigTick: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    // Container bg (with opacity)\n    { slots: ['container'], color: 'primary', class: 'bg-rui-primary bg-opacity-40' },\n    { slots: ['container'], color: 'secondary', class: 'bg-rui-secondary bg-opacity-40' },\n    { slots: ['container'], color: 'error', class: 'bg-rui-error bg-opacity-40' },\n    { slots: ['container'], color: 'warning', class: 'bg-rui-warning bg-opacity-40' },\n    { slots: ['container'], color: 'info', class: 'bg-rui-info bg-opacity-40' },\n    { slots: ['container'], color: 'success', class: 'bg-rui-success bg-opacity-40' },\n\n    // Track + thumb + thumb ripple + tick color\n    { slots: ['track', 'thumb', 'tick'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['track', 'thumb', 'tick'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['track', 'thumb', 'tick'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['track', 'thumb', 'tick'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['track', 'thumb', 'tick'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['track', 'thumb', 'tick'], color: 'success', class: 'bg-rui-success' },\n\n    // Thumb ripple (before pseudo) color\n    { slots: ['thumbRipple'], color: 'primary', class: 'before:bg-rui-primary' },\n    { slots: ['thumbRipple'], color: 'secondary', class: 'before:bg-rui-secondary' },\n    { slots: ['thumbRipple'], color: 'error', class: 'before:bg-rui-error' },\n    { slots: ['thumbRipple'], color: 'warning', class: 'before:bg-rui-warning' },\n    { slots: ['thumbRipple'], color: 'info', class: 'before:bg-rui-info' },\n    { slots: ['thumbRipple'], color: 'success', class: 'before:bg-rui-success' },\n  ],\n  compoundVariants: [\n    // Big tick: lighter default, color highlighted\n    { bigTick: true, color: 'primary', class: { tick: '!bg-rui-primary-lighter' } },\n    { bigTick: true, color: 'secondary', class: { tick: '!bg-rui-secondary-lighter' } },\n    { bigTick: true, color: 'error', class: { tick: '!bg-rui-error-lighter' } },\n    { bigTick: true, color: 'warning', class: { tick: '!bg-rui-warning-lighter' } },\n    { bigTick: true, color: 'info', class: { tick: '!bg-rui-info-lighter' } },\n    { bigTick: true, color: 'success', class: { tick: '!bg-rui-success-lighter' } },\n  ],\n  defaultVariants: {\n    interaction: 'idle',\n    color: 'primary',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"slider-styles.js","names":[],"sources":["../../../../src/components/forms/slider/slider-styles.ts"],"sourcesContent":["import type { ContextColorsType } from '@/consts/colors';\nimport { tv } from '@/utils/tv';\n\nexport const SliderInteraction = {\n  idle: 'idle',\n  hover: 'hover',\n  focus: 'focus',\n  active: 'active',\n} as const;\n\nexport type SliderInteraction = (typeof SliderInteraction)[keyof typeof SliderInteraction];\n\n/** Static class map for highlighted big-tick colors (avoids dynamic class construction) */\nexport const HIGHLIGHT_COLOR_MAP: Record<ContextColorsType, string> = {\n  primary: '!bg-rui-primary-fill',\n  secondary: '!bg-rui-secondary-fill',\n  error: '!bg-rui-error-fill',\n  warning: '!bg-rui-warning-fill',\n  info: '!bg-rui-info-fill',\n  success: '!bg-rui-success-fill',\n};\n\n/** Default highlighted tick color (non-big-tick) */\nexport const HIGHLIGHT_DEFAULT = 'bg-rui-neutral-100 dark:bg-rui-neutral-950';\n\nexport const sliderStyles = tv({\n  slots: {\n    root: '',\n    wrapper: 'flex items-start',\n    // classes added to RuiFieldLabel, which carries the type and its neutral and disabled colors\n    label: '',\n    outer: 'relative h-8 flex-1 min-w-[7.5rem]',\n    inner: 'relative',\n    input: 'peer h-full w-full opacity-0 cursor-pointer',\n    // the range input is invisible, so its keyboard focus rings the thumb drawn over it\n    slider: 'absolute h-full w-full top-0 px-2 pointer-events-none peer-focus-visible:[&_[data-id=slider-thumb]]:focus-ring',\n    sliderInner: 'relative h-full w-full cursor-pointer',\n    // a quiet neutral rail in every color, so only the filled part and the thumb carry it; a step lighter in dark to stay findable\n    container: 'absolute top-1/2 -translate-y-1/2 w-full h-1.5 rounded-full bg-rui-neutral-200 dark:bg-rui-neutral-700',\n    track: 'transition-all ease-linear duration-75 h-full rounded-full',\n    ticks: 'h-full absolute top-0 flex justify-between items-center',\n    tick: 'rounded-full',\n    // a white knob with a colored edge, like the switch's, that gains a soft halo instead of growing\n    thumb: [\n      'absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-4 rounded-full',\n      'bg-white border-2 shadow-rui-control transition-[left,top,box-shadow] ease-linear duration-75',\n    ].join(' '),\n    thumbLabel: [\n      'invisible opacity-0',\n      'absolute -mt-7 transition-all ease-linear duration-75 -translate-x-1/2',\n      'px-2 py-1 text-xs font-normal',\n      'bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip',\n    ].join(' '),\n  },\n  variants: {\n    disabled: {\n      true: {\n        container: '!bg-rui-neutral-200 dark:!bg-rui-neutral-800',\n        track: '!bg-rui-neutral-400 dark:!bg-rui-neutral-600',\n        thumb: '!border-rui-neutral-400 dark:!border-rui-neutral-600 dark:!bg-rui-neutral-300 !ring-0',\n      },\n    },\n    vertical: {\n      true: {\n        // the label stays above, centred over the upright rail, which takes the height left under it\n        root: 'flex flex-col',\n        wrapper: 'flex-col-reverse items-center flex-1 min-h-0',\n        label: 'text-center',\n        outer: 'min-w-0 min-h-[7.5rem] w-8',\n        // turned about its top-left corner, then pushed down its own height back into the box\n        inner: '-rotate-90 translate-y-(--rui-slider-shift)',\n        thumbLabel: 'mt-6 rotate-90 translate-x-0 [transform-origin:0_50%]',\n      },\n    },\n    interaction: {\n      idle: {},\n      hover: { thumb: 'ring-4' },\n      // keyboard focus shows the value too, since arrow keys move the thumb without a press\n      focus: { thumbLabel: 'visible opacity-100' },\n      active: { thumb: 'ring-6', thumbLabel: 'visible opacity-100' },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n    bigTick: {\n      // small ticks sit inside the rail, whose rounded ends already mark the first and last stop\n      false: {\n        ticks: '[&>span:first-child]:invisible [&>span:last-child]:invisible',\n        // two shades off the rail in either theme, so a 2px dot still shows on the empty part\n        tick: 'bg-rui-neutral-500 dark:bg-rui-neutral-300',\n      },\n      true: {},\n    },\n    hasLabel: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundSlots: [\n    // The filled part takes the color's fill tone, which is the deep one for a status color in dark\n    { slots: ['track'], color: 'primary', class: 'bg-rui-primary-fill' },\n    { slots: ['track'], color: 'secondary', class: 'bg-rui-secondary-fill' },\n    { slots: ['track'], color: 'error', class: 'bg-rui-error-fill' },\n    { slots: ['track'], color: 'warning', class: 'bg-rui-warning-fill' },\n    { slots: ['track'], color: 'info', class: 'bg-rui-info-fill' },\n    { slots: ['track'], color: 'success', class: 'bg-rui-success-fill' },\n\n    // The thumb's edge and its hover halo\n    { slots: ['thumb'], color: 'primary', class: 'border-rui-primary-fill ring-rui-primary-soft' },\n    { slots: ['thumb'], color: 'secondary', class: 'border-rui-secondary-fill ring-rui-secondary-soft' },\n    { slots: ['thumb'], color: 'error', class: 'border-rui-error-fill ring-rui-error-soft' },\n    { slots: ['thumb'], color: 'warning', class: 'border-rui-warning-fill ring-rui-warning-soft' },\n    { slots: ['thumb'], color: 'info', class: 'border-rui-info-fill ring-rui-info-soft' },\n    { slots: ['thumb'], color: 'success', class: 'border-rui-success-fill ring-rui-success-soft' },\n  ],\n  compoundVariants: [\n    // Big tick: lighter default, color highlighted\n    { bigTick: true, color: 'primary', class: { tick: '!bg-rui-primary-lighter' } },\n    { bigTick: true, color: 'secondary', class: { tick: '!bg-rui-secondary-lighter' } },\n    { bigTick: true, color: 'error', class: { tick: '!bg-rui-error-lighter' } },\n    { bigTick: true, color: 'warning', class: { tick: '!bg-rui-warning-lighter' } },\n    { bigTick: true, color: 'info', class: { tick: '!bg-rui-info-lighter' } },\n    { bigTick: true, color: 'success', class: { tick: '!bg-rui-success-lighter' } },\n    // the rail sits mid-way down its 32px hit area, so a label above pulls that area up to keep the gap of a field\n    { vertical: false, hasLabel: true, class: { outer: '-mt-2' } },\n  ],\n  defaultVariants: {\n    interaction: 'idle',\n    color: 'primary',\n    bigTick: false,\n  },\n});\n"],"mappings":"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"}

package/dist/components/forms/switch/RuiSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSwitch.js","names":[],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  disabled = false,\n  color = undefined,\n  size = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst switchStyles = tv({\n  slots: {\n    wrapper: 'relative flex gap-2 items-start cursor-pointer group/switch',\n    inner: 'relative w-[2.6875rem] h-6 shrink-0',\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-grey-400 dark:bg-rui-grey-700 transition-all duration-75 ease-in-out cursor-pointer',\n    toggle: [\n      'absolute w-5 h-5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n      'bg-white left-0.5',\n      `before:content-[''] before:absolute before:size-10 before:bg-black dark:before:bg-white before:rounded-full`,\n      'before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:transition-all before:ease-in-out before:opacity-0',\n      'peer-active:before:opacity-20',\n      'group-hover/switch:shadow-1',\n    ].join(' '),\n    label: 'text-rui-text text-body-1',\n  },\n  variants: {\n    checked: {\n      true: {\n        toggle: 'left-[1.3125rem]',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: '!bg-rui-grey-300 dark:!bg-rui-grey-800 cursor-not-allowed',\n        toggle: '!bg-rui-grey-500 dark:!bg-rui-grey-600 before:!content-none group-hover/switch:!shadow-none',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-10 h-5 mt-0.5',\n        toggle: 'w-4 h-4 before:size-6',\n      },\n    },\n    validation: {\n      error: {\n        input: '!bg-rui-error dark:!bg-rui-error/[0.5]',\n        label: 'text-rui-error',\n        toggle: 'dark:!bg-rui-error',\n      },\n      success: {\n        input: '!bg-rui-success dark:!bg-rui-success/[0.5]',\n        label: 'text-rui-success',\n        toggle: 'dark:!bg-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Checked (no color): track + toggle dark mode\n    { checked: true, disabled: false, class: { input: 'bg-black dark:bg-white' } },\n    { checked: true, disabled: false, class: { toggle: 'dark:bg-black' } },\n\n    // Checked + color (light: track bg, dark: track bg/50 + toggle bg)\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary/[0.5]', toggle: 'dark:bg-rui-primary' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary/[0.5]', toggle: 'dark:bg-rui-secondary' } },\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error/[0.5]', toggle: 'dark:bg-rui-error' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning/[0.5]', toggle: 'dark:bg-rui-warning' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info/[0.5]', toggle: 'dark:bg-rui-info' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success/[0.5]', toggle: 'dark:bg-rui-success' } },\n\n    // Size sm + checked: different toggle position\n    { size: 'sm', checked: true, class: { toggle: 'left-[1.375rem]' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n  checked: get(modelValue),\n  disabled,\n  size,\n  validation: get(validation),\n  color,\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement)\n    set(modelValue, target.checked);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"modelValue || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"ui.inner()\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div :class=\"ui.toggle()\" />\n      </div>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSwitch.js","names":[],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  disabled = false,\n  color = undefined,\n  size = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst switchStyles = tv({\n  slots: {\n    // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n    wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n    // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n    inner: 'relative w-10 h-5.5 mt-px shrink-0',\n    // the off track is the control edge color, 3:1 against the page in both themes\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n    toggle: [\n      'absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n      'bg-white left-0.5 shadow-rui-control',\n    ].join(' '),\n    label: 'text-rui-text text-sm/6',\n  },\n  variants: {\n    checked: {\n      true: {\n        toggle: 'left-5',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n        toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-8.5 h-4.5 mt-0.75',\n        toggle: 'size-3.5',\n      },\n    },\n    // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n    validation: {\n      error: {\n        input: 'ring-1 ring-rui-error',\n      },\n      success: {\n        input: 'ring-1 ring-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n    // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n    { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n    // Checked + color: a solid track with the white knob, in both themes\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n    // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n    // Size sm + checked: 34 - 14 - 2\n    { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n  checked: get(modelValue),\n  disabled,\n  size,\n  validation: get(validation),\n  color,\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement)\n    set(modelValue, target.checked);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"modelValue || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"ui.inner()\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div :class=\"ui.toggle()\" />\n      </div>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          *\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js

@@ -54,45 +54,30 @@ var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const modelValue = useModel(__props, "modelValue");
 		const switchStyles = tv({
 			slots: {
-				wrapper: "relative flex gap-2 items-start cursor-pointer group/switch",
-				inner: "relative w-[2.6875rem] h-6 shrink-0",
-				input: "peer appearance-none relative w-full h-full rounded-full bg-rui-grey-400 dark:bg-rui-grey-700 transition-all duration-75 ease-in-out cursor-pointer",
-				toggle: [
-					"absolute w-5 h-5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none",
-					"bg-white left-0.5",
-					`before:content-[''] before:absolute before:size-10 before:bg-black dark:before:bg-white before:rounded-full`,
-					"before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:transition-all before:ease-in-out before:opacity-0",
-					"peer-active:before:opacity-20",
-					"group-hover/switch:shadow-1"
-				].join(" "),
-				label: "text-rui-text text-body-1"
+				wrapper: "relative flex gap-3.25 items-start cursor-pointer group/switch",
+				inner: "relative w-10 h-5.5 mt-px shrink-0",
+				input: "peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring",
+				toggle: ["absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none", "bg-white left-0.5 shadow-rui-control"].join(" "),
+				label: "text-rui-text text-sm/6"
 			},
 			variants: {
 				checked: {
-					true: { toggle: "left-[1.3125rem]" },
+					true: { toggle: "left-5" },
 					false: {}
 				},
 				disabled: { true: {
 					wrapper: "cursor-not-allowed",
-					input: "!bg-rui-grey-300 dark:!bg-rui-grey-800 cursor-not-allowed",
-					toggle: "!bg-rui-grey-500 dark:!bg-rui-grey-600 before:!content-none group-hover/switch:!shadow-none",
+					input: "bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed",
+					toggle: "bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!",
 					label: "text-rui-text-disabled"
 				} },
 				size: { sm: {
-					inner: "w-10 h-5 mt-0.5",
-					toggle: "w-4 h-4 before:size-6"
+					inner: "w-8.5 h-4.5 mt-0.75",
+					toggle: "size-3.5"
 				} },
 				validation: {
-					error: {
-						input: "!bg-rui-error dark:!bg-rui-error/[0.5]",
-						label: "text-rui-error",
-						toggle: "dark:!bg-rui-error"
-					},
-					success: {
-						input: "!bg-rui-success dark:!bg-rui-success/[0.5]",
-						label: "text-rui-success",
-						toggle: "dark:!bg-rui-success"
-					}
+					error: { input: "ring-1 ring-rui-error" },
+					success: { input: "ring-1 ring-rui-success" }
 				},
 				color: {
 					primary: {},
@@ -105,22 +90,25 @@ var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			},
 			compoundVariants: [
 				{
-					checked: true,
+					checked: false,
 					disabled: false,
-					class: { input: "bg-black dark:bg-white" }
+					class: { input: "group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400" }
 				},
 				{
 					checked: true,
 					disabled: false,
-					class: { toggle: "dark:bg-black" }
+					class: {
+						input: "bg-rui-neutral-900 dark:bg-rui-neutral-100",
+						toggle: "dark:bg-rui-neutral-900"
+					}
 				},
 				{
 					checked: true,
 					disabled: false,
 					color: "primary",
 					class: {
-						input: "bg-rui-primary dark:bg-rui-primary/[0.5]",
-						toggle: "dark:bg-rui-primary"
+						input: "bg-rui-primary dark:bg-rui-primary",
+						toggle: "dark:bg-white"
 					}
 				},
 				{
@@ -128,8 +116,8 @@ var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					disabled: false,
 					color: "secondary",
 					class: {
-						input: "bg-rui-secondary dark:bg-rui-secondary/[0.5]",
-						toggle: "dark:bg-rui-secondary"
+						input: "bg-rui-secondary dark:bg-rui-secondary",
+						toggle: "dark:bg-white"
 					}
 				},
 				{
@@ -137,8 +125,8 @@ var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					disabled: false,
 					color: "error",
 					class: {
-						input: "bg-rui-error dark:bg-rui-error/[0.5]",
-						toggle: "dark:bg-rui-error"
+						input: "bg-rui-error dark:bg-rui-error-darker",
+						toggle: "dark:bg-white"
 					}
 				},
 				{
@@ -146,8 +134,8 @@ var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					disabled: false,
 					color: "warning",
 					class: {
-						input: "bg-rui-warning dark:bg-rui-warning/[0.5]",
-						toggle: "dark:bg-rui-warning"
+						input: "bg-rui-warning dark:bg-rui-warning-darker",
+						toggle: "dark:bg-white"
 					}
 				},
 				{
@@ -155,8 +143,8 @@ var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					disabled: false,
 					color: "info",
 					class: {
-						input: "bg-rui-info dark:bg-rui-info/[0.5]",
-						toggle: "dark:bg-rui-info"
+						input: "bg-rui-info dark:bg-rui-info-darker",
+						toggle: "dark:bg-white"
 					}
 				},
 				{
@@ -164,14 +152,14 @@ var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					disabled: false,
 					color: "success",
 					class: {
-						input: "bg-rui-success dark:bg-rui-success/[0.5]",
-						toggle: "dark:bg-rui-success"
+						input: "bg-rui-success dark:bg-rui-success-darker",
+						toggle: "dark:bg-white"
 					}
 				},
 				{
 					size: "sm",
 					checked: true,
-					class: { toggle: "left-[1.375rem]" }
+					class: { toggle: "left-4.5" }
 				}
 			],
 			defaultVariants: {
@@ -206,7 +194,7 @@ var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}, unref(getNonRootAttrs)(_ctx.$attrs), { onInput: _cache[0] || (_cache[0] = ($event) => input($event)) }), null, 16, _hoisted_2), createElementVNode("div", { class: normalizeClass(unref(ui).toggle()) }, null, 2)], 2), __props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				class: normalizeClass(unref(ui).label())
-			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, " ﹡ ")) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 10, _hoisted_1), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, " * ")) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 10, _hoisted_1), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
 				key: 0,
 				class: "pt-1",
 				"error-messages": __props.errorMessages,

package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  disabled = false,\n  color = undefined,\n  size = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst switchStyles = tv({\n  slots: {\n    wrapper: 'relative flex gap-2 items-start cursor-pointer group/switch',\n    inner: 'relative w-[2.6875rem] h-6 shrink-0',\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-grey-400 dark:bg-rui-grey-700 transition-all duration-75 ease-in-out cursor-pointer',\n    toggle: [\n      'absolute w-5 h-5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n      'bg-white left-0.5',\n      `before:content-[''] before:absolute before:size-10 before:bg-black dark:before:bg-white before:rounded-full`,\n      'before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:transition-all before:ease-in-out before:opacity-0',\n      'peer-active:before:opacity-20',\n      'group-hover/switch:shadow-1',\n    ].join(' '),\n    label: 'text-rui-text text-body-1',\n  },\n  variants: {\n    checked: {\n      true: {\n        toggle: 'left-[1.3125rem]',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: '!bg-rui-grey-300 dark:!bg-rui-grey-800 cursor-not-allowed',\n        toggle: '!bg-rui-grey-500 dark:!bg-rui-grey-600 before:!content-none group-hover/switch:!shadow-none',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-10 h-5 mt-0.5',\n        toggle: 'w-4 h-4 before:size-6',\n      },\n    },\n    validation: {\n      error: {\n        input: '!bg-rui-error dark:!bg-rui-error/[0.5]',\n        label: 'text-rui-error',\n        toggle: 'dark:!bg-rui-error',\n      },\n      success: {\n        input: '!bg-rui-success dark:!bg-rui-success/[0.5]',\n        label: 'text-rui-success',\n        toggle: 'dark:!bg-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Checked (no color): track + toggle dark mode\n    { checked: true, disabled: false, class: { input: 'bg-black dark:bg-white' } },\n    { checked: true, disabled: false, class: { toggle: 'dark:bg-black' } },\n\n    // Checked + color (light: track bg, dark: track bg/50 + toggle bg)\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary/[0.5]', toggle: 'dark:bg-rui-primary' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary/[0.5]', toggle: 'dark:bg-rui-secondary' } },\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error/[0.5]', toggle: 'dark:bg-rui-error' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning/[0.5]', toggle: 'dark:bg-rui-warning' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info/[0.5]', toggle: 'dark:bg-rui-info' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success/[0.5]', toggle: 'dark:bg-rui-success' } },\n\n    // Size sm + checked: different toggle position\n    { size: 'sm', checked: true, class: { toggle: 'left-[1.375rem]' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n  checked: get(modelValue),\n  disabled,\n  size,\n  validation: get(validation),\n  color,\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement)\n    set(modelValue, target.checked);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"modelValue || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"ui.inner()\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div :class=\"ui.toggle()\" />\n      </div>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  disabled = false,\n  color = undefined,\n  size = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst switchStyles = tv({\n  slots: {\n    // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n    wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n    // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n    inner: 'relative w-10 h-5.5 mt-px shrink-0',\n    // the off track is the control edge color, 3:1 against the page in both themes\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n    toggle: [\n      'absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n      'bg-white left-0.5 shadow-rui-control',\n    ].join(' '),\n    label: 'text-rui-text text-sm/6',\n  },\n  variants: {\n    checked: {\n      true: {\n        toggle: 'left-5',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n        toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-8.5 h-4.5 mt-0.75',\n        toggle: 'size-3.5',\n      },\n    },\n    // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n    validation: {\n      error: {\n        input: 'ring-1 ring-rui-error',\n      },\n      success: {\n        input: 'ring-1 ring-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n    // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n    { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n    // Checked + color: a solid track with the white knob, in both themes\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n    // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n    // Size sm + checked: 34 - 14 - 2\n    { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n  checked: get(modelValue),\n  disabled,\n  size,\n  validation: get(validation),\n  color,\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement)\n    set(modelValue, target.checked);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"modelValue || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"ui.inner()\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div :class=\"ui.toggle()\" />\n      </div>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          *\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/text-area/RuiTextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTextArea.js","names":[],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { textAreaStyles, type TextAreaVariant } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: TextAreaVariant;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  noResize?: boolean;\n  minRows?: number | string;\n  maxRows?: number | string;\n  rowHeight?: number | string;\n  autoGrow?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextArea',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  variant = 'default',\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  noResize = false,\n  minRows = 2,\n  rowHeight = 1.5,\n  maxRows = undefined,\n  autoGrow = false,\n  required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n  'click:clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst { focused } = useFocus(textarea);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) || !!get(modelValue));\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n  variant,\n  dense,\n  disabled,\n  noResize,\n  hovered: get(isHovered),\n  focused: get(focused),\n  active: get(active),\n  noLabel: !label,\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n  showLabel: !!label,\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n  if (!get(active) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n  const height = Number(rowHeight);\n  const min = Number(minRows);\n  const max = Number(maxRows);\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n  if (!autoGrow)\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n  focus: () => get(textarea)?.focus(),\n  element: textarea,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"ui.wrapper()\"\n      :style=\"wrapperStyle\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div :class=\"ui.inputWrapper()\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"ui.textareaSizer()\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.textarea()\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <label :class=\"ui.label()\">\n          <span :class=\"ui.labelText()\">\n            {{ label }}\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          color=\"error\"\n          data-id=\"clear-btn\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"appendIcon\" />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTextArea.js","names":[],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textAreaStyles } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  noResize?: boolean;\n  minRows?: number | string;\n  maxRows?: number | string;\n  rowHeight?: number | string;\n  autoGrow?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextArea',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  noResize = false,\n  minRows = 2,\n  rowHeight = 1.5,\n  maxRows = undefined,\n  autoGrow = false,\n  required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n  'click:clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(textarea);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst textareaId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n  dense,\n  disabled,\n  readonly,\n  noResize,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n  const height = Number(rowHeight);\n  const min = Number(minRows);\n  const max = Number(maxRows);\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n  if (!autoGrow)\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n  focus: () => get(textarea)?.focus(),\n  element: textarea,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"textareaId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      :style=\"wrapperStyle\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div :class=\"ui.inputWrapper()\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"ui.textareaSizer()\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          :id=\"textareaId\"\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.textarea()\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}