@webmate-studio/builder 0.2.178 → 0.2.180

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.178",
+  "version": "0.2.180",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/design-tokens-v2-css.js

@@ -187,9 +187,9 @@ function generateColorUtilities(t) {
 
 		for (let step = 1; step <= 12; step++) {
 			const varRef = `--color-${world}-${step}`;
-			addColorUtility(css = css, processed, `bg-${world}-${step}`, 'background-color', varRef);
-			addColorUtility(css = css, processed, `text-${world}-${step}`, 'color', varRef);
-			addColorUtility(css = css, processed, `border-${world}-${step}`, 'border-color', varRef);
+			css = addColorUtility(css, processed, `bg-${world}-${step}`, 'background-color', varRef);
+			css = addColorUtility(css, processed, `text-${world}-${step}`, 'color', varRef);
+			css = addColorUtility(css, processed, `border-${world}-${step}`, 'border-color', varRef);
 
 			// Opacity-Varianten
 			for (const step2 of opacitySteps) {

package/src/template-evaluator.js

@@ -40,7 +40,8 @@ class TemplateEvaluator {
 			case 'Fragment':
 				return this.evalFragment(node, ctx);
 			case 'Text':
-				return node.value;
+				// Strip closing tags of built-in micro-components (they output complete HTML)
+				return node.value.replace(/<\/wm-button>/g, '');
 			case 'Expression':
 				return this.evalExpression(node, ctx);
 			case 'HtmlExpression':
@@ -194,6 +195,11 @@ class TemplateEvaluator {
 			return this.evalIslandTag(node, ctx);
 		}
 
+		// Built-in micro-components
+		if (node.tagName === 'wm-button') {
+			return this.evalWmButton(node, ctx);
+		}
+
 		let result = `<${node.tagName}`;
 
 		// Collect all class names (static + conditional)
@@ -305,6 +311,70 @@ class TemplateEvaluator {
 		return `<${kebabTag}${propsAttr}></${kebabTag}>`;
 	}
 
+	/**
+	 * Built-in micro-component: <wm-button settings={button}></wm-button>
+	 *
+	 * Transforms to semantic HTML with Design System button classes.
+	 * Settings object: { title, link, icon, variant, size, iconPosition, openInNewTab }
+	 *
+	 * Size mapping: small/sm → btn-sm, medium/md → btn-md, large/lg → btn-lg
+	 * Variant mapping: primary → btn-filled, filled/tonal/outline/ghost/text/destructive → btn-{variant}
+	 */
+	evalWmButton(node, ctx) {
+		// Resolve the settings prop
+		let settings = null;
+		for (const attr of node.attributes) {
+			if (attr.name === 'settings') {
+				if (attr.type === 'DynamicAttribute') {
+					settings = this.expr.evaluate(attr.expression, ctx);
+				} else if (attr.type === 'StaticAttribute') {
+					settings = attr.value;
+				}
+			}
+		}
+
+		if (!settings || typeof settings !== 'object') {
+			return '<!-- wm-button: no settings -->';
+		}
+
+		const {
+			title = '',
+			link = '#',
+			icon = '',
+			variant = 'filled',
+			size = 'md',
+			iconPosition = 'left',
+			openInNewTab = false
+		} = settings;
+
+		// Map size names
+		const sizeMap = { small: 'sm', medium: 'md', large: 'lg', sm: 'sm', md: 'md', lg: 'lg' };
+		const sizeClass = `btn-${sizeMap[size] || 'md'}`;
+
+		// Map variant names (primary → filled for backward compat)
+		const variantMap = { primary: 'filled', secondary: 'tonal' };
+		const variantClass = `btn-${variantMap[variant] || variant}`;
+
+		const classes = ['btn', sizeClass, variantClass].join(' ');
+		const target = openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : '';
+		const href = typeof link === 'object' ? (link.path || link.url || '#') : (link || '#');
+
+		// Build icon HTML
+		const iconHtml = icon ? `<iconify-icon icon="${this.escapeAttr(icon)}"></iconify-icon>` : '';
+
+		// Build content based on icon position
+		let content = '';
+		if (icon && iconPosition === 'right') {
+			content = `${this.escapeHtml(title)}${iconHtml ? ' ' + iconHtml : ''}`;
+		} else if (icon && iconPosition === 'left') {
+			content = `${iconHtml ? iconHtml + ' ' : ''}${this.escapeHtml(title)}`;
+		} else {
+			content = this.escapeHtml(title);
+		}
+
+		return `<a href="${this.escapeAttr(href)}" class="${classes}"${target}>${content}</a>`;
+	}
+
 	// ========================================
 	// Value resolution helpers
 	// ========================================