diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index f7f14c12d..b88fdfb12 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -34,6 +34,7 @@ Components with the Experimental badge sh
- Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401]
- Fixed a bug in `` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
- Fixed a bug in `` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595]
+- Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `` and `` [issue:1472]
- Improved autofill styles in `` so they span the entire width of the visual input [issue:1439]
- Modified `` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
diff --git a/packages/webawesome/src/styles/component/form-control.css b/packages/webawesome/src/styles/component/form-control.css
index 181ce63b2..21df8803e 100644
--- a/packages/webawesome/src/styles/component/form-control.css
+++ b/packages/webawesome/src/styles/component/form-control.css
@@ -10,12 +10,12 @@
font-weight: var(--wa-form-control-label-font-weight);
line-height: var(--wa-form-control-label-line-height);
margin-block-end: 0.5em;
+}
- :host([required]) &::after {
- content: var(--wa-form-control-required-content);
- margin-inline-start: var(--wa-form-control-required-content-offset);
- color: var(--wa-form-control-required-content-color);
- }
+:host([required]) slot:is([name='label'], [part='label'])::after {
+ content: var(--wa-form-control-required-content);
+ margin-inline-start: var(--wa-form-control-required-content-offset);
+ color: var(--wa-form-control-required-content-color);
}
/* Help text */
diff --git a/packages/webawesome/src/styles/themes/awesome.css b/packages/webawesome/src/styles/themes/awesome.css
index dcb2eb068..d06f25b66 100644
--- a/packages/webawesome/src/styles/themes/awesome.css
+++ b/packages/webawesome/src/styles/themes/awesome.css
@@ -332,7 +332,7 @@
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
- --wa-form-control-required-content-offset: -0.1em;
+ --wa-form-control-required-content-offset: 0.1em;
--wa-form-control-padding-block: 1em;
--wa-form-control-padding-inline: 1.25em;
diff --git a/packages/webawesome/src/styles/themes/default.css b/packages/webawesome/src/styles/themes/default.css
index eb305577a..8cd6b15c9 100644
--- a/packages/webawesome/src/styles/themes/default.css
+++ b/packages/webawesome/src/styles/themes/default.css
@@ -326,7 +326,7 @@
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
- --wa-form-control-required-content-offset: -0.1em;
+ --wa-form-control-required-content-offset: 0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
diff --git a/packages/webawesome/src/styles/themes/shoelace.css b/packages/webawesome/src/styles/themes/shoelace.css
index 0faccadba..d138f23ca 100644
--- a/packages/webawesome/src/styles/themes/shoelace.css
+++ b/packages/webawesome/src/styles/themes/shoelace.css
@@ -332,7 +332,7 @@
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
- --wa-form-control-required-content-offset: -0.1em;
+ --wa-form-control-required-content-offset: 0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;