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

package/dist/components/forms/text-input-styles.js

@@ -1,71 +1,32 @@
 import { tv } from "../../utils/tv.js";
 //#region src/components/forms/text-input-styles.ts
 /**
-* Shared underline pseudo-element classes for default and filled variants.
-* Used by TextField and TextArea label slots.
-*/
-var underlinePseudo = [
-	"border-b border-black/[0.42] dark:border-white/[0.42]",
-	"after:content-[''] after:absolute after:bottom-0 after:left-0 after:block after:w-full",
-	"after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300",
-	"after:border-black dark:after:border-white"
-].join(" ");
-/**
-* Shared base tv() for all text-input-family components.
-* Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.
-*
-* Provides the common core: floating label, fieldset/legend (outlined),
-* validation colors, disabled state, dark mode, and focus color.
-*
-* ## State approach (JS-driven for all 5 components)
-*
-* - `focused`: from useFocus (Group A) or computed from isOpen (Group B)
-* - `active`: focused || hasValue — drives label float
-* - `hovered`: mouseenter/mouseleave ref
-*
-* ## Legend content
-*
-* The legend's `after:content` uses CSS variable `--rui-legend`.
-* Bind via `:style="\{ '--rui-legend': labelWithQuote \}"` on the legend element.
+* The bordered box every text input draws: a `fieldset` laid over the field, so consumer overrides
+* that target `[&_fieldset]` keep working. Extended by RuiTextField and RuiTextArea; the activator
+* styles below carry their own copy, keyed by `opened` rather than `focused`.
 *
-* ## Compositing
+* The box is 1px in every state. Hover darkens it, focus colors it and adds a soft ring, and a
+* validation state colors both.
 *
-* The fieldset is forced onto its own GPU layer so the focused border is
-* rasterized on integer pixel boundaries. Without it, at fractional
-* y-coordinates with a non-integer device pixel ratio such as 1.25, Chromium
-* anti-aliases the 1.6-2px focus border across two physical pixel rows behind
-* the floated label, which shows up as two thin lines crossing it.
+* The fieldset is forced onto its own GPU layer so its border is rasterized on integer pixel
+* boundaries; at fractional y-coordinates with a device pixel ratio such as 1.25, Chromium otherwise
+* anti-aliases it across two physical pixel rows.
 */
 var textInputBase = tv({
-	slots: {
-		label: "text-rui-text-secondary transition-all duration-75",
-		fieldset: [
-			"absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0",
-			"rounded pointer-events-none px-2 transition-all -mt-2",
-			"border border-black/[0.23]",
-			"dark:border-white/[0.23]",
-			"transform-gpu"
-		].join(" "),
-		legend: "invisible text-[0.75rem] truncate [max-width:calc(100%-1rem)] leading-[0]"
-	},
+	slots: { fieldset: [
+		"absolute top-0 left-0 w-full h-full min-w-0",
+		"rounded-rui-control pointer-events-none transition-all",
+		"border border-rui-outline",
+		"transform-gpu"
+	].join(" ") },
 	variants: {
-		focused: { true: { fieldset: "!border-2" } },
-		hovered: { true: { fieldset: "border-black dark:border-white" } },
-		disabled: { true: {
-			fieldset: "!border-dotted !border-black/[0.23] dark:!border-white/[0.23]",
-			label: "text-rui-text-disabled"
-		} },
-		active: { true: {} },
-		showLabel: { true: {} },
+		hovered: { true: { fieldset: "border-rui-neutral-500 dark:border-rui-neutral-400" } },
+		focused: { true: { fieldset: "ring-3 ring-rui-primary/20" } },
+		disabled: { true: { fieldset: "!border-rui-divider" } },
+		readonly: { true: { fieldset: "border-dashed" } },
 		validation: {
-			error: {
-				fieldset: "!border-rui-error",
-				label: "!text-rui-error"
-			},
-			success: {
-				fieldset: "!border-rui-success",
-				label: "!text-rui-success"
-			}
+			error: { fieldset: "!border-rui-error ring-rui-error/20" },
+			success: { fieldset: "!border-rui-success ring-rui-success/20" }
 		},
 		color: {
 			primary: {},
@@ -77,11 +38,6 @@ var textInputBase = tv({
 		}
 	},
 	compoundVariants: [
-		{
-			showLabel: true,
-			active: true,
-			class: { legend: "px-2" }
-		},
 		{
 			focused: true,
 			color: "primary",
@@ -116,154 +72,68 @@ var textInputBase = tv({
 	defaultVariants: { color: "primary" }
 });
 /**
-* Shared tv() styles for the activator-based components (Group B):
-* MenuSelect, AutoComplete, DateTimePicker.
-*
-* IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.
-* Never put a class in the base slot that a variant needs to override.
+* Shared tv() styles for the activator-based components: RuiMenuSelect, RuiAutoComplete,
+* RuiDateTimePicker. A 36px box (32px dense) with 14px text whose content is centred, so only
+* wrapped tags grow it.
 *
-* State-driven via JS refs: `outlined`, `float` (open || hasValue),
-* `opened`, `disabled`, `readonly`, `dense`.
-*
-* The wrapper is `w-full inline-flex flex-col` so an activator fills its
-* parent whatever the context. A consumer's own width utility would normally
-* collide with `w-full` on the same element and lose to cascade order, so
-* RuiAutoComplete, RuiMenuSelect and RuiDateTimePicker route consumer classes
-* through `ui.wrapper(\{ class \})`, where twMerge deduplicates them and the
-* consumer's width wins.
+* The wrapper is `w-full inline-flex flex-col` so an activator fills its parent whatever the
+* context. A consumer's own width utility would normally collide with `w-full` on the same element
+* and lose to cascade order, so the components route consumer classes through
+* `ui.wrapper(\{ class \})`, where twMerge deduplicates them and the consumer's width wins.
 */
 var activatorStyles = tv({
-	extend: textInputBase,
 	slots: {
-		fieldset: "",
-		legend: "",
 		wrapper: "w-full inline-flex flex-col",
 		activator: [
 			"group relative inline-flex items-center w-full",
-			"outline-none focus:outline-none focus-within:outline-none cursor-pointer",
-			"min-h-14 pl-4 py-2 pr-8 rounded",
-			"m-0 transition-all text-body-1 text-left",
-			"dark:text-rui-text"
+			"outline-hidden focus:outline-hidden focus-within:outline-hidden cursor-pointer",
+			"min-h-9 py-0.5 pl-3 pr-8 rounded-rui-control",
+			"m-0 transition-colors duration-150 text-sm/5 text-left",
+			"bg-white dark:bg-transparent dark:text-rui-text border-none hover:border-none"
 		].join(" "),
-		label: ["text-rui-text-secondary [max-width:calc(100%-2.5rem)]", "block truncate transition-all duration-75"].join(" "),
-		value: "w-full block truncate transition-all duration-75",
-		clear: "ml-auto shrink-0 invisible group-hover:!visible",
+		fieldset: [
+			"absolute top-0 left-0 w-full h-full min-w-0",
+			"rounded-rui-control pointer-events-none transition-all",
+			"border border-rui-outline",
+			"transform-gpu"
+		].join(" "),
+		value: "w-full block truncate",
+		clear: ["ml-auto shrink-0 invisible group-hover:!visible", "text-rui-neutral-500 dark:text-rui-neutral-400 hover:text-rui-text dark:hover:text-rui-text"].join(" "),
 		menu: "overflow-y-auto max-h-60 min-w-[2.5rem]",
-		highlighted: "!bg-rui-grey-200 dark:!bg-rui-grey-800",
-		progress: "absolute left-0 bottom-0 w-full",
-		icon: "text-rui-text transition",
-		iconWrapper: "flex items-center justify-end absolute right-3 top-px bottom-0",
-		required: "text-rui-error"
+		highlighted: "!bg-rui-hover",
+		progress: "absolute inset-0 flex items-end overflow-hidden rounded-rui-control pointer-events-none [&_[data-id=progress-rail]]:bg-transparent",
+		icon: "text-rui-neutral-500 dark:text-rui-neutral-400 transition",
+		iconWrapper: "flex items-center justify-end absolute right-2 top-px bottom-0"
 	},
 	variants: {
-		dense: { true: { activator: "py-1.5 min-h-10" } },
-		disabled: { true: { activator: "opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none" } },
-		readonly: { true: { activator: "opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10" } },
-		filled: { true: { activator: [
-			"!rounded-t !rounded-b-none !bg-black/[0.06]",
-			"!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]",
-			"dark:!bg-white/[0.09]",
-			"dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]",
-			underlinePseudo
-		].join(" ") } },
-		outlined: {
-			true: {
-				activator: "bg-white dark:bg-transparent border-none hover:border-none",
-				label: "absolute",
-				fieldset: "!mt-0 !h-full"
-			},
-			false: { activator: `!rounded-none ${underlinePseudo}` }
-		},
-		float: { true: { label: "-translate-y-2 top-0 text-[0.75rem] leading-4" } },
-		opened: { true: { icon: "rotate-180" } },
-		active: { true: { highlighted: "!bg-rui-grey-300 dark:!bg-rui-grey-700" } },
-		hasError: { true: {} },
-		hasSuccess: { true: {} },
-		hovered: { true: {} },
-		showLabel: { true: {} }
+		dense: { true: { activator: "min-h-8" } },
+		disabled: { true: {
+			activator: "bg-rui-neutral-50 dark:bg-rui-neutral-900 text-rui-text-disabled dark:text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none",
+			icon: "text-rui-text-disabled dark:text-rui-text-disabled",
+			fieldset: "!border-rui-divider"
+		} },
+		readonly: { true: {
+			activator: "pointer-events-none cursor-default bg-rui-surface-muted dark:bg-rui-surface-muted",
+			fieldset: "border-dashed",
+			iconWrapper: "hidden"
+		} },
+		hovered: { true: { fieldset: "border-rui-neutral-500 dark:border-rui-neutral-400" } },
+		opened: { true: {
+			icon: "rotate-180",
+			fieldset: "!border-rui-primary ring-3 ring-rui-primary/20"
+		} },
+		hasError: { true: { fieldset: "!border-rui-error ring-rui-error/20" } },
+		hasSuccess: { true: { fieldset: "!border-rui-success ring-rui-success/20" } },
+		active: { true: { highlighted: "!bg-rui-pressed" } }
 	},
-	compoundVariants: [
-		{
-			float: true,
-			showLabel: true,
-			class: { legend: "px-2" }
-		},
-		{
-			outlined: false,
-			opened: true,
-			class: { activator: "after:scale-x-100 after:border-rui-primary" }
-		},
-		{
-			outlined: false,
-			hasError: true,
-			class: { activator: "after:scale-x-100 after:!border-rui-error" }
-		},
-		{
-			outlined: false,
-			hasSuccess: true,
-			class: { activator: "after:scale-x-100 after:!border-rui-success" }
-		},
-		{
-			outlined: false,
-			disabled: true,
-			class: { activator: "dark:bg-white/10" }
-		},
-		{
-			filled: true,
-			disabled: true,
-			class: { activator: "bg-black/[0.03] dark:bg-white/[0.05]" }
-		},
-		{
-			outlined: true,
-			hovered: true,
-			class: { fieldset: "border-black dark:border-white" }
-		},
-		{
-			outlined: true,
-			opened: true,
-			class: {
-				fieldset: "!border-rui-primary !border-2",
-				label: "text-rui-primary"
-			}
-		},
-		{
-			outlined: true,
-			hasError: true,
-			class: {
-				fieldset: "!border-rui-error",
-				label: "!text-rui-error"
-			}
-		},
-		{
-			outlined: true,
-			hasSuccess: true,
-			class: {
-				fieldset: "!border-rui-success",
-				label: "!text-rui-success"
-			}
-		},
-		{
-			outlined: true,
-			disabled: true,
-			class: { fieldset: "!border-dotted !border-black/[0.23] dark:!border-white/[0.23]" }
-		},
-		{
-			float: true,
-			opened: true,
-			class: { label: "text-rui-primary" }
-		}
-	],
 	defaultVariants: {
-		filled: false,
-		outlined: false,
 		dense: false,
 		disabled: false,
 		readonly: false,
-		float: false,
 		opened: false
 	}
 });
 //#endregion
-export { activatorStyles, textInputBase, underlinePseudo };
+export { activatorStyles, textInputBase };
 
 //# sourceMappingURL=text-input-styles.js.map

package/dist/components/forms/text-input-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const TextInputVariant = {\n  default: 'default',\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type TextInputVariant = (typeof TextInputVariant)[keyof typeof TextInputVariant];\n\n/**\n * Shared underline pseudo-element classes for default and filled variants.\n * Used by TextField and TextArea label slots.\n */\nexport const underlinePseudo = [\n  'border-b border-black/[0.42] dark:border-white/[0.42]',\n  'after:content-[\\'\\'] after:absolute after:bottom-0 after:left-0 after:block after:w-full',\n  'after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300',\n  'after:border-black dark:after:border-white',\n].join(' ');\n\n/**\n * Shared base tv() for all text-input-family components.\n * Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.\n *\n * Provides the common core: floating label, fieldset/legend (outlined),\n * validation colors, disabled state, dark mode, and focus color.\n *\n * ## State approach (JS-driven for all 5 components)\n *\n * - `focused`: from useFocus (Group A) or computed from isOpen (Group B)\n * - `active`: focused || hasValue — drives label float\n * - `hovered`: mouseenter/mouseleave ref\n *\n * ## Legend content\n *\n * The legend's `after:content` uses CSS variable `--rui-legend`.\n * Bind via `:style=\"\\{ '--rui-legend': labelWithQuote \\}\"` on the legend element.\n *\n * ## Compositing\n *\n * The fieldset is forced onto its own GPU layer so the focused border is\n * rasterized on integer pixel boundaries. Without it, at fractional\n * y-coordinates with a non-integer device pixel ratio such as 1.25, Chromium\n * anti-aliases the 1.6-2px focus border across two physical pixel rows behind\n * the floated label, which shows up as two thin lines crossing it.\n */\nexport const textInputBase = tv({\n  slots: {\n    label: 'text-rui-text-secondary transition-all duration-75',\n    fieldset: [\n      'absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0',\n      'rounded pointer-events-none px-2 transition-all -mt-2',\n      'border border-black/[0.23]',\n      'dark:border-white/[0.23]',\n      // translateZ(0) promotes this to its own layer, whose raster snaps to integer pixels\n      'transform-gpu',\n    ].join(' '),\n    legend: 'invisible text-[0.75rem] truncate [max-width:calc(100%-1rem)] leading-[0]',\n  },\n  variants: {\n    focused: {\n      true: {\n        fieldset: '!border-2',\n      },\n    },\n    hovered: {\n      true: {\n        fieldset: 'border-black dark:border-white',\n      },\n    },\n    disabled: {\n      true: {\n        fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    active: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    validation: {\n      error: {\n        fieldset: '!border-rui-error',\n        label: '!text-rui-error',\n      },\n      success: {\n        fieldset: '!border-rui-success',\n        label: '!text-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Legend padding only when label is floated (active + has label)\n    { showLabel: true, active: true, class: { legend: 'px-2' } },\n    // Focused + color → fieldset border takes the color\n    { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n    { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n    { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n    { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n    { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n    { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\n/**\n * Shared tv() styles for the activator-based components (Group B):\n * MenuSelect, AutoComplete, DateTimePicker.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.\n * Never put a class in the base slot that a variant needs to override.\n *\n * State-driven via JS refs: `outlined`, `float` (open || hasValue),\n * `opened`, `disabled`, `readonly`, `dense`.\n *\n * The wrapper is `w-full inline-flex flex-col` so an activator fills its\n * parent whatever the context. A consumer's own width utility would normally\n * collide with `w-full` on the same element and lose to cascade order, so\n * RuiAutoComplete, RuiMenuSelect and RuiDateTimePicker route consumer classes\n * through `ui.wrapper(\\{ class \\})`, where twMerge deduplicates them and the\n * consumer's width wins.\n */\nexport const activatorStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference\n    fieldset: '',\n    legend: '',\n    wrapper: 'w-full inline-flex flex-col',\n    activator: [\n      'group relative inline-flex items-center w-full',\n      'outline-none focus:outline-none focus-within:outline-none cursor-pointer',\n      'min-h-14 pl-4 py-2 pr-8 rounded',\n      'm-0 transition-all text-body-1 text-left',\n      'dark:text-rui-text',\n    ].join(' '),\n    label: [\n      'text-rui-text-secondary [max-width:calc(100%-2.5rem)]',\n      'block truncate transition-all duration-75',\n    ].join(' '),\n    value: 'w-full block truncate transition-all duration-75',\n    clear: 'ml-auto shrink-0 invisible group-hover:!visible',\n    menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n    highlighted: '!bg-rui-grey-200 dark:!bg-rui-grey-800',\n    progress: 'absolute left-0 bottom-0 w-full',\n    icon: 'text-rui-text transition',\n    iconWrapper: 'flex items-center justify-end absolute right-3 top-px bottom-0',\n    required: 'text-rui-error',\n  },\n  variants: {\n    dense: {\n      true: {\n        activator: 'py-1.5 min-h-10',\n      },\n    },\n    disabled: {\n      true: {\n        activator: 'opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n      },\n    },\n    readonly: {\n      true: {\n        activator: 'opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10',\n      },\n    },\n    filled: {\n      true: {\n        activator: [\n          '!rounded-t !rounded-b-none !bg-black/[0.06]',\n          '!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]',\n          'dark:!bg-white/[0.09]',\n          'dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]',\n          underlinePseudo,\n        ].join(' '),\n      },\n    },\n    outlined: {\n      true: {\n        activator: 'bg-white dark:bg-transparent border-none hover:border-none',\n        label: 'absolute',\n        fieldset: '!mt-0 !h-full',\n      },\n      false: {\n        activator: `!rounded-none ${underlinePseudo}`,\n      },\n    },\n    float: {\n      true: {\n        label: '-translate-y-2 top-0 text-[0.75rem] leading-4',\n      },\n    },\n    opened: {\n      true: {\n        icon: 'rotate-180',\n      },\n    },\n    active: {\n      true: {\n        highlighted: '!bg-rui-grey-300 dark:!bg-rui-grey-700',\n      },\n    },\n    hasError: {\n      true: {},\n    },\n    hasSuccess: {\n      true: {},\n    },\n    // Re-declare for type inference — actual styles are in textInputBase\n    hovered: { true: {} },\n    showLabel: { true: {} },\n  },\n  compoundVariants: [\n    // Legend padding when a label is floated; without text it would cut an empty notch\n    { float: true, showLabel: true, class: { legend: 'px-2' } },\n\n    // Non-outlined + opened → underline scales up\n    { outlined: false, opened: true, class: { activator: 'after:scale-x-100 after:border-rui-primary' } },\n\n    // Non-outlined + error → underline color\n    { outlined: false, hasError: true, class: { activator: 'after:scale-x-100 after:!border-rui-error' } },\n\n    // Non-outlined + success → underline color\n    { outlined: false, hasSuccess: true, class: { activator: 'after:scale-x-100 after:!border-rui-success' } },\n\n    // Non-outlined + disabled in dark mode\n    { outlined: false, disabled: true, class: { activator: 'dark:bg-white/10' } },\n\n    // Filled + disabled\n    { filled: true, disabled: true, class: { activator: 'bg-black/[0.03] dark:bg-white/[0.05]' } },\n\n    // Outlined + hovered → fieldset border\n    { outlined: true, hovered: true, class: { fieldset: 'border-black dark:border-white' } },\n\n    // Outlined + opened/focused → primary border\n    { outlined: true, opened: true, class: {\n      fieldset: '!border-rui-primary !border-2',\n      label: 'text-rui-primary',\n    } },\n\n    // Outlined + error → fieldset + label\n    { outlined: true, hasError: true, class: {\n      fieldset: '!border-rui-error',\n      label: '!text-rui-error',\n    } },\n    // Outlined + success → fieldset + label\n    { outlined: true, hasSuccess: true, class: {\n      fieldset: '!border-rui-success',\n      label: '!text-rui-success',\n    } },\n\n    // Outlined + disabled → dotted fieldset\n    { outlined: true, disabled: true, class: {\n      fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n    } },\n\n    // Float + opened → label color\n    { float: true, opened: true, class: { label: 'text-rui-primary' } },\n  ],\n  defaultVariants: {\n    filled: false,\n    outlined: false,\n    dense: false,\n    disabled: false,\n    readonly: false,\n    float: false,\n    opened: false,\n  },\n});\n"],"mappings":";;;;;;AAcA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BV,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,OAAO;EACP,UAAU;GACR;GACA;GACA;GACA;GAEA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,QAAQ;CACV;CACA,UAAU;EACR,SAAS,EACP,MAAM,EACJ,UAAU,YACZ,EACF;EACA,SAAS,EACP,MAAM,EACJ,UAAU,iCACZ,EACF;EACA,UAAU,EACR,MAAM;GACJ,UAAU;GACV,OAAO;EACT,EACF;EACA,QAAQ,EACN,MAAM,CAAC,EACT;EACA,WAAW,EACT,MAAM,CAAC,EACT;EACA,YAAY;GACV,OAAO;IACL,UAAU;IACV,OAAO;GACT;GACA,SAAS;IACP,UAAU;IACV,OAAO;GACT;EACF;EACA,OAAO;GACL,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAEhB;GAAE,WAAW;GAAM,QAAQ;GAAM,OAAO,EAAE,QAAQ,OAAO;EAAE;EAE3D;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;EAC9E;GAAE,SAAS;GAAM,OAAO;GAAa,OAAO,EAAE,UAAU,wBAAwB;EAAE;EAClF;GAAE,SAAS;GAAM,OAAO;GAAS,OAAO,EAAE,UAAU,oBAAoB;EAAE;EAC1E;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;EAC9E;GAAE,SAAS;GAAM,OAAO;GAAQ,OAAO,EAAE,UAAU,mBAAmB;EAAE;EACxE;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;CAChF;CACA,iBAAiB,EACf,OAAO,UACT;AACF,CAAC;;;;;;;;;;;;;;;;;;AAmBD,IAAa,kBAAkB,GAAG;CAChC,QAAQ;CACR,OAAO;EAEL,UAAU;EACV,QAAQ;EACR,SAAS;EACT,WAAW;GACT;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO,CACL,yDACA,2CACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;EACP,OAAO;EACP,MAAM;EACN,aAAa;EACb,UAAU;EACV,MAAM;EACN,aAAa;EACb,UAAU;CACZ;CACA,UAAU;EACR,OAAO,EACL,MAAM,EACJ,WAAW,kBACb,EACF;EACA,UAAU,EACR,MAAM,EACJ,WAAW,qGACb,EACF;EACA,UAAU,EACR,MAAM,EACJ,WAAW,4EACb,EACF;EACA,QAAQ,EACN,MAAM,EACJ,WAAW;GACT;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG,EACZ,EACF;EACA,UAAU;GACR,MAAM;IACJ,WAAW;IACX,OAAO;IACP,UAAU;GACZ;GACA,OAAO,EACL,WAAW,iBAAiB,kBAC9B;EACF;EACA,OAAO,EACL,MAAM,EACJ,OAAO,gDACT,EACF;EACA,QAAQ,EACN,MAAM,EACJ,MAAM,aACR,EACF;EACA,QAAQ,EACN,MAAM,EACJ,aAAa,yCACf,EACF;EACA,UAAU,EACR,MAAM,CAAC,EACT;EACA,YAAY,EACV,MAAM,CAAC,EACT;EAEA,SAAS,EAAE,MAAM,CAAC,EAAE;EACpB,WAAW,EAAE,MAAM,CAAC,EAAE;CACxB;CACA,kBAAkB;EAEhB;GAAE,OAAO;GAAM,WAAW;GAAM,OAAO,EAAE,QAAQ,OAAO;EAAE;EAG1D;GAAE,UAAU;GAAO,QAAQ;GAAM,OAAO,EAAE,WAAW,6CAA6C;EAAE;EAGpG;GAAE,UAAU;GAAO,UAAU;GAAM,OAAO,EAAE,WAAW,4CAA4C;EAAE;EAGrG;GAAE,UAAU;GAAO,YAAY;GAAM,OAAO,EAAE,WAAW,8CAA8C;EAAE;EAGzG;GAAE,UAAU;GAAO,UAAU;GAAM,OAAO,EAAE,WAAW,mBAAmB;EAAE;EAG5E;GAAE,QAAQ;GAAM,UAAU;GAAM,OAAO,EAAE,WAAW,uCAAuC;EAAE;EAG7F;GAAE,UAAU;GAAM,SAAS;GAAM,OAAO,EAAE,UAAU,iCAAiC;EAAE;EAGvF;GAAE,UAAU;GAAM,QAAQ;GAAM,OAAO;IACrC,UAAU;IACV,OAAO;GACT;EAAE;EAGF;GAAE,UAAU;GAAM,UAAU;GAAM,OAAO;IACvC,UAAU;IACV,OAAO;GACT;EAAE;EAEF;GAAE,UAAU;GAAM,YAAY;GAAM,OAAO;IACzC,UAAU;IACV,OAAO;GACT;EAAE;EAGF;GAAE,UAAU;GAAM,UAAU;GAAM,OAAO,EACvC,UAAU,gEACZ;EAAE;EAGF;GAAE,OAAO;GAAM,QAAQ;GAAM,OAAO,EAAE,OAAO,mBAAmB;EAAE;CACpE;CACA,iBAAiB;EACf,QAAQ;EACR,UAAU;EACV,OAAO;EACP,UAAU;EACV,UAAU;EACV,OAAO;EACP,QAAQ;CACV;AACF,CAAC"}
+{"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The bordered box every text input draws: a `fieldset` laid over the field, so consumer overrides\n * that target `[&_fieldset]` keep working. Extended by RuiTextField and RuiTextArea; the activator\n * styles below carry their own copy, keyed by `opened` rather than `focused`.\n *\n * The box is 1px in every state. Hover darkens it, focus colors it and adds a soft ring, and a\n * validation state colors both.\n *\n * The fieldset is forced onto its own GPU layer so its border is rasterized on integer pixel\n * boundaries; at fractional y-coordinates with a device pixel ratio such as 1.25, Chromium otherwise\n * anti-aliases it across two physical pixel rows.\n */\nexport const textInputBase = tv({\n  slots: {\n    fieldset: [\n      'absolute top-0 left-0 w-full h-full min-w-0',\n      'rounded-rui-control pointer-events-none transition-all',\n      'border border-rui-outline',\n      'transform-gpu',\n    ].join(' '),\n  },\n  variants: {\n    // a step past the 3:1 resting edge; a disabled field drops to the divider, as nothing to act on\n    hovered: {\n      true: { fieldset: 'border-rui-neutral-500 dark:border-rui-neutral-400' },\n    },\n    focused: {\n      true: { fieldset: 'ring-3 ring-rui-primary/20' },\n    },\n    disabled: {\n      true: { fieldset: '!border-rui-divider' },\n    },\n    // a dashed edge marks a value that can be read and copied but not changed; the fill sits on the wrapper\n    readonly: {\n      true: { fieldset: 'border-dashed' },\n    },\n    validation: {\n      error: { fieldset: '!border-rui-error ring-rui-error/20' },\n      success: { fieldset: '!border-rui-success ring-rui-success/20' },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n    { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n    { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n    { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n    { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n    { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\n/**\n * Shared tv() styles for the activator-based components: RuiMenuSelect, RuiAutoComplete,\n * RuiDateTimePicker. A 36px box (32px dense) with 14px text whose content is centred, so only\n * wrapped tags grow it.\n *\n * The wrapper is `w-full inline-flex flex-col` so an activator fills its parent whatever the\n * context. A consumer's own width utility would normally collide with `w-full` on the same element\n * and lose to cascade order, so the components route consumer classes through\n * `ui.wrapper(\\{ class \\})`, where twMerge deduplicates them and the consumer's width wins.\n */\nexport const activatorStyles = tv({\n  slots: {\n    wrapper: 'w-full inline-flex flex-col',\n    activator: [\n      'group relative inline-flex items-center w-full',\n      'outline-hidden focus:outline-hidden focus-within:outline-hidden cursor-pointer',\n      'min-h-9 py-0.5 pl-3 pr-8 rounded-rui-control',\n      'm-0 transition-colors duration-150 text-sm/5 text-left',\n      'bg-white dark:bg-transparent dark:text-rui-text border-none hover:border-none',\n    ].join(' '),\n    fieldset: [\n      'absolute top-0 left-0 w-full h-full min-w-0',\n      'rounded-rui-control pointer-events-none transition-all',\n      'border border-rui-outline',\n      'transform-gpu',\n    ].join(' '),\n    value: 'w-full block truncate',\n    // the field icons' muted tone, darkening on hover; the glyph is 16px in every field\n    clear: [\n      'ml-auto shrink-0 invisible group-hover:!visible',\n      'text-rui-neutral-500 dark:text-rui-neutral-400 hover:text-rui-text dark:hover:text-rui-text',\n    ].join(' '),\n    menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n    // the grey list button's hover and active tints, so options and menu buttons highlight alike\n    highlighted: '!bg-rui-hover',\n    /*\n     * Covers the field and clips to its corners, so the bar along the bottom edge follows the rounding.\n     * The rail is dropped: a grey band over the field's border read as a thick, shadowed edge.\n     */\n    progress: 'absolute inset-0 flex items-end overflow-hidden rounded-rui-control pointer-events-none [&_[data-id=progress-rail]]:bg-transparent',\n    icon: 'text-rui-neutral-500 dark:text-rui-neutral-400 transition',\n    iconWrapper: 'flex items-center justify-end absolute right-2 top-px bottom-0',\n  },\n  variants: {\n    dense: {\n      true: { activator: 'min-h-8' },\n    },\n    // the dark text color is restated, since the base `dark:text-rui-text` outranks a plain color\n    disabled: {\n      true: {\n        activator: 'bg-rui-neutral-50 dark:bg-rui-neutral-900 text-rui-text-disabled dark:text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n        icon: 'text-rui-text-disabled dark:text-rui-text-disabled',\n        fieldset: '!border-rui-divider',\n      },\n    },\n    /*\n     * The muted fill reads against the page and the card in both themes, so its dark value is restated\n     * over the base `dark:bg-transparent`; the edge goes dashed and the text keeps its full color.\n     * Nothing opens, so the chevron is dropped.\n     */\n    readonly: {\n      true: {\n        activator: 'pointer-events-none cursor-default bg-rui-surface-muted dark:bg-rui-surface-muted',\n        fieldset: 'border-dashed',\n        iconWrapper: 'hidden',\n      },\n    },\n    hovered: {\n      true: { fieldset: 'border-rui-neutral-500 dark:border-rui-neutral-400' },\n    },\n    opened: {\n      true: {\n        icon: 'rotate-180',\n        fieldset: '!border-rui-primary ring-3 ring-rui-primary/20',\n      },\n    },\n    hasError: {\n      true: { fieldset: '!border-rui-error ring-rui-error/20' },\n    },\n    hasSuccess: {\n      true: { fieldset: '!border-rui-success ring-rui-success/20' },\n    },\n    active: {\n      true: { highlighted: '!bg-rui-pressed' },\n    },\n  },\n  defaultVariants: {\n    dense: false,\n    disabled: false,\n    readonly: false,\n    opened: false,\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,gBAAgB,GAAG;CAC9B,OAAO,EACL,UAAU;EACR;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,UAAU;EAER,SAAS,EACP,MAAM,EAAE,UAAU,qDAAqD,EACzE;EACA,SAAS,EACP,MAAM,EAAE,UAAU,6BAA6B,EACjD;EACA,UAAU,EACR,MAAM,EAAE,UAAU,sBAAsB,EAC1C;EAEA,UAAU,EACR,MAAM,EAAE,UAAU,gBAAgB,EACpC;EACA,YAAY;GACV,OAAO,EAAE,UAAU,sCAAsC;GACzD,SAAS,EAAE,UAAU,0CAA0C;EACjE;EACA,OAAO;GACL,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;EAC9E;GAAE,SAAS;GAAM,OAAO;GAAa,OAAO,EAAE,UAAU,wBAAwB;EAAE;EAClF;GAAE,SAAS;GAAM,OAAO;GAAS,OAAO,EAAE,UAAU,oBAAoB;EAAE;EAC1E;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;EAC9E;GAAE,SAAS;GAAM,OAAO;GAAQ,OAAO,EAAE,UAAU,mBAAmB;EAAE;EACxE;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,sBAAsB;EAAE;CAChF;CACA,iBAAiB,EACf,OAAO,UACT;AACF,CAAC;;;;;;;;;;;AAYD,IAAa,kBAAkB,GAAG;CAChC,OAAO;EACL,SAAS;EACT,WAAW;GACT;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,UAAU;GACR;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;EAEP,OAAO,CACL,mDACA,6FACF,CAAC,CAAC,KAAK,GAAG;EACV,MAAM;EAEN,aAAa;EAKb,UAAU;EACV,MAAM;EACN,aAAa;CACf;CACA,UAAU;EACR,OAAO,EACL,MAAM,EAAE,WAAW,UAAU,EAC/B;EAEA,UAAU,EACR,MAAM;GACJ,WAAW;GACX,MAAM;GACN,UAAU;EACZ,EACF;EAMA,UAAU,EACR,MAAM;GACJ,WAAW;GACX,UAAU;GACV,aAAa;EACf,EACF;EACA,SAAS,EACP,MAAM,EAAE,UAAU,qDAAqD,EACzE;EACA,QAAQ,EACN,MAAM;GACJ,MAAM;GACN,UAAU;EACZ,EACF;EACA,UAAU,EACR,MAAM,EAAE,UAAU,sCAAsC,EAC1D;EACA,YAAY,EACV,MAAM,EAAE,UAAU,0CAA0C,EAC9D;EACA,QAAQ,EACN,MAAM,EAAE,aAAa,kBAAkB,EACzC;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;EACV,UAAU;EACV,QAAQ;CACV;AACF,CAAC"}

package/dist/components/helpers/RuiFormTextDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFormTextDetail.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-[1.5rem]\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFormTextDetail.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-6\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":""}

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { TransitionGroup, createBlock, createCommentVNode, createElementBlock, d
 //#region src/components/helpers/RuiFormTextDetail.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: "error",
-	class: "text-rui-error text-caption"
+	class: "text-rui-error dark:text-rui-error-lighter text-caption"
 };
 var _hoisted_2 = {
 	key: "success",
@@ -25,7 +25,7 @@ var RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(TransitionGroup, {
 				tag: "div",
-				class: "details min-h-[1.5rem]",
+				class: "details min-h-6",
 				"enter-from-class": "opacity-0 -translate-y-2 h-0",
 				"enter-active-class": "transform transition",
 				"enter-to-class": "opacity-100 translate-y-0",

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-[1.5rem]\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,eACR;;GAIA,OAAA,UAAA,GAAA,YAgCkB,iBAAA;IA/BhB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,QAAA;;IAEA,SAAA,cAMM,CALE,MAAA,QAAA,KADR,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,sBAAA,CAAsB,CAAA,EAAA,GAAA,CAAA,KAGd,MAAA,UAAA,KADb,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,wBAAA,CAAwB,CAAA,EAAA,GAAA,CAAA,KAGhB,QAAA,QADb,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,QAAA,IAAI,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-6\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,eACR;;GAIA,OAAA,UAAA,GAAA,YAgCkB,iBAAA;IA/BhB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,QAAA;;IAEA,SAAA,cAMM,CALE,MAAA,QAAA,KADR,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,sBAAA,CAAsB,CAAA,EAAA,GAAA,CAAA,KAGd,MAAA,UAAA,KADb,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,wBAAA,CAAwB,CAAA,EAAA,GAAA,CAAA,KAGhB,QAAA,QADb,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,QAAA,IAAI,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/icons/RuiIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long flex-grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiIcon.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":""}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js

@@ -5,10 +5,14 @@ import { get, objectOmit } from "@vueuse/shared";
 //#region src/components/icons/RuiIcon.vue?vue&type=script&setup=true&lang.ts
 /**
 * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is
-* never wanted: `shrink-0` keeps the size beside a long flex-grow sibling,
+* never wanted: `shrink-0` keeps the size beside a long grow sibling,
 * such as a `w-full` button label in `variant="list"`. Without it the svg is
 * compressed along the main axis while its height stays put, drawing a sliver
 * of a glyph.
+*
+* The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.
+* Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a
+* single, blurry pixel.
 */
 var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiIcon",
@@ -22,7 +26,7 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 	setup(__props) {
 		const { registeredIcons } = useIcons();
 		const iconStyles = tv({
-			base: "shrink-0 w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]",
+			base: "shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]",
 			variants: { color: {
 				primary: "text-rui-primary",
 				secondary: "text-rui-secondary",
@@ -80,7 +84,6 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				return openBlock(), createBlock(resolveDynamicComponent(component[0]), mergeProps({ key: index }, { ref_for: true }, component[1], {
 					fill: !unref(isFill) ? "none" : "currentColor",
 					stroke: !unref(isFill) ? "currentColor" : "none",
-					"stroke-width": "2",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round",
 					"fill-rule": "evenodd",

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long flex-grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,EAAE,oBAAoB,SAAS;EAWrC,MAAM,aAAa,GAAG;GACpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;EAED,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,OAAO,CAAC;;;;;;;;;;EAW7D,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAsBM,OAtBN,WAsBM;IArBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGA,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAO,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;GACE,GAAA,MAAA,UAAA,CAAU,CAACA,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAEzB,UAAA,IAAA,GAAA,mBAYE,UAAA,MAAA,WAV6B,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,OAAA,UAAA,GAAA,YAYE,wBAXK,UAAS,EAAA,GADhB,WAYE,EATC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,MAAA,IAAM,SAAA;KACb,QAAM,CAAG,MAAA,MAAA,IAAM,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}
+{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,EAAE,oBAAoB,SAAS;EAerC,MAAM,aAAa,GAAG;GACpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;EAED,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,OAAO,CAAC;;;;;;;;;;EAW7D,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAqBM,OArBN,WAqBM;IApBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGA,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAO,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;GACE,GAAA,MAAA,UAAA,CAAU,CAACA,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAEzB,UAAA,IAAA,GAAA,mBAWE,UAAA,MAAA,WAT6B,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,OAAA,UAAA,GAAA,YAWE,wBAVK,UAAS,EAAA,GADhB,WAWE,EARC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,MAAA,IAAM,SAAA;KACb,QAAM,CAAG,MAAA,MAAA,IAAM,iBAAA;KAChB,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+import type { AutoCompleteProps, RuiAutoCompleteClassNames } from './forms/auto-complete/auto-complete-props';
 import type { TableColumn as DataTableColumn, GroupKeys as DataTableGroupKeys, SortColumn as DataTableSortColumn, TableSortData as DataTableSortData, GroupData } from './tables/RuiTableHead.vue';
 import RuiAccordion, { type AccordionProps, type RuiAccordionClassNames } from './accordions/accordion/RuiAccordion.vue';
 import RuiAccordions, { type Props as AccordionsProps } from './accordions/accordions/RuiAccordions.vue';
@@ -14,10 +15,11 @@ import RuiColorPicker from './color-picker/RuiColorPicker.vue';
 import RuiDateTimePicker, { type RuiDateTimePickerProps } from './date-time-picker/RuiDateTimePicker.vue';
 import RuiTimezoneSelect, { type RuiTimezoneSelectProps } from './date-time-picker/RuiTimezoneSelect.vue';
 import RuiDivider, { type Props as DividerProps } from './divider/RuiDivider.vue';
-import RuiAutoComplete, { type AutoCompleteProps, type RuiAutoCompleteClassNames } from './forms/auto-complete/RuiAutoComplete.vue';
+import RuiAutoComplete from './forms/auto-complete/RuiAutoComplete.vue';
 import RuiCategoryPicker, { type RuiCategoryPickerClassNames, type RuiCategoryPickerProps } from './forms/category-picker/RuiCategoryPicker.vue';
 import RuiCheckboxGroup, { type Props as CheckboxGroupProps } from './forms/checkbox/checkbox-group/RuiCheckboxGroup.vue';
 import RuiCheckbox, { type Props as CheckboxProps } from './forms/checkbox/RuiCheckbox.vue';
+import RuiFieldDefaults, { type FieldDefaultsProps } from './forms/field-defaults/RuiFieldDefaults.vue';
 import RuiFileUpload, { type FileUploadProps } from './forms/file-upload/RuiFileUpload.vue';
 import RuiRadioGroup, { type Props as RadioGroupProps } from './forms/radio-button/radio-group/RuiRadioGroup.vue';
 import RuiRadio, { type RadioProps } from './forms/radio-button/radio/RuiRadio.vue';
@@ -53,5 +55,5 @@ import RuiTabItems from './tabs/tab-items/RuiTabItems.vue';
 import RuiTab, { type RuiTabClassNames, type Props as TabProps } from './tabs/tab/RuiTab.vue';
 import RuiTabs, { type Props as TabsProps } from './tabs/tabs/RuiTabs.vue';
 import RuiTimePicker, { type RuiTimePickerProps } from './time-picker/RuiTimePicker.vue';
-export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, AvatarGroupProps, AvatarProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FileUploadProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiCategoryPickerClassNames, RuiCategoryPickerProps, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuRole, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTimezoneSelectProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TableEmpty, TableEmptyStateProps, TableErrorStateProps, TableLoadingStateProps, TablePaginationData, TablePaginationProps, TableProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
-export { RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiAvatar, RuiAvatarGroup, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCategoryPicker, RuiCheckbox, RuiCheckboxGroup, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDialog, RuiDivider, RuiFileUpload, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTable, RuiTableEmptyState, RuiTableErrorState, RuiTableLoadingState, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTimezoneSelect, RuiTooltip, };
+export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, AvatarGroupProps, AvatarProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FieldDefaultsProps, FileUploadProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiCategoryPickerClassNames, RuiCategoryPickerProps, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuRole, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTimezoneSelectProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TableEmpty, TableEmptyStateProps, TableErrorStateProps, TableLoadingStateProps, TablePaginationData, TablePaginationProps, TableProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
+export { RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiAvatar, RuiAvatarGroup, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCategoryPicker, RuiCheckbox, RuiCheckboxGroup, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDialog, RuiDivider, RuiFieldDefaults, RuiFileUpload, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTable, RuiTableEmptyState, RuiTableErrorState, RuiTableLoadingState, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTimezoneSelect, RuiTooltip, };

package/dist/components/index.js

@@ -14,6 +14,8 @@ import RuiCard_default from "./cards/RuiCard.js";
 import RuiChip_default from "./chips/RuiChip.js";
 import RuiTooltip_default from "./overlays/tooltip/RuiTooltip.js";
 import RuiTextField_default from "./forms/text-field/RuiTextField.js";
+import RuiTab_default from "./tabs/tab/RuiTab.js";
+import RuiTabs_default from "./tabs/tabs/RuiTabs.js";
 import RuiColorPicker_default from "./color-picker/RuiColorPicker.js";
 import RuiAutoComplete_default from "./forms/auto-complete/RuiAutoComplete.js";
 import RuiTimezoneSelect_default from "./date-time-picker/RuiTimezoneSelect.js";
@@ -24,6 +26,7 @@ import RuiDialog_default from "./overlays/dialog/RuiDialog.js";
 import RuiCategoryPicker_default from "./forms/category-picker/RuiCategoryPicker.js";
 import RuiCheckboxGroup_default from "./forms/checkbox/checkbox-group/RuiCheckboxGroup.js";
 import RuiCheckbox_default from "./forms/checkbox/RuiCheckbox.js";
+import RuiFieldDefaults_default from "./forms/field-defaults/RuiFieldDefaults.js";
 import RuiFileUpload_default from "./forms/file-upload/RuiFileUpload.js";
 import RuiRadioGroup_default from "./forms/radio-button/radio-group/RuiRadioGroup.js";
 import RuiRadio_default from "./forms/radio-button/radio/RuiRadio.js";
@@ -50,6 +53,4 @@ import RuiDataTable_default from "./tables/RuiDataTable.js";
 import RuiTable_default from "./tables/RuiTable.js";
 import RuiTabItem_default from "./tabs/tab-item/RuiTabItem.js";
 import RuiTabItems_default from "./tabs/tab-items/RuiTabItems.js";
-import RuiTab_default from "./tabs/tab/RuiTab.js";
-import RuiTabs_default from "./tabs/tabs/RuiTabs.js";
-export { RuiAccordion_default as RuiAccordion, RuiAccordions_default as RuiAccordions, RuiAlert_default as RuiAlert, RuiAutoComplete_default as RuiAutoComplete, RuiAvatar_default as RuiAvatar, RuiAvatarGroup_default as RuiAvatarGroup, RuiBadge_default as RuiBadge, RuiBottomSheet_default as RuiBottomSheet, RuiButton_default as RuiButton, RuiButtonGroup_default as RuiButtonGroup, RuiCalendar_default as RuiCalendar, RuiCard_default as RuiCard, RuiCardHeader_default as RuiCardHeader, RuiCategoryPicker_default as RuiCategoryPicker, RuiCheckbox_default as RuiCheckbox, RuiCheckboxGroup_default as RuiCheckboxGroup, RuiChip_default as RuiChip, RuiColorPicker_default as RuiColorPicker, RuiDataTable_default as RuiDataTable, RuiDateTimePicker_default as RuiDateTimePicker, RuiDialog_default as RuiDialog, RuiDivider_default as RuiDivider, RuiFileUpload_default as RuiFileUpload, RuiFooterStepper_default as RuiFooterStepper, RuiIcon_default as RuiIcon, RuiLogo_default as RuiLogo, RuiMenu_default as RuiMenu, RuiMenuSelect_default as RuiMenuSelect, RuiNavigationDrawer_default as RuiNavigationDrawer, RuiNotification_default as RuiNotification, RuiProgress_default as RuiProgress, RuiRadio_default as RuiRadio, RuiRadioGroup_default as RuiRadioGroup, RuiRevealableTextField_default as RuiRevealableTextField, RuiSimpleSelect_default as RuiSimpleSelect, RuiSkeletonLoader_default as RuiSkeletonLoader, RuiSlider_default as RuiSlider, RuiStepper_default as RuiStepper, RuiSwitch_default as RuiSwitch, RuiTab_default as RuiTab, RuiTabItem_default as RuiTabItem, RuiTabItems_default as RuiTabItems, RuiTable_default as RuiTable, RuiTableEmptyState_default as RuiTableEmptyState, RuiTableErrorState_default as RuiTableErrorState, RuiTableLoadingState_default as RuiTableLoadingState, RuiTablePagination_default as RuiTablePagination, RuiExpandButton_default as RuiTableRowExpander, RuiTabs_default as RuiTabs, RuiTextArea_default as RuiTextArea, RuiTextField_default as RuiTextField, RuiTimePicker_default as RuiTimePicker, RuiTimezoneSelect_default as RuiTimezoneSelect, RuiTooltip_default as RuiTooltip };
+export { RuiAccordion_default as RuiAccordion, RuiAccordions_default as RuiAccordions, RuiAlert_default as RuiAlert, RuiAutoComplete_default as RuiAutoComplete, RuiAvatar_default as RuiAvatar, RuiAvatarGroup_default as RuiAvatarGroup, RuiBadge_default as RuiBadge, RuiBottomSheet_default as RuiBottomSheet, RuiButton_default as RuiButton, RuiButtonGroup_default as RuiButtonGroup, RuiCalendar_default as RuiCalendar, RuiCard_default as RuiCard, RuiCardHeader_default as RuiCardHeader, RuiCategoryPicker_default as RuiCategoryPicker, RuiCheckbox_default as RuiCheckbox, RuiCheckboxGroup_default as RuiCheckboxGroup, RuiChip_default as RuiChip, RuiColorPicker_default as RuiColorPicker, RuiDataTable_default as RuiDataTable, RuiDateTimePicker_default as RuiDateTimePicker, RuiDialog_default as RuiDialog, RuiDivider_default as RuiDivider, RuiFieldDefaults_default as RuiFieldDefaults, RuiFileUpload_default as RuiFileUpload, RuiFooterStepper_default as RuiFooterStepper, RuiIcon_default as RuiIcon, RuiLogo_default as RuiLogo, RuiMenu_default as RuiMenu, RuiMenuSelect_default as RuiMenuSelect, RuiNavigationDrawer_default as RuiNavigationDrawer, RuiNotification_default as RuiNotification, RuiProgress_default as RuiProgress, RuiRadio_default as RuiRadio, RuiRadioGroup_default as RuiRadioGroup, RuiRevealableTextField_default as RuiRevealableTextField, RuiSimpleSelect_default as RuiSimpleSelect, RuiSkeletonLoader_default as RuiSkeletonLoader, RuiSlider_default as RuiSlider, RuiStepper_default as RuiStepper, RuiSwitch_default as RuiSwitch, RuiTab_default as RuiTab, RuiTabItem_default as RuiTabItem, RuiTabItems_default as RuiTabItems, RuiTable_default as RuiTable, RuiTableEmptyState_default as RuiTableEmptyState, RuiTableErrorState_default as RuiTableErrorState, RuiTableLoadingState_default as RuiTableLoadingState, RuiTablePagination_default as RuiTablePagination, RuiExpandButton_default as RuiTableRowExpander, RuiTabs_default as RuiTabs, RuiTextArea_default as RuiTextArea, RuiTextField_default as RuiTextField, RuiTimePicker_default as RuiTimePicker, RuiTimezoneSelect_default as RuiTimezoneSelect, RuiTooltip_default as RuiTooltip };

package/dist/components/loaders/RuiSkeletonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonBase.js","names":[],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  base: 'animate-pulse bg-black/[.12] dark:bg-white/[.16]',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      full: 'rounded-full',\n    },\n  },\n});\n\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    role=\"alert\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSkeletonBase.js","names":[],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <!-- decoration only: an alert role made a screen reader announce every bar -->\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/loaders/RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js

@@ -7,12 +7,12 @@ var RuiSkeletonBase_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	props: { rounded: {} },
 	setup(__props) {
 		const skeleton = tv({
-			base: "animate-pulse bg-black/[.12] dark:bg-white/[.16]",
+			base: "animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800",
 			variants: { rounded: {
 				none: "rounded-none",
-				sm: "rounded-sm",
-				md: "rounded-md",
-				lg: "rounded-lg",
+				sm: "rounded-xs",
+				md: "rounded-rui-control",
+				lg: "rounded-rui-card",
 				full: "rounded-full"
 			} }
 		});
@@ -20,7 +20,8 @@ var RuiSkeletonBase_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(unref(ui)),
-				role: "alert"
+				"data-id": "skeleton",
+				"aria-hidden": "true"
 			}, null, 2);
 		};
 	}

package/dist/components/loaders/RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  base: 'animate-pulse bg-black/[.12] dark:bg-white/[.16]',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      full: 'rounded-full',\n    },\n  },\n});\n\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    role=\"alert\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAaA,MAAM,WAAW,GAAG;GAClB,MAAM;GACN,UAAU,EACR,SAAS;IACP,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;GACR,EACF;EACF,CAAC;EAED,MAAM,KAAK,eAAuB,SAAS,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAIrD,OAAA,UAAA,GAAA,mBAGE,OAAA;IAFC,OAAK,eAAE,MAAA,EAAA,CAAE;IACV,MAAK"}
+{"version":3,"file":"RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <!-- decoration only: an alert role made a screen reader announce every bar -->\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAaA,MAAM,WAAW,GAAG;GAElB,MAAM;GACN,UAAU,EACR,SAAS;IACP,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;GACR,EACF;EACF,CAAC;EAED,MAAM,KAAK,eAAuB,SAAS,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAKrD,OAAA,UAAA,GAAA,mBAIE,OAAA;IAHC,OAAK,eAAE,MAAA,EAAA,CAAE;IACV,WAAQ;IACR,eAAY"}