lapikit 0.7.1 → 0.7.3

package/dist/utils/components.js

@@ -1,5 +1,6 @@
 import { DEV } from 'esm-env';
 import { makeComponentProps } from '../html-mapped';
+import { colorStyle } from './color.js';
 const endsWithSeparator = /[^a-zA-Z0-9]$/;
 const startsWithSeparator = /^[^a-zA-Z0-9]/;
 const whitespace = /\s/;
@@ -224,15 +225,21 @@ export function useElevation(elevation) {
  * ({ active: isActive } -> active). The s-class_xxx directives (class:xxx on a kit tag) keep their
  * rule: class:gap={4} -> gap-4.
  *
- * @param baseClass - The class of the component ('kit-btn-v2'), '' for none.
- * @param props - The class, s-class, style and s-style props of the component.
+ * @param baseClass - The class of the component ('kit-btn'), '' for none.
+ * The color prop gives the --{baseClass}-color / --{baseClass}-on-color variables, read by the
+ * color mixin; they come before the style, so the style attribute still wins.
+ * With { base, active }, active picks the color of the active state.
+ *
+ * @param props - The class, s-class, style, s-style, color and active props of the component.
  * @param rest - The rest of the props: the s-class_xxx / s-style_xxx directives are taken out of it.
  */
-export function useComponentAttrs(baseClass, { className, sClass, styleAttr, sStyle }, rest) {
+export function useComponentAttrs(baseClass, { className, sClass, styleAttr, sStyle, color, active }, rest) {
     const { classProps, styleProps, restProps } = makeComponentProps(rest);
     return {
         class: [baseClass, sClass, directiveClasses(classProps), className],
-        style: useStyles({ styleAttr, sStyle, styleProps }),
+        style: [colorStyle(baseClass, color, active), useStyles({ styleAttr, sStyle, styleProps })]
+            .filter(Boolean)
+            .join('; '),
         rest: restProps
     };
 }

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components.js';
 export * from './outside.js';
+export * from './color.js';

package/dist/utils/index.js

@@ -1,2 +1,3 @@
 export * from './components.js';
 export * from './outside.js';
+export * from './color.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.7.1",
+	"version": "0.7.3",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"