allow required indicator to be targetable

Add link to Figma Design Kit doc (#1544 )
* add Figma to sidebar * add common styles for step icons * move sidebar link * fix missing help button icons * add signpost `figure` styles * step icons: it's all relative
2026-01-19 15:34:15 +00:00 · 2025-10-16 18:51:25 -04:00 · 2025-10-16 17:15:59 -04:00 · 2025-10-16 14:08:37 -04:00 · 2025-10-15 15:48:16 -04:00 · 2025-10-15 15:34:14 -04:00
11 changed files with 80 additions and 24 deletions
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -18,6 +18,12 @@
 <ul>
  <li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help &amp; Support</a></li>
  <li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
+  <li>
+    <span class="wa-split">
+      <a href="/docs/resources/figma">Figma Design Kit</a></li>
+      {{ proBadge() }}
+    </span>
+  </li>
  <li><a href="/docs/resources/community">Community</a></li>
  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
  <li><a href="/docs/resources/browser-support">Browser Support</a></li>
--- a/packages/webawesome/docs/_layouts/component.njk
+++ b/packages/webawesome/docs/_layouts/component.njk
@@ -297,11 +297,11 @@
  <div class="component-help">
    <strong>Need a hand?</strong>
    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/issues" target="_blank">
-      <wa-icon slot="prefix" name="bug"></wa-icon>
+      <wa-icon slot="start" variant="regular" name="bug"></wa-icon>
      Report a bug
    </wa-button>
    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">
-      <wa-icon slot="prefix" name="message-question"></wa-icon>
+      <wa-icon slot="start" variant="regular" name="message-question"></wa-icon>
      Ask for help
    </wa-button>
  </div>
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -386,6 +386,27 @@ h1.title {
  }
 }

+/* Images & Figures */
+
+figure.signpost {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--wa-space-s);
+
+  img {
+    border: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
+  }
+
+  figcaption {
+    color: var(--wa-color-text-quiet);
+    font-size: var(--wa-font-size-xs);
+    line-height: var(--wa-line-height-condensed);
+    text-align: center;
+  }
+}
+
 /* Search list pages */
 wa-page > main:has(> .search-list) {
  max-width: var(--content-width-l);
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -109,6 +109,15 @@
    line-height: var(--wa-form-control-value-line-height);
    padding-inline: 0.33em;
  }
+
+  /* step icons for ordered instructions */
+  .step-icon {
+    --primary-color: var(--wa-color-neutral-on-normal);
+    --secondary-color: var(--wa-color-neutral-fill-normal);
+    --secondary-opacity: 1;
+    font-size: 2em;
+  }
+
  /* #endregion */

  /* #region funsies + cosmetics */
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -34,6 +34,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401]
 - Fixed a bug in `<wa-icon>` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
 - Fixed a bug in `<wa-tooltip>` 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 `<wa-checkbox>` and `<wa-switch>` [issue:1472]
+- Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
 - Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]

 ## 3.0.0-beta.6
--- a/packages/webawesome/src/components/callout/callout.ts
+++ b/packages/webawesome/src/components/callout/callout.ts
@@ -9,7 +9,7 @@ import styles from './callout.css';
 * @summary Callouts are used to display important messages inline.
 * @documentation https://webawesome.com/docs/components/callout
 * @status stable
- * @since 2.0
+ * @since 3.0
 *
 * @slot - The callout's main content.
 * @slot icon - An icon to show in the callout. Works best with `<wa-icon>`.
--- a/packages/webawesome/src/components/input/input.css
+++ b/packages/webawesome/src/components/input/input.css
@@ -63,22 +63,40 @@
  border-radius: var(--wa-border-radius-pill) !important;
 }

-.text-field input,
-.text-field textarea {
-  /*
+.text-field {
+  /* Show autofill styles over the entire text field, not just the native <input> */
+  &:has(:autofill),
+  &:has(:-webkit-autofill) {
+    background-color: var(--wa-color-brand-fill-quiet) !important;
+  }
+
+  input,
+  textarea {
+    /*
    Fixes an alignment issue with placeholders.
    https://github.com/shoelace-style/webawesome/issues/342
  */
-  height: 100%;
+    height: 100%;

-  padding: 0;
-  border: none;
-  outline: none;
-  box-shadow: none;
-  margin: 0;
-  cursor: inherit;
-  -webkit-appearance: none;
-  font: inherit;
+    padding: 0;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    margin: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+    font: inherit;
+
+    /* Turn off Safari's autofill styles */
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      -webkit-background-clip: text;
+      background-color: transparent;
+      -webkit-text-fill-color: inherit;
+    }
+  }
 }

 input {
--- a/packages/webawesome/src/styles/component/form-control.css
+++ b/packages/webawesome/src/styles/component/form-control.css
@@ -5,17 +5,17 @@

 /* Label */
 :is([part~='form-control-label'], [part~='label']):has(*:not(:empty)) {
-  display: inline-block;
+  display: inline-flex;
  color: var(--wa-form-control-label-color);
  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]) :is([part~='form-control-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 */
--- 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;
--- 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;
--- 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;
Author	SHA1	Message	Date
lindsaym-fa	5d21ecef1c	allow required indicator to be targetable	2025-10-16 18:51:25 -04:00
Lindsay M	d792ac00e9	Add link to Figma Design Kit doc (#1544 ) * add Figma to sidebar * add common styles for step icons * move sidebar link * fix missing help button icons * add signpost `figure` styles * step icons: it's all relative	2025-10-16 17:15:59 -04:00
randomguy-2650	3bf62371d0	update callout `@since` JSDoc tag to 3.0 (was introduced in WA, not Shoelace) (#1615 )	2025-10-16 14:08:37 -04:00
Cory LaViska	22e7372a63	Fix browser history when using fragments and the back button (#1607 ) * remove unused file * preserve history properly; fixes #1374	2025-10-15 15:48:16 -04:00
Kelsey Jackson	a4788cd01d	updated offset value (#1486 ) * updated offset value * reverted and updated the components directly * fixed offset * update changelog --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>	2025-10-15 15:34:14 -04:00
Cory LaViska	7675aeb788	Improve autofill background (#1604 ) * improve autofill background; fixes #1439 * clumsy fingers	2025-10-15 15:10:35 -04:00