@cck-ui/core 0.19.0 → 0.20.1

package/cjs/core/styles-api/use-styles/use-transformed-styles.cjs

@@ -1,18 +1,21 @@
 "use client";
 const require_config_provider_context = require("../../config-provider/config-provider.context.cjs");
+let vue = require("vue");
 //#region packages/@cck-ui/core/src/core/styles-api/use-styles/use-transformed-styles.ts
 function useStylesTransform({ props, stylesCtx, themeName, theme }) {
 	const stylesTransform = require_config_provider_context.useCckStylesTransform()?.();
 	const getTransformedStyles = (styles) => {
 		if (!stylesTransform) return [];
+		const currentProps = (0, vue.toValue)(props);
+		const currentCtx = (0, vue.toValue)(stylesCtx);
 		return [...styles.map((style) => stylesTransform(style, {
-			props,
+			props: currentProps,
 			theme,
-			ctx: stylesCtx
+			ctx: currentCtx
 		})), ...themeName.map((n) => stylesTransform(theme.components[n]?.styles, {
-			props,
+			props: currentProps,
 			theme,
-			ctx: stylesCtx
+			ctx: currentCtx
 		}))].filter(Boolean);
 	};
 	return {

package/cjs/core/styles-api/use-styles/use-transformed-styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-transformed-styles.cjs","names":["useCckStylesTransform"],"sources":["../../../../src/core/styles-api/use-styles/use-transformed-styles.ts"],"sourcesContent":["import { CTheme, useCckStylesTransform } from '../../config-provider'\n\ninterface UseTransformedStylesInput {\n  props: Record<string, any>\n  stylesCtx: Record<string, any> | undefined\n  themeName: string[]\n  theme: CTheme\n}\n\nexport function useStylesTransform({\n  props,\n  stylesCtx,\n  themeName,\n  theme,\n}: UseTransformedStylesInput) {\n  const stylesTransform = useCckStylesTransform()?.()\n\n  const getTransformedStyles = (styles: any[]) => {\n    if (!stylesTransform) {\n      return []\n    }\n\n    const transformedStyles = styles.map((style) =>\n      stylesTransform(style, { props, theme, ctx: stylesCtx })\n    )\n\n    return [\n      ...transformedStyles,\n      ...themeName.map((n) =>\n        stylesTransform(theme.components[n]?.styles, {\n          props,\n          theme,\n          ctx: stylesCtx,\n        })\n      ),\n    ].filter(Boolean) as Record<string, string>[]\n  }\n\n  return {\n    getTransformedStyles,\n    withStylesTransform: !!stylesTransform,\n  }\n}\n"],"mappings":";;;AASA,SAAgB,mBAAmB,EACjC,OACA,WACA,WACA,SAC4B;CAC5B,MAAM,kBAAkBA,gCAAAA,sBAAsB,CAAC,GAAG;CAElD,MAAM,wBAAwB,WAAkB;EAC9C,IAAI,CAAC,iBACH,OAAO,CAAC;EAOV,OAAO,CACL,GALwB,OAAO,KAAK,UACpC,gBAAgB,OAAO;GAAE;GAAO;GAAO,KAAK;EAAU,CAAC,CAIpC,GACnB,GAAG,UAAU,KAAK,MAChB,gBAAgB,MAAM,WAAW,EAAE,EAAE,QAAQ;GAC3C;GACA;GACA,KAAK;EACP,CAAC,CACH,CACF,CAAC,CAAC,OAAO,OAAO;CAClB;CAEA,OAAO;EACL;EACA,qBAAqB,CAAC,CAAC;CACzB;AACF"}
+{"version":3,"file":"use-transformed-styles.cjs","names":["useCckStylesTransform"],"sources":["../../../../src/core/styles-api/use-styles/use-transformed-styles.ts"],"sourcesContent":["import { toValue } from 'vue'\nimport { CTheme, useCckStylesTransform } from '../../config-provider'\n\ninterface UseTransformedStylesInput {\n  props: Record<string, any>\n  stylesCtx: Record<string, any> | undefined\n  themeName: string[]\n  theme: CTheme\n}\n\nexport function useStylesTransform({\n  props,\n  stylesCtx,\n  themeName,\n  theme,\n}: UseTransformedStylesInput) {\n  const stylesTransform = useCckStylesTransform()?.()\n\n  const getTransformedStyles = (styles: any[]) => {\n    if (!stylesTransform) {\n      return []\n    }\n\n    const currentProps = toValue(props)\n    const currentCtx = toValue(stylesCtx)\n\n    const transformedStyles = styles.map((style) =>\n      stylesTransform(style, { props: currentProps, theme, ctx: currentCtx })\n    )\n\n    return [\n      ...transformedStyles,\n      ...themeName.map((n) =>\n        stylesTransform(theme.components[n]?.styles, {\n          props: currentProps,\n          theme,\n          ctx: currentCtx,\n        })\n      ),\n    ].filter(Boolean) as Record<string, string>[]\n  }\n\n  return {\n    getTransformedStyles,\n    withStylesTransform: !!stylesTransform,\n  }\n}\n"],"mappings":";;;;AAUA,SAAgB,mBAAmB,EACjC,OACA,WACA,WACA,SAC4B;CAC5B,MAAM,kBAAkBA,gCAAAA,sBAAsB,CAAC,GAAG;CAElD,MAAM,wBAAwB,WAAkB;EAC9C,IAAI,CAAC,iBACH,OAAO,CAAC;EAGV,MAAM,gBAAA,GAAA,IAAA,QAAA,CAAuB,KAAK;EAClC,MAAM,cAAA,GAAA,IAAA,QAAA,CAAqB,SAAS;EAMpC,OAAO,CACL,GALwB,OAAO,KAAK,UACpC,gBAAgB,OAAO;GAAE,OAAO;GAAc;GAAO,KAAK;EAAW,CAAC,CAInD,GACnB,GAAG,UAAU,KAAK,MAChB,gBAAgB,MAAM,WAAW,EAAE,EAAE,QAAQ;GAC3C,OAAO;GACP;GACA,KAAK;EACP,CAAC,CACH,CACF,CAAC,CAAC,OAAO,OAAO;CAClB;CAEA,OAAO;EACL;EACA,qBAAqB,CAAC,CAAC;CACzB;AACF"}

package/cjs/index.cjs

@@ -66,19 +66,20 @@ const require_index$9 = require("./components/aspect-ratio/index.cjs");
 const require_index$10 = require("./components/button/index.cjs");
 const require_index$11 = require("./components/center/index.cjs");
 const require_index$12 = require("./components/container/index.cjs");
-const require_index$13 = require("./components/empty-state/index.cjs");
-const require_index$14 = require("./components/flex/index.cjs");
-const require_index$15 = require("./components/grid/index.cjs");
-const require_index$16 = require("./components/group/index.cjs");
-const require_index$17 = require("./components/image/index.cjs");
-const require_index$18 = require("./components/paper/index.cjs");
-const require_index$19 = require("./components/semi-circle-progress/index.cjs");
-const require_index$20 = require("./components/simple-grid/index.cjs");
-const require_index$21 = require("./components/skeleton/index.cjs");
-const require_index$22 = require("./components/space/index.cjs");
-const require_index$23 = require("./components/splitter/index.cjs");
-const require_index$24 = require("./components/stack/index.cjs");
-const require_index$25 = require("./components/text/index.cjs");
+const require_index$13 = require("./components/copy-button/index.cjs");
+const require_index$14 = require("./components/empty-state/index.cjs");
+const require_index$15 = require("./components/flex/index.cjs");
+const require_index$16 = require("./components/grid/index.cjs");
+const require_index$17 = require("./components/group/index.cjs");
+const require_index$18 = require("./components/image/index.cjs");
+const require_index$19 = require("./components/paper/index.cjs");
+const require_index$20 = require("./components/semi-circle-progress/index.cjs");
+const require_index$21 = require("./components/simple-grid/index.cjs");
+const require_index$22 = require("./components/skeleton/index.cjs");
+const require_index$23 = require("./components/space/index.cjs");
+const require_index$24 = require("./components/splitter/index.cjs");
+const require_index$25 = require("./components/stack/index.cjs");
+const require_index$26 = require("./components/text/index.cjs");
 let _vue_shared = require("@vue/shared");
 //#region packages/@cck-ui/core/src/index.ts
 const INSTALLED_KEY = Symbol("INSTALLED_KEY");
@@ -95,27 +96,28 @@ const components = [
 	require_index$10.CButtonGroupSection,
 	require_index$11.CCenter,
 	require_index$7.CCloseButton,
-	require_index$15.CCol,
+	require_index$16.CCol,
 	require_index$12.CContainer,
-	require_index$13.CEmptyState,
-	require_index$13.CEmptyStateActions,
-	require_index$13.CEmptyStateDescription,
-	require_index$13.CEmptyStateIndicator,
-	require_index$13.CEmptyStateTitle,
-	require_index$14.CFlex,
-	require_index$15.CGrid,
-	require_index$16.CGroup,
-	require_index$17.CImage,
+	require_index$13.CCopyButton,
+	require_index$14.CEmptyState,
+	require_index$14.CEmptyStateActions,
+	require_index$14.CEmptyStateDescription,
+	require_index$14.CEmptyStateIndicator,
+	require_index$14.CEmptyStateTitle,
+	require_index$15.CFlex,
+	require_index$16.CGrid,
+	require_index$17.CGroup,
+	require_index$18.CImage,
 	require_index$4.CLoader,
-	require_index$18.CPaper,
-	require_index$19.CSemiCircleProgress,
-	require_index$20.CSimpleGrid,
-	require_index$21.CSkeleton,
-	require_index$22.CSpace,
-	require_index$23.CSplitter,
-	require_index$23.CSplitterPane,
-	require_index$24.CStack,
-	require_index$25.CText,
+	require_index$19.CPaper,
+	require_index$20.CSemiCircleProgress,
+	require_index$21.CSimpleGrid,
+	require_index$22.CSkeleton,
+	require_index$23.CSpace,
+	require_index$24.CSplitter,
+	require_index$24.CSplitterPane,
+	require_index$25.CStack,
+	require_index$26.CText,
 	require_index$5.CTransition,
 	require_index$3.UnstyledButton
 ];
@@ -139,29 +141,30 @@ exports.CButtonGroupSection = require_index$10.CButtonGroupSection;
 exports.CCK_TRANSITIONS = require_transitions.transitions;
 exports.CCenter = require_index$11.CCenter;
 exports.CCloseButton = require_index$7.CCloseButton;
-exports.CCol = require_index$15.CCol;
+exports.CCol = require_index$16.CCol;
 exports.CContainer = require_index$12.CContainer;
+exports.CCopyButton = require_index$13.CCopyButton;
 exports.CDefaultLoaders = require_index$4.CDefaultLoaders;
-exports.CEmptyState = require_index$13.CEmptyState;
-exports.CEmptyStateActions = require_index$13.CEmptyStateActions;
-exports.CEmptyStateDescription = require_index$13.CEmptyStateDescription;
-exports.CEmptyStateIndicator = require_index$13.CEmptyStateIndicator;
-exports.CEmptyStateTitle = require_index$13.CEmptyStateTitle;
-exports.CFlex = require_index$14.CFlex;
-exports.CGrid = require_index$15.CGrid;
-exports.CGroup = require_index$16.CGroup;
-exports.CImage = require_index$17.CImage;
+exports.CEmptyState = require_index$14.CEmptyState;
+exports.CEmptyStateActions = require_index$14.CEmptyStateActions;
+exports.CEmptyStateDescription = require_index$14.CEmptyStateDescription;
+exports.CEmptyStateIndicator = require_index$14.CEmptyStateIndicator;
+exports.CEmptyStateTitle = require_index$14.CEmptyStateTitle;
+exports.CFlex = require_index$15.CFlex;
+exports.CGrid = require_index$16.CGrid;
+exports.CGroup = require_index$17.CGroup;
+exports.CImage = require_index$18.CImage;
 exports.CLoader = require_index$4.CLoader;
 exports.CONFIG_KEY = require_config_provider_types.CONFIG_KEY;
-exports.CPaper = require_index$18.CPaper;
-exports.CSemiCircleProgress = require_index$19.CSemiCircleProgress;
-exports.CSimpleGrid = require_index$20.CSimpleGrid;
-exports.CSkeleton = require_index$21.CSkeleton;
-exports.CSpace = require_index$22.CSpace;
-exports.CSplitter = require_index$23.CSplitter;
-exports.CSplitterPane = require_index$23.CSplitterPane;
-exports.CStack = require_index$24.CStack;
-exports.CText = require_index$25.CText;
+exports.CPaper = require_index$19.CPaper;
+exports.CSemiCircleProgress = require_index$20.CSemiCircleProgress;
+exports.CSimpleGrid = require_index$21.CSimpleGrid;
+exports.CSkeleton = require_index$22.CSkeleton;
+exports.CSpace = require_index$23.CSpace;
+exports.CSplitter = require_index$24.CSplitter;
+exports.CSplitterPane = require_index$24.CSplitterPane;
+exports.CStack = require_index$25.CStack;
+exports.CText = require_index$26.CText;
 exports.CTransition = require_index$5.CTransition;
 exports.CckConfigProvider = require_index$1.CckConfigProvider;
 exports.CckUI = CckUI;

package/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["CckConfigProvider","CBox","CActionIcon","CActionIconGroup","CActionIconGroupSection","CAlert","CAspectRatio","CButton","CButtonGroup","CButtonGroupSection","CCenter","CCloseButton","CCol","CContainer","CEmptyState","CEmptyStateActions","CEmptyStateDescription","CEmptyStateIndicator","CEmptyStateTitle","CFlex","CGrid","CGroup","CImage","CLoader","CPaper","CSemiCircleProgress","CSimpleGrid","CSkeleton","CSpace","CSplitter","CSplitterPane","CStack","CText","CTransition","UnstyledButton"],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjBA,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,gBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,gBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
+{"version":3,"file":"index.cjs","names":["CckConfigProvider","CBox","CActionIcon","CActionIconGroup","CActionIconGroupSection","CAlert","CAspectRatio","CButton","CButtonGroup","CButtonGroupSection","CCenter","CCloseButton","CCol","CContainer","CCopyButton","CEmptyState","CEmptyStateActions","CEmptyStateDescription","CEmptyStateIndicator","CEmptyStateTitle","CFlex","CGrid","CGroup","CImage","CLoader","CPaper","CSemiCircleProgress","CSimpleGrid","CSkeleton","CSpace","CSplitter","CSplitterPane","CStack","CText","CTransition","UnstyledButton"],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjBA,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,gBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,gBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,iBAAAA;CACAC,gBAAAA;CACAC,gBAAAA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}

package/esm/components/action-icon/action-icon-group/action-icon-group.mjs

@@ -331,12 +331,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"mod",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "ActionIconGroup",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: action_icon_module_default,
 			className: props.value.className,
 			style: props.value.style,
@@ -370,6 +372,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			defaultProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			groupAttrs,

package/esm/components/action-icon/action-icon-group/action-icon-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"action-icon-group.mjs","names":[],"sources":["../../../../src/components/action-icon/action-icon-group/action-icon-group.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_group\" role=\"group\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../../core'\nimport { ActionIconGroupFactory, ActionIconGroupProps } from './action-icon-group.types'\nimport classes from '../action-icon.module.css'\nimport { varsResolver } from './action-icon-group.utils'\n\ndefineOptions({\n  name: 'CActionIconGroup',\n})\n\nconst _group = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconGroupProps>()\n\nconst defaultProps = {\n  orientation: 'horizontal',\n} satisfies Partial<ActionIconGroupProps>\n\nconst props = useComponentProps({\n  component: 'CActionIconGroup',\n  defaultProps,\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'orientation',\n  'vars',\n  'borderWidth',\n  'mod',\n  'attributes',\n]\n\nconst getStyles = useStyles<ActionIconGroupFactory>({\n  name: 'ActionIconGroup',\n  props: { ...props.value, ...attrs } as ActionIconGroupProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n  rootSelector: 'group',\n})\n\nconst modList = computed(() => [\n  {\n    orientation: props.value.orientation,\n  },\n])\n\nconst groupAttrs = computed(() => getStyles('group'))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...groupAttrs.value }\n})\n\ndefineExpose({\n  group: computed(() => _group.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,SAAS,IAAsC,IAAI;EAEzD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,aAAa,aACf;EAEA,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAAkC;GAClD,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,UAAU,eAAe,CAC7B,EACE,aAAa,MAAM,MAAM,YAC3B,CACF,CAAC;EAED,MAAM,aAAa,eAAe,UAAU,OAAO,CAAC;EACpD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,WAAW;GAAM;EAC1D,CAAC;EAED,SAAa,EACX,OAAO,eAAe,OAAO,OAAO,QAAQ,IAAI,EAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;qBArFC,YAEQ,OAAA,SAFR,WAEQ;EAFD,KAAI;EAAS,MAAK;IAAgB,OAAA,WAAW,GAAA;yBAC1C,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"action-icon-group.mjs","names":[],"sources":["../../../../src/components/action-icon/action-icon-group/action-icon-group.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_group\" role=\"group\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../../core'\nimport { ActionIconGroupFactory, ActionIconGroupProps } from './action-icon-group.types'\nimport classes from '../action-icon.module.css'\nimport { varsResolver } from './action-icon-group.utils'\n\ndefineOptions({\n  name: 'CActionIconGroup',\n})\n\nconst _group = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconGroupProps>()\n\nconst defaultProps = {\n  orientation: 'horizontal',\n} satisfies Partial<ActionIconGroupProps>\n\nconst props = useComponentProps({\n  component: 'CActionIconGroup',\n  defaultProps,\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'orientation',\n  'vars',\n  'borderWidth',\n  'mod',\n  'attributes',\n]\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<ActionIconGroupFactory>({\n  name: 'ActionIconGroup',\n  props: styleProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n  rootSelector: 'group',\n})\n\nconst modList = computed(() => [\n  {\n    orientation: props.value.orientation,\n  },\n])\n\nconst groupAttrs = computed(() => getStyles('group'))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...groupAttrs.value }\n})\n\ndefineExpose({\n  group: computed(() => _group.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,SAAS,IAAsC,IAAI;EAEzD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,aAAa,aACf;EAEA,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAkC;GAClD,MAAM;GACN,OAAO;GACP,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,UAAU,eAAe,CAC7B,EACE,aAAa,MAAM,MAAM,YAC3B,CACF,CAAC;EAED,MAAM,aAAa,eAAe,UAAU,OAAO,CAAC;EACpD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,WAAW;GAAM;EAC1D,CAAC;EAED,SAAa,EACX,OAAO,eAAe,OAAO,OAAO,QAAQ,IAAI,EAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;qBA3FC,YAEQ,OAAA,SAFR,WAEQ;EAFD,KAAI;EAAS,MAAK;IAAgB,OAAA,WAAW,GAAA;yBAC1C,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/action-icon/action-icon-group-section/action-icon-group-section.mjs

@@ -337,18 +337,19 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"styles",
 			"unstyled",
 			"vars",
-			"variant",
 			"gradient",
 			"radius",
 			"autoContrast",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "ActionIconGroupSection",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: action_icon_module_default,
 			className: props.value.className,
 			style: props.value.style,
@@ -364,7 +365,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const mergedAttrs = computed(() => {
 			const others = {};
 			const propsValue = props.value;
-			for (const key in propsValue) others[key] = propsValue[key];
+			for (const key in propsValue) if (!knownProps.includes(key)) others[key] = propsValue[key];
 			const userMod = props.value.mod;
 			const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)];
 			return {
@@ -380,6 +381,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			sectionAttrs,
 			mergedAttrs,

package/esm/components/action-icon/action-icon-group-section/action-icon-group-section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"action-icon-group-section.mjs","names":[],"sources":["../../../../src/components/action-icon/action-icon-group-section/action-icon-group-section.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../../core'\nimport classes from '../action-icon.module.css'\nimport {\n  ActionIconGroupSectionFactory,\n  ActionIconGroupSectionProps,\n} from './action-icon-group-section.types'\nimport { varsResolver } from './action-icon-group-section.utils'\n\ndefineOptions({\n  name: 'CActionIconGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconGroupSectionProps>()\n\nconst props = useComponentProps({\n  component: 'CActionIconGroupSection',\n  defaultProps: {},\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'vars',\n  'variant',\n  'gradient',\n  'radius',\n  'autoContrast',\n  'attributes',\n]\n\nconst getStyles = useStyles<ActionIconGroupSectionFactory>({\n  name: 'ActionIconGroupSection',\n  props: { ...props.value, ...attrs } as ActionIconGroupSectionProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n  rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    others[key] = propsValue[key as keyof typeof propsValue]\n  }\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n  return { ...others, mod: mergedMod, ...sectionAttrs.value }\n})\n\ndefineExpose({\n  section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,WAAW,IAAsC,IAAI;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAAyC;GACzD,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,eAAe,eAAe,UAAU,cAAc,CAAC;EAC7D,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,OAAO,OAAO,WAAW;GAE3B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,SAAS,eAAe,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;qBA1EC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;yBAC/B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"action-icon-group-section.mjs","names":[],"sources":["../../../../src/components/action-icon/action-icon-group-section/action-icon-group-section.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../../core'\nimport classes from '../action-icon.module.css'\nimport {\n  ActionIconGroupSectionFactory,\n  ActionIconGroupSectionProps,\n} from './action-icon-group-section.types'\nimport { varsResolver } from './action-icon-group-section.utils'\n\ndefineOptions({\n  name: 'CActionIconGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconGroupSectionProps>()\n\nconst props = useComponentProps({\n  component: 'CActionIconGroupSection',\n  defaultProps: {},\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'vars',\n  'gradient',\n  'radius',\n  'autoContrast',\n  'attributes',\n]\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<ActionIconGroupSectionFactory>({\n  name: 'ActionIconGroupSection',\n  props: styleProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n  rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n  return { ...others, mod: mergedMod, ...sectionAttrs.value }\n})\n\ndefineExpose({\n  section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,WAAW,IAAsC,IAAI;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAyC;GACzD,MAAM;GACN,OAAO;GACP,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,eAAe,eAAe,UAAU,cAAc,CAAC;EAC7D,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,SAAS,eAAe,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBAjFC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;yBAC/B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/action-icon/action-icon.mjs

@@ -374,12 +374,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"mod",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: ["ActionIcon", props.value.__staticSelector],
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: action_icon_module_default,
 			className: props.value.className,
 			style: props.value.style,
@@ -415,6 +417,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

package/esm/components/action-icon/action-icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"action-icon.mjs","names":[],"sources":["../../../src/components/action-icon/action-icon.vue"],"sourcesContent":["<template>\n  <unstyled-button\n    ref=\"_root\"\n    v-bind=\"mergedRootAttrs\"\n    :aria-busy=\"props.loading || undefined\"\n    :disabled=\"props.disabled || props.loading\"\n    :size=\"props.size\"\n    :unstyled=\"props.unstyled\"\n  >\n    <c-transition\n      transition=\"slide-down\"\n      v-if=\"typeof props.loading === 'boolean'\"\n      :duration=\"150\"\n      :mounted=\"props.loading\"\n    >\n      <template #default=\"{ styles }\">\n        <c-box\n          aria-hidden=\"true\"\n          ref=\"_inner\"\n          tag=\"span\"\n          v-bind=\"getStyles('loader', { style: styles })\"\n        >\n          <c-loader\n            color=\"var(--ai-color)\"\n            size=\"calc(var(--ai-size) * 0.55)\"\n            v-bind=\"props.loaderProps\"\n          ></c-loader>\n        </c-box>\n      </template>\n    </c-transition>\n\n    <c-box tag=\"span\" v-bind=\"getStyles('icon')\" :mod=\"{ loading: props.loading }\">\n      <slot />\n    </c-box>\n  </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport UnstyledButton from '../unstyled-button'\nimport { CLoader } from '../loader'\nimport { CTransition } from '../transition'\nimport { computed, ref, useAttrs } from 'vue'\nimport { ActionIconFactory, ActionIconProps } from './action-icon.types'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './action-icon.module.css'\nimport { varsResolver } from './action-icon.utils'\n\ndefineOptions({\n  name: 'CActionIcon',\n})\n\nconst _root = ref<InstanceType<typeof UnstyledButton> | null>(null)\nconst _inner = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconProps>()\n\nconst props = useComponentProps({\n  component: 'CActionIcon',\n  defaultProps: {},\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'classNames',\n  'style',\n  'styles',\n  'unstyled',\n  'loading',\n  'loaderProps',\n  'size',\n  'color',\n  'radius',\n  '__staticSelector',\n  'gradient',\n  'vars',\n  'disabled',\n  'dataDisabled',\n  'autoContrast',\n  'mod',\n  'attributes',\n]\n\nconst getStyles = useStyles<ActionIconFactory>({\n  name: ['ActionIcon', props.value.__staticSelector],\n  props: { ...props.value, ...attrs } as ActionIconProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n})\n\nconst modList = computed(() => [\n  { disabled: props.value.disabled || props.value.dataDisabled },\n  { loading: props.value.loading },\n])\n\nconst rootAttrs = computed(() =>\n  getStyles('root', {\n    active: !props.value.disabled && !props.value.loading && !props.value.dataDisabled,\n  })\n)\n\nconst mergedRootAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n  inner: computed(() => _inner.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"action-icon.mjs","names":[],"sources":["../../../src/components/action-icon/action-icon.vue"],"sourcesContent":["<template>\n  <unstyled-button\n    ref=\"_root\"\n    v-bind=\"mergedRootAttrs\"\n    :aria-busy=\"props.loading || undefined\"\n    :disabled=\"props.disabled || props.loading\"\n    :size=\"props.size\"\n    :unstyled=\"props.unstyled\"\n  >\n    <c-transition\n      transition=\"slide-down\"\n      v-if=\"typeof props.loading === 'boolean'\"\n      :duration=\"150\"\n      :mounted=\"props.loading\"\n    >\n      <template #default=\"{ styles }\">\n        <c-box\n          aria-hidden=\"true\"\n          ref=\"_inner\"\n          tag=\"span\"\n          v-bind=\"getStyles('loader', { style: styles })\"\n        >\n          <c-loader\n            color=\"var(--ai-color)\"\n            size=\"calc(var(--ai-size) * 0.55)\"\n            v-bind=\"props.loaderProps\"\n          ></c-loader>\n        </c-box>\n      </template>\n    </c-transition>\n\n    <c-box tag=\"span\" v-bind=\"getStyles('icon')\" :mod=\"{ loading: props.loading }\">\n      <slot />\n    </c-box>\n  </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport UnstyledButton from '../unstyled-button'\nimport { CLoader } from '../loader'\nimport { CTransition } from '../transition'\nimport { computed, ref, useAttrs } from 'vue'\nimport { ActionIconFactory, ActionIconProps } from './action-icon.types'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './action-icon.module.css'\nimport { varsResolver } from './action-icon.utils'\n\ndefineOptions({\n  name: 'CActionIcon',\n})\n\nconst _root = ref<InstanceType<typeof UnstyledButton> | null>(null)\nconst _inner = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconProps>()\n\nconst props = useComponentProps({\n  component: 'CActionIcon',\n  defaultProps: {},\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'classNames',\n  'style',\n  'styles',\n  'unstyled',\n  'loading',\n  'loaderProps',\n  'size',\n  'color',\n  'radius',\n  '__staticSelector',\n  'gradient',\n  'vars',\n  'disabled',\n  'dataDisabled',\n  'autoContrast',\n  'mod',\n  'attributes',\n]\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<ActionIconFactory>({\n  name: ['ActionIcon', props.value.__staticSelector],\n  props: styleProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n})\n\nconst modList = computed(() => [\n  { disabled: props.value.disabled || props.value.dataDisabled },\n  { loading: props.value.loading },\n])\n\nconst rootAttrs = computed(() =>\n  getStyles('root', {\n    active: !props.value.disabled && !props.value.loading && !props.value.dataDisabled,\n  })\n)\n\nconst mergedRootAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n  inner: computed(() => _inner.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/esm/components/alert/alert.mjs

@@ -355,12 +355,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"role",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "Alert",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: alert_module_default,
 			className: props.value.className,
 			style: props.value.style,
@@ -402,6 +404,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootId,
 			titleId,

package/esm/components/alert/alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert.mjs","names":[],"sources":["../../../src/components/alert/alert.vue"],"sourcesContent":["<template>\n  <c-box\n    ref=\"_root\"\n    v-bind=\"mergedRootAttrs\"\n    :aria-describedby=\"$slots.default ? bodyId : undefined\"\n    :aria-labelledby=\"$slots.title ? titleId : undefined\"\n    :id=\"rootId\"\n    :role=\"props.role || 'alert'\"\n    :variant=\"props.variant\"\n  >\n    <c-box v-bind=\"wrapperAttrs\">\n      <c-box v-bind=\"iconAttrs\" v-if=\"$slots.icon\">\n        <slot name=\"icon\" />\n      </c-box>\n\n      <c-box v-bind=\"bodyAttrs\">\n        <c-box\n          v-bind=\"titleAttrs\"\n          v-if=\"$slots.title\"\n          :data-with-close-button=\"props.withCloseButton || undefined\"\n        >\n          <c-box tag=\"span\" :id=\"titleId\" v-bind=\"labelAttrs\">\n            <slot name=\"title\" />\n          </c-box>\n        </c-box>\n\n        <c-box\n          v-bind=\"messageAttrs\"\n          v-if=\"$slots.default\"\n          :data-variant=\"props.variant\"\n          :id=\"bodyId\"\n        >\n          <slot />\n        </c-box>\n      </c-box>\n\n      <c-close-button\n        v-bind=\"closeButtonAttrs\"\n        v-if=\"props.withCloseButton\"\n        :aria-label=\"closeButtonLabel\"\n        :icon-size=\"16\"\n        :size=\"16\"\n        :unstyled=\"props.unstyled\"\n        variant=\"transparent\"\n        @click=\"props.onClose\"\n      ></c-close-button>\n    </c-box>\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { useId } from '@cck-ui/hooks'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './alert.module.css'\nimport { AlertFactory, type AlertProps } from './alert.types'\nimport { varsResolver } from './alert.utils'\nimport CCloseButton from '../close-button'\n\ndefineOptions({\n  name: 'CAlert',\n})\n\nconst slots = defineSlots<{\n  default: any\n  icon: any\n  title: any\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<AlertProps>()\n\nconst props = useComponentProps({\n  component: 'CAlert',\n  defaultProps: {},\n  props: rawProps,\n})\n\nconst knownProps = [\n  'style',\n  'className',\n  'styles',\n  'classNames',\n  'unstyled',\n  'vars',\n  'radius',\n  'color',\n  'id',\n  'withCloseButton',\n  'onClose',\n  'closeButtonLabel',\n  'variant',\n  'autoContrast',\n  'role',\n  'attributes',\n]\n\nconst getStyles = useStyles<AlertFactory>({\n  name: 'Alert',\n  props: { ...props.value, ...attrs } as AlertProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n})\n\nconst rootId = useId(props.value.id).value\nconst titleId = (slots.title && `${rootId}-title`) || undefined\nconst bodyId = `${rootId}-body`\n\nconst rootAttrs = computed(() => getStyles('root'))\nconst wrapperAttrs = computed(() => getStyles('wrapper'))\nconst iconAttrs = computed(() => getStyles('icon'))\nconst bodyAttrs = computed(() => getStyles('body'))\nconst titleAttrs = computed(() => getStyles('title'))\nconst labelAttrs = computed(() => getStyles('label'))\nconst messageAttrs = computed(() => getStyles('message'))\nconst closeButtonAttrs = computed(() => getStyles('close-button'))\n\nconst mergedRootAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod])]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"alert.mjs","names":[],"sources":["../../../src/components/alert/alert.vue"],"sourcesContent":["<template>\n  <c-box\n    ref=\"_root\"\n    v-bind=\"mergedRootAttrs\"\n    :aria-describedby=\"$slots.default ? bodyId : undefined\"\n    :aria-labelledby=\"$slots.title ? titleId : undefined\"\n    :id=\"rootId\"\n    :role=\"props.role || 'alert'\"\n    :variant=\"props.variant\"\n  >\n    <c-box v-bind=\"wrapperAttrs\">\n      <c-box v-bind=\"iconAttrs\" v-if=\"$slots.icon\">\n        <slot name=\"icon\" />\n      </c-box>\n\n      <c-box v-bind=\"bodyAttrs\">\n        <c-box\n          v-bind=\"titleAttrs\"\n          v-if=\"$slots.title\"\n          :data-with-close-button=\"props.withCloseButton || undefined\"\n        >\n          <c-box tag=\"span\" :id=\"titleId\" v-bind=\"labelAttrs\">\n            <slot name=\"title\" />\n          </c-box>\n        </c-box>\n\n        <c-box\n          v-bind=\"messageAttrs\"\n          v-if=\"$slots.default\"\n          :data-variant=\"props.variant\"\n          :id=\"bodyId\"\n        >\n          <slot />\n        </c-box>\n      </c-box>\n\n      <c-close-button\n        v-bind=\"closeButtonAttrs\"\n        v-if=\"props.withCloseButton\"\n        :aria-label=\"closeButtonLabel\"\n        :icon-size=\"16\"\n        :size=\"16\"\n        :unstyled=\"props.unstyled\"\n        variant=\"transparent\"\n        @click=\"props.onClose\"\n      ></c-close-button>\n    </c-box>\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { useId } from '@cck-ui/hooks'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './alert.module.css'\nimport { AlertFactory, type AlertProps } from './alert.types'\nimport { varsResolver } from './alert.utils'\nimport CCloseButton from '../close-button'\n\ndefineOptions({\n  name: 'CAlert',\n})\n\nconst slots = defineSlots<{\n  default: any\n  icon: any\n  title: any\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<AlertProps>()\n\nconst props = useComponentProps({\n  component: 'CAlert',\n  defaultProps: {},\n  props: rawProps,\n})\n\nconst knownProps = [\n  'style',\n  'className',\n  'styles',\n  'classNames',\n  'unstyled',\n  'vars',\n  'radius',\n  'color',\n  'id',\n  'withCloseButton',\n  'onClose',\n  'closeButtonLabel',\n  'variant',\n  'autoContrast',\n  'role',\n  'attributes',\n]\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<AlertFactory>({\n  name: 'Alert',\n  props: styleProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n})\n\nconst rootId = useId(props.value.id).value\nconst titleId = (slots.title && `${rootId}-title`) || undefined\nconst bodyId = `${rootId}-body`\n\nconst rootAttrs = computed(() => getStyles('root'))\nconst wrapperAttrs = computed(() => getStyles('wrapper'))\nconst iconAttrs = computed(() => getStyles('icon'))\nconst bodyAttrs = computed(() => getStyles('body'))\nconst titleAttrs = computed(() => getStyles('title'))\nconst labelAttrs = computed(() => getStyles('label'))\nconst messageAttrs = computed(() => getStyles('message'))\nconst closeButtonAttrs = computed(() => getStyles('close-button'))\n\nconst mergedRootAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod])]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/esm/components/aspect-ratio/aspect-ratio.mjs

@@ -324,12 +324,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"ratio",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "AspectRatio",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: aspect_ratio_module_default,
 			className: props.value.className,
 			classNames: props.value.classNames,
@@ -362,6 +364,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

package/esm/components/aspect-ratio/aspect-ratio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"aspect-ratio.mjs","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { AspectRatioFactory, AspectRatioProps } from './aspect-ratio.types'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './aspect-ratio.module.css'\nimport { varsResolver } from './aspect-ratio.utils'\n\ndefineOptions({\n  name: 'CAspectRatio',\n})\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<AspectRatioProps>()\n\nconst props = useComponentProps({\n  component: 'CAspectRatio',\n  defaultProps: {},\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'unstyled',\n  'vars',\n  'ratio',\n  'attributes',\n]\n\nconst getStyles = useStyles<AspectRatioFactory>({\n  name: 'AspectRatio',\n  props: { ...props.value, ...attrs } as AspectRatioProps,\n  classes,\n  className: props.value.className,\n  classNames: props.value.classNames,\n  style: props.value.style,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAA8B;GAC9C,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,YAAY,MAAM,MAAM;GACxB,OAAO,MAAM,MAAM;GACnB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;qBAtEC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBAC5B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"aspect-ratio.mjs","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { AspectRatioFactory, AspectRatioProps } from './aspect-ratio.types'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './aspect-ratio.module.css'\nimport { varsResolver } from './aspect-ratio.utils'\n\ndefineOptions({\n  name: 'CAspectRatio',\n})\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<AspectRatioProps>()\n\nconst props = useComponentProps({\n  component: 'CAspectRatio',\n  defaultProps: {},\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'unstyled',\n  'vars',\n  'ratio',\n  'attributes',\n]\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<AspectRatioFactory>({\n  name: 'AspectRatio',\n  props: styleProps,\n  classes,\n  className: props.value.className,\n  classNames: props.value.classNames,\n  style: props.value.style,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAA8B;GAC9C,MAAM;GACN,OAAO;GACP,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,YAAY,MAAM,MAAM;GACxB,OAAO,MAAM,MAAM;GACnB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBA5EC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBAC5B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/button/button-group/button-group.mjs

@@ -332,12 +332,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"mod",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "ButtonGroup",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: button_module_default,
 			className: props.value.className,
 			style: props.value.style,
@@ -374,6 +376,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			groupAttrs,

package/esm/components/button/button-group/button-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.mjs","names":[],"sources":["../../../../src/components/button/button-group/button-group.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_group\" role=\"group\" v-bind=\"mergedAttrs\">\n    <template v-for=\"(child, index) in validChildren\" :key=\"child.key ?? index\">\n      <component :is=\"child\" />\n    </template>\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../../core'\nimport classes from '../button.module.css'\nimport { ButtonGroupFactory, type ButtonGroupProps } from './button-group.types'\nimport { useButtonGroup } from './use-button-group'\nimport { varsResolver } from './button-group.utils'\n\ndefineOptions({\n  name: 'CButtonGroup',\n})\n\nconst _group = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<ButtonGroupProps>()\n\nconst props = useComponentProps({\n  component: 'CButtonGroup',\n  defaultProps: {\n    orientation: 'horizontal',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'orientation',\n  'vars',\n  'borderWidth',\n  'mod',\n  'attributes',\n]\n\nconst getStyles = useStyles<ButtonGroupFactory>({\n  name: 'ButtonGroup',\n  props: { ...props.value, ...attrs } as ButtonGroupProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n  rootSelector: 'group',\n})\n\nconst modList = computed(() => [\n  {\n    orientation: props.value.orientation,\n  },\n])\n\nconst groupAttrs = computed(() => getStyles('group'))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...groupAttrs.value }\n})\n\nconst { validChildren } = useButtonGroup(slots)\n\ndefineExpose({\n  group: computed(() => _group.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,SAAS,IAAsC,IAAI;EAEzD,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,aAAa,aACf;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAA8B;GAC9C,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,UAAU,eAAe,CAC7B,EACE,aAAa,MAAM,MAAM,YAC3B,CACF,CAAC;EAED,MAAM,aAAa,eAAe,UAAU,OAAO,CAAC;EACpD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,WAAW;GAAM;EAC1D,CAAC;EAED,MAAM,EAAE,kBAAkB,eAAe,KAAK;EAE9C,SAAa,EACX,OAAO,eAAe,OAAO,OAAO,QAAQ,IAAI,EAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;qBAzFC,YAIQ,OAAA,SAJR,WAIQ;EAJD,KAAI;EAAS,MAAK;IAAgB,OAAA,WAAW,GAAA;yBACD,EAAA,UAAA,IAAA,GAAjD,mBAEW,UAAA,MAAA,WAFwB,OAAA,gBAAjB,OAAO,UAAK;uBAC5B,YAAyB,wBAAT,KAAK,GAAA,EAAA,KADiC,MAAM,OAAO,MAAA,CAAA"}
+{"version":3,"file":"button-group.mjs","names":[],"sources":["../../../../src/components/button/button-group/button-group.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_group\" role=\"group\" v-bind=\"mergedAttrs\">\n    <template v-for=\"(child, index) in validChildren\" :key=\"child.key ?? index\">\n      <component :is=\"child\" />\n    </template>\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../../core'\nimport classes from '../button.module.css'\nimport { ButtonGroupFactory, type ButtonGroupProps } from './button-group.types'\nimport { useButtonGroup } from './use-button-group'\nimport { varsResolver } from './button-group.utils'\n\ndefineOptions({\n  name: 'CButtonGroup',\n})\n\nconst _group = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<ButtonGroupProps>()\n\nconst props = useComponentProps({\n  component: 'CButtonGroup',\n  defaultProps: {\n    orientation: 'horizontal',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'orientation',\n  'vars',\n  'borderWidth',\n  'mod',\n  'attributes',\n]\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<ButtonGroupFactory>({\n  name: 'ButtonGroup',\n  props: styleProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n  rootSelector: 'group',\n})\n\nconst modList = computed(() => [\n  {\n    orientation: props.value.orientation,\n  },\n])\n\nconst groupAttrs = computed(() => getStyles('group'))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...groupAttrs.value }\n})\n\nconst { validChildren } = useButtonGroup(slots)\n\ndefineExpose({\n  group: computed(() => _group.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,SAAS,IAAsC,IAAI;EAEzD,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,aAAa,aACf;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAA8B;GAC9C,MAAM;GACN,OAAO;GACP,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,UAAU,eAAe,CAC7B,EACE,aAAa,MAAM,MAAM,YAC3B,CACF,CAAC;EAED,MAAM,aAAa,eAAe,UAAU,OAAO,CAAC;EACpD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,WAAW;GAAM;EAC1D,CAAC;EAED,MAAM,EAAE,kBAAkB,eAAe,KAAK;EAE9C,SAAa,EACX,OAAO,eAAe,OAAO,OAAO,QAAQ,IAAI,EAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;qBA/FC,YAIQ,OAAA,SAJR,WAIQ;EAJD,KAAI;EAAS,MAAK;IAAgB,OAAA,WAAW,GAAA;yBACD,EAAA,UAAA,IAAA,GAAjD,mBAEW,UAAA,MAAA,WAFwB,OAAA,gBAAjB,OAAO,UAAK;uBAC5B,YAAyB,wBAAT,KAAK,GAAA,EAAA,KADiC,MAAM,OAAO,MAAA,CAAA"}

package/esm/components/button/button-group-section/button-group-section.mjs

@@ -338,12 +338,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"autoContrast",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "ButtonGroupSection",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: button_module_default,
 			className: props.value.className,
 			style: props.value.style,
@@ -377,6 +379,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			sectionAttrs,
 			mergedAttrs,

package/esm/components/button/button-group-section/button-group-section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-group-section.mjs","names":[],"sources":["../../../../src/components/button/button-group-section/button-group-section.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../../core'\nimport type {\n  ButtonGroupSectionFactory,\n  ButtonGroupSectionProps,\n} from './button-group-section.types'\nimport classes from '../button.module.css'\nimport { varsResolver } from './button-group-section.utils'\n\ndefineOptions({\n  name: 'CButtonGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ButtonGroupSectionProps>()\n\nconst props = useComponentProps({\n  component: 'CButtonGroupSection',\n  defaultProps: {\n    variant: 'default',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'vars',\n  'gradient',\n  'radius',\n  'autoContrast',\n  'attributes',\n]\n\nconst getStyles = useStyles<ButtonGroupSectionFactory>({\n  name: 'ButtonGroupSection',\n  props: { ...props.value, ...attrs } as ButtonGroupSectionProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n  rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n  return { ...others, mod: mergedMod, ...sectionAttrs.value }\n})\n\ndefineExpose({\n  section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,WAAW,IAAsC,IAAI;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,SAAS,UACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAAqC;GACrD,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,eAAe,eAAe,UAAU,cAAc,CAAC;EAC7D,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,SAAS,eAAe,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;qBA7EC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;yBAC/B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"button-group-section.mjs","names":[],"sources":["../../../../src/components/button/button-group-section/button-group-section.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../../core'\nimport type {\n  ButtonGroupSectionFactory,\n  ButtonGroupSectionProps,\n} from './button-group-section.types'\nimport classes from '../button.module.css'\nimport { varsResolver } from './button-group-section.utils'\n\ndefineOptions({\n  name: 'CButtonGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ButtonGroupSectionProps>()\n\nconst props = useComponentProps({\n  component: 'CButtonGroupSection',\n  defaultProps: {\n    variant: 'default',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'vars',\n  'gradient',\n  'radius',\n  'autoContrast',\n  'attributes',\n]\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<ButtonGroupSectionFactory>({\n  name: 'ButtonGroupSection',\n  props: styleProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n  rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n  return { ...others, mod: mergedMod, ...sectionAttrs.value }\n})\n\ndefineExpose({\n  section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,WAAW,IAAsC,IAAI;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,SAAS,UACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAqC;GACrD,MAAM;GACN,OAAO;GACP,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,eAAe,eAAe,UAAU,cAAc,CAAC;EAC7D,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,SAAS,eAAe,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBAnFC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;yBAC/B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/button/button.mjs

@@ -404,12 +404,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"mod",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: "Button",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: button_module_default,
 			className: props.value.className,
 			style: props.value.style,
@@ -462,6 +464,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,