From eee74376079d5989c24dc3d768b6ed9a2970cb0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Coletta?= <mail.leo.coletta@gmail.com>
Date: Fri, 3 Jul 2026 13:08:43 +0200
Subject: [PATCH 1/5] fix(WW-3544): Make button compatible with generated CSS

- avoid scoped root resets overriding compiled styles

- move text alignment mapping to a component CSS variable
---
 src/wwElement.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/wwElement.vue b/src/wwElement.vue
index eeaebbd..4eab68e 100644
--- a/src/wwElement.vue
+++ b/src/wwElement.vue
@@ -68,7 +68,7 @@ export default {
     computed: {
         buttonStyle() {
             return {
-                justifyContent: TEXT_ALIGN_TO_JUSTIFY[this.content['_ww-text_textAlign']] || 'center',
+                '--ww-button-justify-content': TEXT_ALIGN_TO_JUSTIFY[this.content['_ww-text_textAlign']] || 'center',
             };
         },
         isEditing() {
@@ -255,15 +255,11 @@ export default {
 
 <style lang="scss" scoped>
 .ww-button {
-    justify-content: center;
+    justify-content: var(--ww-button-justify-content, center);
     align-items: center;
 
     &.button {
-        outline: none;
-        border: none;
-        background: none;
-        font-family: inherit;
-        font-size: inherit;
+        appearance: none;
     }
 
     &.-link {

From f8eb34d0327cb161310ef264fc7e79d7aeb360e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Coletta?= <mail.leo.coletta@gmail.com>
Date: Tue, 7 Jul 2026 14:53:14 +0200
Subject: [PATCH 2/5] fix(WW-3544): Export button text CSS variables

---
 ww-config.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/ww-config.js b/ww-config.js
index 4f54d0f..1e3ffbe 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -4,8 +4,45 @@ const INFO = {
     button: 'btn',
 };
 
+function getButtonTextCss(content) {
+    const css = [];
+
+    if (content.backgroundColor) {
+        css.push({ property: '--ww-text-background-color', value: content.backgroundColor });
+    }
+
+    css.push(
+        {
+            property: '--ww-text-white-space',
+            value: content._mapValue('_ww-text_nowrap', 'white-space', {
+                trueValue: 'nowrap',
+                falseValue: 'initial',
+            }),
+        },
+        {
+            property: '--ww-text-overflow',
+            value: content._mapValue('_ww-text_nowrap', 'overflow', {
+                trueValue: 'hidden',
+                falseValue: 'initial',
+            }),
+        },
+        {
+            property: '--ww-text-text-overflow',
+            value: content._mapValue('_ww-text_ellipsis', 'text-overflow', {
+                trueValue: 'ellipsis',
+                falseValue: 'initial',
+            }),
+        }
+    );
+
+    return css;
+}
+
 export default {
     inherit: 'ww-text',
+    css({ content }) {
+        return getButtonTextCss(content);
+    },
     options: {
         autoByContent: true,
         displayAllowedValues: ['flex', 'inline-flex'],

From 4b1dd3ec0048c9a707863313a140c9fc353893e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Coletta?= <mail.leo.coletta@gmail.com>
Date: Tue, 7 Jul 2026 17:15:40 +0200
Subject: [PATCH 3/5] chore(WW-3544): Use inherited text CSS variables

---
 ww-config.js | 37 -------------------------------------
 1 file changed, 37 deletions(-)

diff --git a/ww-config.js b/ww-config.js
index 1e3ffbe..4f54d0f 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -4,45 +4,8 @@ const INFO = {
     button: 'btn',
 };
 
-function getButtonTextCss(content) {
-    const css = [];
-
-    if (content.backgroundColor) {
-        css.push({ property: '--ww-text-background-color', value: content.backgroundColor });
-    }
-
-    css.push(
-        {
-            property: '--ww-text-white-space',
-            value: content._mapValue('_ww-text_nowrap', 'white-space', {
-                trueValue: 'nowrap',
-                falseValue: 'initial',
-            }),
-        },
-        {
-            property: '--ww-text-overflow',
-            value: content._mapValue('_ww-text_nowrap', 'overflow', {
-                trueValue: 'hidden',
-                falseValue: 'initial',
-            }),
-        },
-        {
-            property: '--ww-text-text-overflow',
-            value: content._mapValue('_ww-text_ellipsis', 'text-overflow', {
-                trueValue: 'ellipsis',
-                falseValue: 'initial',
-            }),
-        }
-    );
-
-    return css;
-}
-
 export default {
     inherit: 'ww-text',
-    css({ content }) {
-        return getButtonTextCss(content);
-    },
     options: {
         autoByContent: true,
         displayAllowedValues: ['flex', 'inline-flex'],

From fa59a2a54e02caca89e20b977b2c671bf8504cc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Coletta?= <mail.leo.coletta@gmail.com>
Date: Wed, 8 Jul 2026 18:54:53 +0200
Subject: [PATCH 4/5] feat(WW-3544): Use selector-based button states

---
 src/wwElement.vue | 50 +----------------------------------------------
 ww-config.js      |  6 +++++-
 2 files changed, 6 insertions(+), 50 deletions(-)

diff --git a/src/wwElement.vue b/src/wwElement.vue
index 4eab68e..c6eba2a 100644
--- a/src/wwElement.vue
+++ b/src/wwElement.vue
@@ -1,5 +1,5 @@
 <template>
-    <component :is="tag" class="ww-button" :class="{ button: tag, '-link': hasLink && !isEditing, active: isActive }"
+    <component :is="tag" class="ww-button" :class="{ button: tag, '-link': hasLink && !isEditing }"
         :type="buttonType" :style="buttonStyle" :data-ww-flag="'btn-' + content.buttonType" :disabled="content.disabled"
         v-bind="properties" @focus="isReallyFocused = true" @blur="onBlur($event)" @mousedown="onMouseActivate"
         @mouseup="onMouseDeactivate" @mouseleave="onMouseDeactivate" @touchstart="onTouchActivate"
@@ -34,8 +34,6 @@ export default {
         'update:content:effect',
         'change-menu-visibility',
         'change-borders-style',
-        'add-state',
-        'remove-state',
         'trigger-event',
     ],
     setup(props) {
@@ -104,22 +102,6 @@ export default {
         text() {
             return this.wwElementState.props.text;
         },
-        isFocused() {
-            /* wwEditor:start */
-            if (this.wwEditorState.isSelected) {
-                return this.wwElementState.states.includes('focus');
-            }
-            /* wwEditor:end */
-            return this.isReallyFocused;
-        },
-        isActive() {
-            /* wwEditor:start */
-            if (this.wwEditorState.isSelected) {
-                return this.wwElementState.states.includes('active');
-            }
-            /* wwEditor:end */
-            return this.isReallyActive;
-        },
     },
     watch: {
         /* wwEditor:start */
@@ -156,16 +138,6 @@ export default {
             },
         },
         /* wwEditor:end */
-        'content.disabled': {
-            immediate: true,
-            handler(value) {
-                if (value) {
-                    this.$emit('add-state', 'disabled');
-                } else {
-                    this.$emit('remove-state', 'disabled');
-                }
-            },
-        },
         isReallyFocused(isFocused, wasFocused) {
             if (isFocused && !wasFocused) {
                 this.$emit('trigger-event', { name: 'focus' });
@@ -173,26 +145,6 @@ export default {
                 this.$emit('trigger-event', { name: 'blur' });
             }
         },
-        isFocused: {
-            immediate: true,
-            handler(value) {
-                if (value) {
-                    this.$emit('add-state', 'focus');
-                } else {
-                    this.$emit('remove-state', 'focus');
-                }
-            },
-        },
-        isActive: {
-            immediate: true,
-            handler(value) {
-                if (value) {
-                    this.$emit('add-state', 'active');
-                } else {
-                    this.$emit('remove-state', 'active');
-                }
-            },
-        },
     },
     methods: {
         /* wwEditor:start */
diff --git a/ww-config.js b/ww-config.js
index 4f54d0f..5ddd6a1 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -55,7 +55,11 @@ export default {
             };
         },
     },
-    states: ['focus', 'disabled', 'active'],
+    states: [
+        { label: 'focus', selector: '&:focus-within' },
+        { label: 'disabled', selectors: ['&:disabled', '&[disabled]'] },
+        { label: 'active', selector: '&:active' },
+    ],
     triggerEvents: [
         { name: 'focus', label: { en: 'On focus' }, event: null },
         { name: 'blur', label: { en: 'On blur' }, event: null },

From c459ef5ad8cc96c73bd7cf85797f6991899a30db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Coletta?= <mail.leo.coletta@gmail.com>
Date: Thu, 6 Aug 2026 10:21:56 +0200
Subject: [PATCH 5/5] fix(WW-3544): Remove button text background property

- remove the obsolete component content property

- clarify AI guidance to use the button background style
---
 AI.json      |  5 +++--
 ww-config.js | 21 ---------------------
 2 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/AI.json b/AI.json
index 280ba4c..0bb9f7d 100644
--- a/AI.json
+++ b/AI.json
@@ -14,7 +14,7 @@
             "Disabled state",
             "Focus, blur, keydown, keyup events",
             "Form integration with submit type",
-            "Custom background color"
+            "Custom button background through element styles"
         ],
         "inherit": [
             "ww-text"
@@ -96,10 +96,11 @@
     "variables": [],
     "specifications": [
         "Inherits text properties from ww-text element",
+        "The text background content property does not exist. Never set content.backgroundColor; use the element style backgroundColor to style the whole button.",
         "Submit type buttons should be used inside a ww-form-container",
         "For form submission workflows, trigger them on the form container, not the submit button",
         "You need to set margin values in icons to create spacing between the icon and text",
         "Never forget the 'text' prop in the contents. The button will not display without it!"
     ],
     "examples": []
-}
\ No newline at end of file
+}
diff --git a/ww-config.js b/ww-config.js
index 5ddd6a1..27d08af 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -67,27 +67,6 @@ export default {
         { name: 'keyup', label: { en: 'On key up' }, event: null },
     ],
     properties: {
-        backgroundColor: {
-            label: {
-                en: 'Text Background',
-                fr: 'Background du Texte',
-            },
-            type: 'Color',
-            options: {
-                nullable: true,
-            },
-            bindable: true,
-            responsive: true,
-            states: true,
-            classes: true,
-            /* wwEditor:start */
-            bindingValidation: {
-                cssSupports: 'color',
-                type: 'string',
-                tooltip: 'A string that represents a color code: `"rebeccapurple" | "#00ff00" | "rgb(214, 122, 127)"`',
-            },
-            /* wwEditor:end */
-        },
         buttonType: {
             label: {
                 en: 'Type',