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

package/dist/components/forms/check-control-styles.d.ts

@@ -1,19 +1,38 @@
-export declare function getCheckControlIconSize(size?: 'sm' | 'lg'): number;
 /**
  * Shared tv() styles for RuiCheckbox and RuiRadio.
- * Both use the same layout, ripple, color, size, and validation patterns.
+ *
+ * The control is a drawn box (or ring) centred in the 42px slot the Material
+ * glyph used to fill, so a form keeps its spacing. The control's text color is
+ * the mark's color: its edge, the checkbox fill and the radio dot all draw
+ * with `currentColor`, so one class per state colors the whole mark. Hovering
+ * the row darkens an unchecked mark, and keyboard focus rings it; the hidden
+ * input is the focus target, so the ring hangs off its `peer` state.
  */
 export declare const checkControlStyles: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             control: string;
+            mark: string;
+            glyph: string;
+            dot: string;
             label: string;
         };
         lg: {
             control: string;
+            mark: string;
+            glyph: string;
+            dot: string;
             label: string;
         };
     };
+    shape: {
+        square: {
+            mark: string;
+        };
+        round: {
+            mark: string;
+        };
+    };
     disabled: {
         true: {
             wrapper: string;
@@ -34,6 +53,7 @@ export declare const checkControlStyles: import("tailwind-variants").TVReturnTyp
         };
     };
     color: {
+        grey: {};
         primary: {};
         secondary: {};
         error: {};
@@ -45,18 +65,35 @@ export declare const checkControlStyles: import("tailwind-variants").TVReturnTyp
     wrapper: string;
     input: string;
     control: string;
+    mark: string;
+    glyph: string;
+    dot: string;
     label: string;
 }, undefined, {
     size: {
         sm: {
             control: string;
+            mark: string;
+            glyph: string;
+            dot: string;
             label: string;
         };
         lg: {
             control: string;
+            mark: string;
+            glyph: string;
+            dot: string;
             label: string;
         };
     };
+    shape: {
+        square: {
+            mark: string;
+        };
+        round: {
+            mark: string;
+        };
+    };
     disabled: {
         true: {
             wrapper: string;
@@ -77,6 +114,7 @@ export declare const checkControlStyles: import("tailwind-variants").TVReturnTyp
         };
     };
     color: {
+        grey: {};
         primary: {};
         secondary: {};
         error: {};
@@ -88,18 +126,35 @@ export declare const checkControlStyles: import("tailwind-variants").TVReturnTyp
     wrapper: string;
     input: string;
     control: string;
+    mark: string;
+    glyph: string;
+    dot: string;
     label: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: {
             control: string;
+            mark: string;
+            glyph: string;
+            dot: string;
             label: string;
         };
         lg: {
             control: string;
+            mark: string;
+            glyph: string;
+            dot: string;
             label: string;
         };
     };
+    shape: {
+        square: {
+            mark: string;
+        };
+        round: {
+            mark: string;
+        };
+    };
     disabled: {
         true: {
             wrapper: string;
@@ -120,6 +175,7 @@ export declare const checkControlStyles: import("tailwind-variants").TVReturnTyp
         };
     };
     color: {
+        grey: {};
         primary: {};
         secondary: {};
         error: {};
@@ -131,5 +187,8 @@ export declare const checkControlStyles: import("tailwind-variants").TVReturnTyp
     wrapper: string;
     input: string;
     control: string;
+    mark: string;
+    glyph: string;
+    dot: string;
     label: string;
 }>>;

package/dist/components/forms/check-control-styles.js

@@ -1,45 +1,49 @@
 import { tv } from "../../utils/tv.js";
 //#region src/components/forms/check-control-styles.ts
-var ICON_SIZES = {
-	sm: 20,
-	lg: 28
-};
-var DEFAULT_ICON_SIZE = 24;
-function getCheckControlIconSize(size) {
-	return size && ICON_SIZES[size] || DEFAULT_ICON_SIZE;
-}
 /**
 * Shared tv() styles for RuiCheckbox and RuiRadio.
-* Both use the same layout, ripple, color, size, and validation patterns.
+*
+* The control is a drawn box (or ring) centred in the 42px slot the Material
+* glyph used to fill, so a form keeps its spacing. The control's text color is
+* the mark's color: its edge, the checkbox fill and the radio dot all draw
+* with `currentColor`, so one class per state colors the whole mark. Hovering
+* the row darkens an unchecked mark, and keyboard focus rings it; the hidden
+* input is the focus target, so the ring hangs off its `peer` state.
 */
 var checkControlStyles = tv({
 	slots: {
-		wrapper: "relative flex items-start cursor-pointer -ml-[0.5625rem]",
-		input: "peer appearance-none w-px h-px absolute z-[2] outline-none select-none",
-		control: [
-			"relative text-rui-text-secondary p-[0.5625rem]",
-			`before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:block before:size-[2.625rem]`,
-			"before:-translate-y-1/2 before:-translate-x-1/2 before:rounded-full before:opacity-0 before:transition-opacity",
-			"before:bg-black dark:before:bg-white",
-			"hover:before:opacity-5 active:before:opacity-30",
-			"peer-focus:before:opacity-15"
-		].join(" "),
-		label: "flex-1 text-rui-text text-body-1 mt-[0.5625rem] mb-1"
+		wrapper: "relative flex items-start cursor-pointer -ml-[0.5625rem] group/check",
+		input: "peer appearance-none w-px h-px absolute z-[2] outline-hidden select-none",
+		control: ["relative grid place-items-center shrink-0 size-10.5 text-rui-neutral-500 transition-colors", "peer-focus-visible:[&>[data-mark]]:focus-ring"].join(" "),
+		mark: "grid place-items-center size-4 border-[1.5px] border-current transition-colors",
+		glyph: "size-3 text-white",
+		dot: "size-2 rounded-full bg-current",
+		label: "flex-1 text-rui-text text-sm/6 mt-[0.5625rem] mb-1"
 	},
 	variants: {
 		size: {
 			sm: {
-				control: "before:size-[2.375rem]",
+				control: "size-9.5",
+				mark: "size-3.5",
+				glyph: "size-2.5",
+				dot: "size-1.5",
 				label: "mt-[0.4375rem]"
 			},
 			lg: {
-				control: "before:size-[2.875rem]",
+				control: "size-11.5",
+				mark: "size-5",
+				glyph: "size-3.5",
+				dot: "size-2.5",
 				label: "mt-[0.6875rem]"
 			}
 		},
+		shape: {
+			square: { mark: "rounded-sm" },
+			round: { mark: "rounded-full" }
+		},
 		disabled: { true: {
 			wrapper: "cursor-not-allowed",
-			control: "opacity-50 before:!content-none",
+			control: "!text-rui-neutral-300 dark:!text-rui-neutral-700",
 			label: "text-rui-text-disabled"
 		} },
 		checked: {
@@ -51,6 +55,7 @@ var checkControlStyles = tv({
 			success: { control: "!text-rui-success" }
 		},
 		color: {
+			grey: {},
 			primary: {},
 			secondary: {},
 			error: {},
@@ -61,28 +66,19 @@ var checkControlStyles = tv({
 	},
 	compoundVariants: [
 		{
-			color: "primary",
-			class: { control: "before:bg-rui-primary" }
-		},
-		{
-			color: "secondary",
-			class: { control: "before:bg-rui-secondary" }
+			checked: false,
+			disabled: false,
+			class: { control: "group-hover/check:text-rui-neutral-700 dark:group-hover/check:text-rui-neutral-300" }
 		},
 		{
-			color: "error",
-			class: { control: "before:bg-rui-error" }
-		},
-		{
-			color: "warning",
-			class: { control: "before:bg-rui-warning" }
-		},
-		{
-			color: "info",
-			class: { control: "before:bg-rui-info" }
+			checked: true,
+			shape: "square",
+			class: { mark: "bg-current" }
 		},
 		{
-			color: "success",
-			class: { control: "before:bg-rui-success" }
+			color: "grey",
+			checked: true,
+			class: { control: "text-rui-neutral-800 dark:text-rui-neutral-200" }
 		},
 		{
 			color: "primary",
@@ -97,30 +93,41 @@ var checkControlStyles = tv({
 		{
 			color: "error",
 			checked: true,
-			class: { control: "text-rui-error" }
+			class: { control: "text-rui-error dark:text-rui-error-darker" }
 		},
 		{
 			color: "warning",
 			checked: true,
-			class: { control: "text-rui-warning" }
+			class: { control: "text-rui-warning dark:text-rui-warning-darker" }
 		},
 		{
 			color: "info",
 			checked: true,
-			class: { control: "text-rui-info" }
+			class: { control: "text-rui-info dark:text-rui-info-darker" }
 		},
 		{
 			color: "success",
 			checked: true,
-			class: { control: "text-rui-success" }
+			class: { control: "text-rui-success dark:text-rui-success-darker" }
+		},
+		{
+			color: [
+				"grey",
+				"warning",
+				"info",
+				"success"
+			],
+			class: { glyph: "dark:text-rui-neutral-900" }
 		}
 	],
 	defaultVariants: {
+		shape: "square",
+		color: "grey",
 		disabled: false,
 		checked: false
 	}
 });
 //#endregion
-export { checkControlStyles, getCheckControlIconSize };
+export { checkControlStyles };
 
 //# sourceMappingURL=check-control-styles.js.map

package/dist/components/forms/check-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"check-control-styles.js","names":[],"sources":["../../../src/components/forms/check-control-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nconst ICON_SIZES: Record<string, number> = { sm: 20, lg: 28 };\nconst DEFAULT_ICON_SIZE = 24;\n\nexport function getCheckControlIconSize(size?: 'sm' | 'lg'): number {\n  return (size && ICON_SIZES[size]) || DEFAULT_ICON_SIZE;\n}\n\n/**\n * Shared tv() styles for RuiCheckbox and RuiRadio.\n * Both use the same layout, ripple, color, size, and validation patterns.\n */\nexport const checkControlStyles = tv({\n  slots: {\n    wrapper: 'relative flex items-start cursor-pointer -ml-[0.5625rem]',\n    input: 'peer appearance-none w-px h-px absolute z-[2] outline-none select-none',\n    control: [\n      'relative text-rui-text-secondary p-[0.5625rem]',\n      `before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:block before:size-[2.625rem]`,\n      'before:-translate-y-1/2 before:-translate-x-1/2 before:rounded-full before:opacity-0 before:transition-opacity',\n      'before:bg-black dark:before:bg-white',\n      'hover:before:opacity-5 active:before:opacity-30',\n      'peer-focus:before:opacity-15',\n    ].join(' '),\n    label: 'flex-1 text-rui-text text-body-1 mt-[0.5625rem] mb-1',\n  },\n  variants: {\n    size: {\n      sm: {\n        control: 'before:size-[2.375rem]',\n        label: 'mt-[0.4375rem]',\n      },\n      lg: {\n        control: 'before:size-[2.875rem]',\n        label: 'mt-[0.6875rem]',\n      },\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        control: 'opacity-50 before:!content-none',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    checked: {\n      true: {},\n      false: {},\n    },\n    validation: {\n      error: { control: '!text-rui-error' },\n      success: { control: '!text-rui-success' },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Color ripple (before:bg-rui-{color})\n    { color: 'primary', class: { control: 'before:bg-rui-primary' } },\n    { color: 'secondary', class: { control: 'before:bg-rui-secondary' } },\n    { color: 'error', class: { control: 'before:bg-rui-error' } },\n    { color: 'warning', class: { control: 'before:bg-rui-warning' } },\n    { color: 'info', class: { control: 'before:bg-rui-info' } },\n    { color: 'success', class: { control: 'before:bg-rui-success' } },\n\n    // Color text when checked\n    { color: 'primary', checked: true, class: { control: 'text-rui-primary' } },\n    { color: 'secondary', checked: true, class: { control: 'text-rui-secondary' } },\n    { color: 'error', checked: true, class: { control: 'text-rui-error' } },\n    { color: 'warning', checked: true, class: { control: 'text-rui-warning' } },\n    { color: 'info', checked: true, class: { control: 'text-rui-info' } },\n    { color: 'success', checked: true, class: { control: 'text-rui-success' } },\n  ],\n  defaultVariants: {\n    disabled: false,\n    checked: false,\n  },\n});\n"],"mappings":";;AAEA,IAAM,aAAqC;CAAE,IAAI;CAAI,IAAI;AAAG;AAC5D,IAAM,oBAAoB;AAE1B,SAAgB,wBAAwB,MAA4B;CAClE,OAAQ,QAAQ,WAAW,SAAU;AACvC;;;;;AAMA,IAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,SAAS;EACT,OAAO;EACP,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;CACT;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF,SAAS;IACT,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,OAAO;GACT;EACF;EACA,UAAU,EACR,MAAM;GACJ,SAAS;GACT,SAAS;GACT,OAAO;EACT,EACF;EACA,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,YAAY;GACV,OAAO,EAAE,SAAS,kBAAkB;GACpC,SAAS,EAAE,SAAS,oBAAoB;EAC1C;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,OAAO;GAAW,OAAO,EAAE,SAAS,wBAAwB;EAAE;EAChE;GAAE,OAAO;GAAa,OAAO,EAAE,SAAS,0BAA0B;EAAE;EACpE;GAAE,OAAO;GAAS,OAAO,EAAE,SAAS,sBAAsB;EAAE;EAC5D;GAAE,OAAO;GAAW,OAAO,EAAE,SAAS,wBAAwB;EAAE;EAChE;GAAE,OAAO;GAAQ,OAAO,EAAE,SAAS,qBAAqB;EAAE;EAC1D;GAAE,OAAO;GAAW,OAAO,EAAE,SAAS,wBAAwB;EAAE;EAGhE;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,mBAAmB;EAAE;EAC1E;GAAE,OAAO;GAAa,SAAS;GAAM,OAAO,EAAE,SAAS,qBAAqB;EAAE;EAC9E;GAAE,OAAO;GAAS,SAAS;GAAM,OAAO,EAAE,SAAS,iBAAiB;EAAE;EACtE;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,mBAAmB;EAAE;EAC1E;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,gBAAgB;EAAE;EACpE;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,mBAAmB;EAAE;CAC5E;CACA,iBAAiB;EACf,UAAU;EACV,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"check-control-styles.js","names":[],"sources":["../../../src/components/forms/check-control-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * Shared tv() styles for RuiCheckbox and RuiRadio.\n *\n * The control is a drawn box (or ring) centred in the 42px slot the Material\n * glyph used to fill, so a form keeps its spacing. The control's text color is\n * the mark's color: its edge, the checkbox fill and the radio dot all draw\n * with `currentColor`, so one class per state colors the whole mark. Hovering\n * the row darkens an unchecked mark, and keyboard focus rings it; the hidden\n * input is the focus target, so the ring hangs off its `peer` state.\n */\nexport const checkControlStyles = tv({\n  slots: {\n    wrapper: 'relative flex items-start cursor-pointer -ml-[0.5625rem] group/check',\n    input: 'peer appearance-none w-px h-px absolute z-[2] outline-hidden select-none',\n    control: [\n      'relative grid place-items-center shrink-0 size-10.5 text-rui-neutral-500 transition-colors',\n      'peer-focus-visible:[&>[data-mark]]:focus-ring',\n    ].join(' '),\n    mark: 'grid place-items-center size-4 border-[1.5px] border-current transition-colors',\n    glyph: 'size-3 text-white',\n    dot: 'size-2 rounded-full bg-current',\n    label: 'flex-1 text-rui-text text-sm/6 mt-[0.5625rem] mb-1',\n  },\n  variants: {\n    size: {\n      sm: {\n        control: 'size-9.5',\n        mark: 'size-3.5',\n        glyph: 'size-2.5',\n        dot: 'size-1.5',\n        label: 'mt-[0.4375rem]',\n      },\n      lg: {\n        control: 'size-11.5',\n        mark: 'size-5',\n        glyph: 'size-3.5',\n        dot: 'size-2.5',\n        label: 'mt-[0.6875rem]',\n      },\n    },\n    shape: {\n      square: { mark: 'rounded-sm' },\n      round: { mark: 'rounded-full' },\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        // the mark draws with currentColor, so one neutral greys its edge, fill and dot alike, two shades under the enabled one in dark\n        control: '!text-rui-neutral-300 dark:!text-rui-neutral-700',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    checked: {\n      true: {},\n      false: {},\n    },\n    validation: {\n      error: { control: '!text-rui-error' },\n      success: { control: '!text-rui-success' },\n    },\n    color: {\n      grey: {},\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    { checked: false, disabled: false, class: { control: 'group-hover/check:text-rui-neutral-700 dark:group-hover/check:text-rui-neutral-300' } },\n    { checked: true, shape: 'square', class: { mark: 'bg-current' } },\n\n    // Mark color when checked\n    { color: 'grey', checked: true, class: { control: 'text-rui-neutral-800 dark:text-rui-neutral-200' } },\n    { color: 'primary', checked: true, class: { control: 'text-rui-primary' } },\n    { color: 'secondary', checked: true, class: { control: 'text-rui-secondary' } },\n    // a status color's dark `main` is a text tone, so the mark takes the deep `darker` under its white check\n    { color: 'error', checked: true, class: { control: 'text-rui-error dark:text-rui-error-darker' } },\n    { color: 'warning', checked: true, class: { control: 'text-rui-warning dark:text-rui-warning-darker' } },\n    { color: 'info', checked: true, class: { control: 'text-rui-info dark:text-rui-info-darker' } },\n    { color: 'success', checked: true, class: { control: 'text-rui-success dark:text-rui-success-darker' } },\n\n    // A dark check where the fill is light: grey and the pale context colors in dark mode\n    { color: ['grey', 'warning', 'info', 'success'], class: { glyph: 'dark:text-rui-neutral-900' } },\n  ],\n  defaultVariants: {\n    shape: 'square',\n    color: 'grey',\n    disabled: false,\n    checked: false,\n  },\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,SAAS;EACT,OAAO;EACP,SAAS,CACP,8FACA,+CACF,CAAC,CAAC,KAAK,GAAG;EACV,MAAM;EACN,OAAO;EACP,KAAK;EACL,OAAO;CACT;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;EACF;EACA,OAAO;GACL,QAAQ,EAAE,MAAM,aAAa;GAC7B,OAAO,EAAE,MAAM,eAAe;EAChC;EACA,UAAU,EACR,MAAM;GACJ,SAAS;GAET,SAAS;GACT,OAAO;EACT,EACF;EACA,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,YAAY;GACV,OAAO,EAAE,SAAS,kBAAkB;GACpC,SAAS,EAAE,SAAS,oBAAoB;EAC1C;EACA,OAAO;GACL,MAAM,CAAC;GACP,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAO,UAAU;GAAO,OAAO,EAAE,SAAS,qFAAqF;EAAE;EAC5I;GAAE,SAAS;GAAM,OAAO;GAAU,OAAO,EAAE,MAAM,aAAa;EAAE;EAGhE;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,iDAAiD;EAAE;EACrG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,mBAAmB;EAAE;EAC1E;GAAE,OAAO;GAAa,SAAS;GAAM,OAAO,EAAE,SAAS,qBAAqB;EAAE;EAE9E;GAAE,OAAO;GAAS,SAAS;GAAM,OAAO,EAAE,SAAS,4CAA4C;EAAE;EACjG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EACvG;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,0CAA0C;EAAE;EAC9F;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EAGvG;GAAE,OAAO;IAAC;IAAQ;IAAW;IAAQ;GAAS;GAAG,OAAO,EAAE,OAAO,4BAA4B;EAAE;CACjG;CACA,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,UAAU;EACV,SAAS;CACX;AACF,CAAC"}

package/dist/components/forms/checkbox/RuiCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckbox.js","names":[],"sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { objectPick } from '@vueuse/shared';\nimport { checkControlStyles, getCheckControlIconSize } from '@/components/forms/check-control-styles';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<TValue> {\n  value?: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\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: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst indeterminate = defineModel<boolean>('indeterminate', { default: false });\n\nconst {\n  value = undefined,\n  disabled: disabledProp = false,\n  color: colorProp = undefined,\n  size: sizeProp = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst el = useTemplateRef<HTMLInputElement>('el');\n\nconst group = inject(RuiCheckboxGroupContextKey, undefined);\n\nconst disabled = computed<boolean>(() => disabledProp || (group ? toValue(group.disabled) : false));\nconst color = computed<ContextColorsType | undefined>(() => colorProp ?? (group ? toValue(group.color) : undefined));\nconst size = computed<'sm' | 'lg' | undefined>(() => sizeProp ?? (group ? toValue(group.size) : undefined));\n// Suppress per-child details inside a group so the group's own hint/error wins.\nconst effectiveHideDetails = computed<boolean>(() => hideDetails || (group !== undefined && value !== undefined));\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst internalModelValue = computed<boolean>({\n  get: () => {\n    if (group && value !== undefined)\n      return group.isChecked(value);\n    return get(modelValue);\n  },\n  set: (checked: boolean) => {\n    if (checked)\n      set(indeterminate, false);\n    if (group && value !== undefined)\n      group.toggle(value, checked);\n    else\n      set(modelValue, checked);\n  },\n});\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size: get(size),\n  disabled: get(disabled),\n  checked: get(internalModelValue) || get(indeterminate),\n  validation: get(validation),\n  color: get(color),\n}));\n\nconst iconSize = computed<number>(() => getCheckControlIconSize(get(size)));\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (!input) {\n    return;\n  }\n  input.checked = !val;\n  input.value = val ? 'off' : 'on';\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      v-bind=\"objectPick($attrs, ['onClick'])\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"internalModelValue || indeterminate || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span :class=\"ui.control()\">\n        <RuiIcon\n          v-if=\"indeterminate\"\n          name=\"lu-checkbox-indeterminate-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else-if=\"internalModelValue\"\n          name=\"lu-checkbox-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else\n          name=\"lu-checkbox-blank\"\n          :size=\"iconSize\"\n        />\n      </span>\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=\"!effectiveHideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCheckbox.js","names":[],"sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { objectPick } from '@vueuse/shared';\nimport { checkControlStyles } from '@/components/forms/check-control-styles';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<TValue> {\n  value?: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\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: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst indeterminate = defineModel<boolean>('indeterminate', { default: false });\n\nconst {\n  value = undefined,\n  disabled: disabledProp = false,\n  color: colorProp = undefined,\n  size: sizeProp = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst el = useTemplateRef<HTMLInputElement>('el');\n\nconst group = inject(RuiCheckboxGroupContextKey, undefined);\n\nconst disabled = computed<boolean>(() => disabledProp || (group ? toValue(group.disabled) : false));\nconst color = computed<ContextColorsType | undefined>(() => colorProp ?? (group ? toValue(group.color) : undefined));\nconst size = computed<'sm' | 'lg' | undefined>(() => sizeProp ?? (group ? toValue(group.size) : undefined));\n// Suppress per-child details inside a group so the group's own hint/error wins.\nconst effectiveHideDetails = computed<boolean>(() => hideDetails || (group !== undefined && value !== undefined));\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst internalModelValue = computed<boolean>({\n  get: () => {\n    if (group && value !== undefined)\n      return group.isChecked(value);\n    return get(modelValue);\n  },\n  set: (checked: boolean) => {\n    if (checked)\n      set(indeterminate, false);\n    if (group && value !== undefined)\n      group.toggle(value, checked);\n    else\n      set(modelValue, checked);\n  },\n});\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size: get(size),\n  disabled: get(disabled),\n  checked: get(internalModelValue) || get(indeterminate),\n  validation: get(validation),\n  color: get(color) ?? 'grey',\n}));\n\nconst markState = computed<'indeterminate' | 'checked' | 'unchecked'>(() => {\n  if (get(indeterminate))\n    return 'indeterminate';\n  return get(internalModelValue) ? 'checked' : 'unchecked';\n});\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (!input) {\n    return;\n  }\n  input.checked = !val;\n  input.value = val ? 'off' : 'on';\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      v-bind=\"objectPick($attrs, ['onClick'])\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"internalModelValue || indeterminate || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span :class=\"ui.control()\">\n        <span\n          :class=\"ui.mark()\"\n          data-mark\n          :data-state=\"markState\"\n        >\n          <svg\n            v-if=\"markState !== 'unchecked'\"\n            :class=\"ui.glyph()\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path\n              v-if=\"markState === 'indeterminate'\"\n              d=\"M3 6h6\"\n            />\n            <path\n              v-else\n              d=\"M2.5 6.2 5 8.6l4.5-5\"\n            />\n          </svg>\n        </span>\n      </span>\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=\"!effectiveHideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/checkbox/RuiCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,8 @@
-import RuiIcon_default from "../../icons/RuiIcon.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
 import { RuiCheckboxGroupContextKey } from "./checkbox-group/context.js";
-import { checkControlStyles, getCheckControlIconSize } from "../check-control-styles.js";
+import { checkControlStyles } from "../check-control-styles.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, toValue, unref, useModel, useTemplateRef, vModelCheckbox, watch, withDirectives } from "vue";
 import { get, objectPick, set } from "@vueuse/shared";
 //#region src/components/forms/checkbox/RuiCheckbox.vue?vue&type=script&setup=true&lang.ts
@@ -13,7 +12,16 @@ var _hoisted_1 = [
 	"data-error"
 ];
 var _hoisted_2 = ["disabled", "aria-invalid"];
-var _hoisted_3 = {
+var _hoisted_3 = ["data-state"];
+var _hoisted_4 = {
+	key: 0,
+	d: "M3 6h6"
+};
+var _hoisted_5 = {
+	key: 1,
+	d: "M2.5 6.2 5 8.6l4.5-5"
+};
+var _hoisted_6 = {
 	key: 0,
 	class: "text-rui-error"
 };
@@ -80,9 +88,12 @@ var RuiCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			disabled: get(disabled),
 			checked: get(internalModelValue) || get(indeterminate),
 			validation: get(validation),
-			color: get(color)
+			color: get(color) ?? "grey"
 		}));
-		const iconSize = computed(() => getCheckControlIconSize(get(size)));
+		const markState = computed(() => {
+			if (get(indeterminate)) return "indeterminate";
+			return get(internalModelValue) ? "checked" : "unchecked";
+		});
 		watch(indeterminate, (val) => {
 			const input = get(el);
 			if (!input) return;
@@ -108,23 +119,25 @@ var RuiCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					disabled: unref(disabled),
 					"aria-invalid": unref(hasError)
 				}, unref(getNonRootAttrs)(_ctx.$attrs, ["onInput", "onClick"])), null, 16, _hoisted_2), [[vModelCheckbox, unref(internalModelValue)]]),
-				createElementVNode("span", { class: normalizeClass(unref(ui).control()) }, [indeterminate.value ? (openBlock(), createBlock(RuiIcon_default, {
+				createElementVNode("span", { class: normalizeClass(unref(ui).control()) }, [createElementVNode("span", {
+					class: normalizeClass(unref(ui).mark()),
+					"data-mark": "",
+					"data-state": unref(markState)
+				}, [unref(markState) !== "unchecked" ? (openBlock(), createElementBlock("svg", {
 					key: 0,
-					name: "lu-checkbox-indeterminate-fill",
-					size: unref(iconSize)
-				}, null, 8, ["size"])) : unref(internalModelValue) ? (openBlock(), createBlock(RuiIcon_default, {
-					key: 1,
-					name: "lu-checkbox-fill",
-					size: unref(iconSize)
-				}, null, 8, ["size"])) : (openBlock(), createBlock(RuiIcon_default, {
-					key: 2,
-					name: "lu-checkbox-blank",
-					size: unref(iconSize)
-				}, null, 8, ["size"]))], 2),
+					class: normalizeClass(unref(ui).glyph()),
+					viewBox: "0 0 12 12",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"aria-hidden": "true"
+				}, [unref(markState) === "indeterminate" ? (openBlock(), createElementBlock("path", _hoisted_4)) : (openBlock(), createElementBlock("path", _hoisted_5))], 2)) : createCommentVNode("", true)], 10, _hoisted_3)], 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)
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_6, " * ")) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
 			], 16, _hoisted_1), !unref(effectiveHideDetails) ? (openBlock(), createBlock(RuiFormTextDetail_default, {
 				key: 0,
 				"error-messages": __props.errorMessages,

package/dist/components/forms/checkbox/RuiCheckbox.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckbox.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { objectPick } from '@vueuse/shared';\nimport { checkControlStyles, getCheckControlIconSize } from '@/components/forms/check-control-styles';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<TValue> {\n  value?: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\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: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst indeterminate = defineModel<boolean>('indeterminate', { default: false });\n\nconst {\n  value = undefined,\n  disabled: disabledProp = false,\n  color: colorProp = undefined,\n  size: sizeProp = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst el = useTemplateRef<HTMLInputElement>('el');\n\nconst group = inject(RuiCheckboxGroupContextKey, undefined);\n\nconst disabled = computed<boolean>(() => disabledProp || (group ? toValue(group.disabled) : false));\nconst color = computed<ContextColorsType | undefined>(() => colorProp ?? (group ? toValue(group.color) : undefined));\nconst size = computed<'sm' | 'lg' | undefined>(() => sizeProp ?? (group ? toValue(group.size) : undefined));\n// Suppress per-child details inside a group so the group's own hint/error wins.\nconst effectiveHideDetails = computed<boolean>(() => hideDetails || (group !== undefined && value !== undefined));\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst internalModelValue = computed<boolean>({\n  get: () => {\n    if (group && value !== undefined)\n      return group.isChecked(value);\n    return get(modelValue);\n  },\n  set: (checked: boolean) => {\n    if (checked)\n      set(indeterminate, false);\n    if (group && value !== undefined)\n      group.toggle(value, checked);\n    else\n      set(modelValue, checked);\n  },\n});\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size: get(size),\n  disabled: get(disabled),\n  checked: get(internalModelValue) || get(indeterminate),\n  validation: get(validation),\n  color: get(color),\n}));\n\nconst iconSize = computed<number>(() => getCheckControlIconSize(get(size)));\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (!input) {\n    return;\n  }\n  input.checked = !val;\n  input.value = val ? 'off' : 'on';\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      v-bind=\"objectPick($attrs, ['onClick'])\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"internalModelValue || indeterminate || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span :class=\"ui.control()\">\n        <RuiIcon\n          v-if=\"indeterminate\"\n          name=\"lu-checkbox-indeterminate-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else-if=\"internalModelValue\"\n          name=\"lu-checkbox-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else\n          name=\"lu-checkbox-blank\"\n          :size=\"iconSize\"\n        />\n      </span>\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=\"!effectiveHideDetails\"\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":"RuiCheckbox.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { objectPick } from '@vueuse/shared';\nimport { checkControlStyles } from '@/components/forms/check-control-styles';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<TValue> {\n  value?: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\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: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst indeterminate = defineModel<boolean>('indeterminate', { default: false });\n\nconst {\n  value = undefined,\n  disabled: disabledProp = false,\n  color: colorProp = undefined,\n  size: sizeProp = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst el = useTemplateRef<HTMLInputElement>('el');\n\nconst group = inject(RuiCheckboxGroupContextKey, undefined);\n\nconst disabled = computed<boolean>(() => disabledProp || (group ? toValue(group.disabled) : false));\nconst color = computed<ContextColorsType | undefined>(() => colorProp ?? (group ? toValue(group.color) : undefined));\nconst size = computed<'sm' | 'lg' | undefined>(() => sizeProp ?? (group ? toValue(group.size) : undefined));\n// Suppress per-child details inside a group so the group's own hint/error wins.\nconst effectiveHideDetails = computed<boolean>(() => hideDetails || (group !== undefined && value !== undefined));\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst internalModelValue = computed<boolean>({\n  get: () => {\n    if (group && value !== undefined)\n      return group.isChecked(value);\n    return get(modelValue);\n  },\n  set: (checked: boolean) => {\n    if (checked)\n      set(indeterminate, false);\n    if (group && value !== undefined)\n      group.toggle(value, checked);\n    else\n      set(modelValue, checked);\n  },\n});\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size: get(size),\n  disabled: get(disabled),\n  checked: get(internalModelValue) || get(indeterminate),\n  validation: get(validation),\n  color: get(color) ?? 'grey',\n}));\n\nconst markState = computed<'indeterminate' | 'checked' | 'unchecked'>(() => {\n  if (get(indeterminate))\n    return 'indeterminate';\n  return get(internalModelValue) ? 'checked' : 'unchecked';\n});\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (!input) {\n    return;\n  }\n  input.checked = !val;\n  input.value = val ? 'off' : 'on';\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      v-bind=\"objectPick($attrs, ['onClick'])\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"internalModelValue || indeterminate || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span :class=\"ui.control()\">\n        <span\n          :class=\"ui.mark()\"\n          data-mark\n          :data-state=\"markState\"\n        >\n          <svg\n            v-if=\"markState !== 'unchecked'\"\n            :class=\"ui.glyph()\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path\n              v-if=\"markState === 'indeterminate'\"\n              d=\"M3 6h6\"\n            />\n            <path\n              v-else\n              d=\"M2.5 6.2 5 8.6l4.5-5\"\n            />\n          </svg>\n        </span>\n      </span>\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=\"!effectiveHideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,aAAa,SAAoB,SAAA,YAAmB;EAE1D,MAAM,gBAAgB,SAAoB,SAAC,eAAmC;EAmB9E,MAAM,KAAK,eAAiC,IAAI;EAEhD,MAAM,QAAQ,OAAO,4BAA4B,KAAA,CAAS;EAE1D,MAAM,WAAW,eAAwB,QAAA,aAAiB,QAAQ,QAAQ,MAAM,QAAQ,IAAI,MAAM;EAClG,MAAM,QAAQ,eAA8C,QAAA,UAAc,QAAQ,QAAQ,MAAM,KAAK,IAAI,KAAA,EAAU;EACnH,MAAM,OAAO,eAAwC,QAAA,SAAa,QAAQ,QAAQ,MAAM,IAAI,IAAI,KAAA,EAAU;EAE1G,MAAM,uBAAuB,eAAwB,QAAA,eAAgB,UAAU,KAAA,KAAa,QAAA,UAAU,KAAA,CAAU;EAEhH,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,qBAAqB,SAAkB;GAC3C,WAAW;IACT,IAAI,SAAS,QAAA,UAAU,KAAA,GACrB,OAAO,MAAM,UAAU,QAAA,KAAK;IAC9B,OAAO,IAAI,UAAU;GACvB;GACA,MAAM,YAAqB;IACzB,IAAI,SACF,IAAI,eAAe,KAAK;IAC1B,IAAI,SAAS,QAAA,UAAU,KAAA,GACrB,MAAM,OAAO,QAAA,OAAO,OAAO;SAE3B,IAAI,YAAY,OAAO;GAC3B;EACF,CAAC;EAED,MAAM,KAAK,eAAsD,mBAAmB;GAClF,MAAM,IAAI,IAAI;GACd,UAAU,IAAI,QAAQ;GACtB,SAAS,IAAI,kBAAkB,KAAK,IAAI,aAAa;GACrD,YAAY,IAAI,UAAU;GAC1B,OAAO,IAAI,KAAK,KAAK;EACvB,CAAC,CAAC;EAEF,MAAM,YAAY,eAA0D;GAC1E,IAAI,IAAI,aAAa,GACnB,OAAO;GACT,OAAO,IAAI,kBAAkB,IAAI,YAAY;EAC/C,CAAC;EAED,MAAM,gBAAgB,QAAQ;GAC5B,MAAM,QAAQ,IAAI,EAAE;GACpB,IAAI,CAAC,OACH;GAEF,MAAM,UAAU,CAAC;GACjB,MAAM,QAAQ,MAAM,QAAQ;EAC9B,CAAC;EAED,MAAM,qBAAqB,QAAQ;GACjC,MAAM,QAAQ,IAAI,EAAE;GACpB,IAAI,SAAS,MAAM,YAAY,KAC7B,MAAM,UAAU;EACpB,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAgEM,OAAA,eAAA,mBAhEO,MAAA,YAAA,CAAY,CAACA,KAAAA,MAAM,CAAA,CAAA,GAAA,CAC9B,mBAwDQ,SAxDR,WAwDQ,EAvDL,OAAO,MAAA,EAAA,CAAE,CAAC,QAAO,EACV,GAAA,MAAA,UAAA,CAAU,CAACA,KAAAA,QAAM,CAAA,SAAA,CAAA,GAAA;IACxB,iBAAe,MAAA,QAAA,KAAY,KAAA;IAC3B,gBAAc,MAAA,kBAAA,KAAsB,cAAA,SAAiB,KAAA;IACrD,cAAY,MAAA,QAAA,IAAQ,KAAQ,KAAA;;IAE7B,eAAA,mBAQE,SARF,WAQE;KAPI,SAAA;KAAJ,KAAI;KACK,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,kBAAA,IAAA,mBAAkB,QAAA,SAAA;KAC3B,MAAK;KACJ,OAAO,MAAA,EAAA,CAAE,CAAC,MAAK;KACf,UAAU,MAAA,QAAA;KACV,gBAAc,MAAA,QAAA;IACP,GAAA,MAAA,eAAA,CAAe,CAACA,KAAAA,QAAM,CAAA,WAAA,SAAA,CAAA,CAAA,GAAA,MAAA,IAAA,UAAA,GAAA,CALrB,CAAA,gBAAA,MAAA,kBAAA,CAAkB,CAAA,CAAA;IAO7B,mBA2BO,QAAA,EA3BA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA,CACtB,mBAyBO,QAAA;KAxBJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;KACf,aAAA;KACC,cAAY,MAAA,SAAA;IAGL,GAAA,CAAA,MAAA,SAAA,MAAS,eADjB,UAAA,GAAA,mBAmBM,OAAA;;KAjBH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,eAAY;IAGJ,GAAA,CAAA,MAAA,SAAA,MAAS,mBADjB,UAAA,GAAA,mBAGE,QAHF,UAGE,MACF,UAAA,GAAA,mBAGE,QAHF,UAGE,EAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,CAAA;IAKA,QAAA,SAASC,KAAAA,OAAO,WADxB,UAAA,GAAA,mBAWO,QAAA;;KATJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;IAEhB,GAAA,CAAA,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAf,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,GAEN,QAAA,YADR,UAAA,GAAA,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;GAIK,GAAA,IAAA,UAAA,GAAA,CAAA,MAAA,oBAAA,KADT,UAAA,GAAA,YAKE,2BAAA;;IAHC,kBAAgB,QAAA;IAChB,oBAAkB,QAAA;IAClB,MAAM,QAAA"}

package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckboxGroup.js","names":[],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text-secondary text-body-1\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        ﹡\n      </span>\n    </div>\n    <div :class=\"{ 'flex space-x-6': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCheckboxGroup.js","names":[],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,7 @@ import { get, set } from "@vueuse/shared";
 //#region src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "text-rui-text-secondary text-body-1"
+	class: "text-rui-text text-sm/5 font-medium"
 };
 var _hoisted_2 = {
 	key: 0,
@@ -62,8 +62,8 @@ var RuiCheckboxGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ role: "group" }, _ctx.$attrs), [
-				__props.label ? (openBlock(), createElementBlock("div", _hoisted_1, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", _hoisted_2, " ﹡ ")) : createCommentVNode("", true)])) : createCommentVNode("", true),
-				createElementVNode("div", { class: normalizeClass({ "flex space-x-6": __props.inline }) }, [renderSlot(_ctx.$slots, "default")], 2),
+				__props.label ? (openBlock(), createElementBlock("div", _hoisted_1, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", _hoisted_2, " * ")) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass({ "flex between:ml-6 between:mr-0": __props.inline }) }, [renderSlot(_ctx.$slots, "default")], 2),
 				!__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
 					key: 1,
 					"error-messages": __props.errorMessages,

package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text-secondary text-body-1\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        ﹡\n      </span>\n    </div>\n    <div :class=\"{ 'flex space-x-6': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,aAAa,SAAqB,SAAA,YAAsB;EAmB9D,SAAS,cAAc,KAAwB,OAAyB;GACtE,OAAO,MAAM,UAAU,SAAS,KAAK,KAAK,KAAK;EACjD;EAEA,QAAQ,4BAA4B;GAClC,YAAY,UAA4B,cAAc,IAAI,UAAU,GAAG,KAAK;GAC5E,SAAS,OAAgB,YAA2B;IAClD,MAAM,UAAU,IAAI,UAAU;IAE9B,IAAI,YADY,cAAc,SAAS,KACvB,GACd;IACF,IAAI,SACF,IAAI,YAAY,CAAC,GAAG,SAAS,KAAe,CAAC;SAE7C,IAAI,YAAY,QAAQ,QAAO,MAAK,MAAM,KAAK,CAAC;GACpD;GACA,gBAAgB,QAAA;GAChB,aAAa,QAAA;GACb,YAAY,QAAA;EACd,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAyBM,OAzBN,WAyBM,EAxBJ,MAAK,QAAO,GACJA,KAAAA,MAAM,GAAA;IAGN,QAAA,SADR,UAAA,GAAA,mBAWM,OAXN,YAWM,CAPD,gBAAA,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA,GACQ,QAAA,YADR,UAAA,GAAA,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEF,mBAEM,OAAA,EAFA,OAAK,eAAA,EAAA,kBAAsB,QAAA,OAAM,CAAA,EAAA,GAAA,CACrC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGD,CAAA,QAAA,eADT,UAAA,GAAA,YAKE,2BAAA;;KAHC,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}
+{"version":3,"file":"RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,aAAa,SAAqB,SAAA,YAAsB;EAmB9D,SAAS,cAAc,KAAwB,OAAyB;GACtE,OAAO,MAAM,UAAU,SAAS,KAAK,KAAK,KAAK;EACjD;EAEA,QAAQ,4BAA4B;GAClC,YAAY,UAA4B,cAAc,IAAI,UAAU,GAAG,KAAK;GAC5E,SAAS,OAAgB,YAA2B;IAClD,MAAM,UAAU,IAAI,UAAU;IAE9B,IAAI,YADY,cAAc,SAAS,KACvB,GACd;IACF,IAAI,SACF,IAAI,YAAY,CAAC,GAAG,SAAS,KAAe,CAAC;SAE7C,IAAI,YAAY,QAAQ,QAAO,MAAK,MAAM,KAAK,CAAC;GACpD;GACA,gBAAgB,QAAA;GAChB,aAAa,QAAA;GACb,YAAY,QAAA;EACd,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAyBM,OAzBN,WAyBM,EAxBJ,MAAK,QAAO,GACJA,KAAAA,MAAM,GAAA;IAGN,QAAA,SADR,UAAA,GAAA,mBAWM,OAXN,YAWM,CAPD,gBAAA,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA,GACQ,QAAA,YADR,UAAA,GAAA,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEF,mBAEM,OAAA,EAFA,OAAK,eAAA,EAAA,kCAAsC,QAAA,OAAM,CAAA,EAAA,GAAA,CACrD,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGD,CAAA,QAAA,eADT,UAAA,GAAA,YAKE,2BAAA;;KAHC,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}

package/dist/components/forms/field-defaults/RuiFieldDefaults.js

@@ -0,0 +1,7 @@
+import RuiFieldDefaults_vue_vue_type_script_setup_true_lang_default from "./RuiFieldDefaults.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/forms/field-defaults/RuiFieldDefaults.vue
+var RuiFieldDefaults_default = RuiFieldDefaults_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiFieldDefaults_default as default };
+
+//# sourceMappingURL=RuiFieldDefaults.js.map

package/dist/components/forms/field-defaults/RuiFieldDefaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiFieldDefaults.js","names":[],"sources":["../../../../src/components/forms/field-defaults/RuiFieldDefaults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type LabelPlacement, provideFieldDefaults } from '@/composables/defaults/field';\n\nexport interface FieldDefaultsProps {\n  labelPlacement?: LabelPlacement;\n}\n\ndefineOptions({\n  name: 'RuiFieldDefaults',\n});\n\nconst { labelPlacement } = defineProps<FieldDefaultsProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nprovideFieldDefaults(() => labelPlacement);\n</script>\n\n<template>\n  <slot />\n</template>\n"],"mappings":""}

package/dist/components/forms/field-defaults/RuiFieldDefaults.vue.d.ts

@@ -0,0 +1,16 @@
+import { type LabelPlacement } from '../../../composables/defaults/field.js';
+export interface FieldDefaultsProps {
+    labelPlacement?: LabelPlacement;
+}
+type __VLS_Slots = {
+    default?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FieldDefaultsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldDefaultsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/field-defaults/RuiFieldDefaults.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,18 @@
+import { provideFieldDefaults } from "../../../composables/defaults/field.js";
+import { defineComponent, renderSlot } from "vue";
+//#region src/components/forms/field-defaults/RuiFieldDefaults.vue?vue&type=script&setup=true&lang.ts
+var RuiFieldDefaults_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RuiFieldDefaults",
+	__name: "RuiFieldDefaults",
+	props: { labelPlacement: {} },
+	setup(__props) {
+		provideFieldDefaults(() => __props.labelPlacement);
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+export { RuiFieldDefaults_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiFieldDefaults.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/forms/field-defaults/RuiFieldDefaults.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiFieldDefaults.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/forms/field-defaults/RuiFieldDefaults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type LabelPlacement, provideFieldDefaults } from '@/composables/defaults/field';\n\nexport interface FieldDefaultsProps {\n  labelPlacement?: LabelPlacement;\n}\n\ndefineOptions({\n  name: 'RuiFieldDefaults',\n});\n\nconst { labelPlacement } = defineProps<FieldDefaultsProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nprovideFieldDefaults(() => labelPlacement);\n</script>\n\n<template>\n  <slot />\n</template>\n"],"mappings":";;;;;;;;EAiBA,2BAA2B,QAAA,cAAc;;GAIvC,OAAA,WAAQ,KAAA,QAAA,SAAA"}

package/dist/components/forms/field-label/RuiFieldLabel.js

@@ -0,0 +1,7 @@
+import RuiFieldLabel_vue_vue_type_script_setup_true_lang_default from "./RuiFieldLabel.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/forms/field-label/RuiFieldLabel.vue
+var RuiFieldLabel_default = RuiFieldLabel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiFieldLabel_default as default };
+
+//# sourceMappingURL=RuiFieldLabel.js.map