Merge branch 'next' into select-event-fix

packages/webawesome/docs/_includes/sidebar.njk

@@ -249,10 +249,7 @@
         <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
       </span>
       <ul>
-        <li>
-          <a href="/docs/patterns/blog-news/adaptable-view/">Adaptable View</a>
-        </li>
-        <li>
+      <li>
           <a href="/docs/patterns/blog-news/banners/">Banners</a>
         </li>
         <li>

packages/webawesome/docs/docs/resources/changelog.md

@@ -31,8 +31,6 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-details>` that caused it to expand/collapse when clicking on interactive elements in the summary [issue:1252]
 - Fixed `<wa-button>` to have `static` positioning by default and `relative` positioning only when used with `<wa-badge>` [pr:1346]
 - Fixed spacing in `<wa-input>` when both clear and password toggle icons are present [issue:1325]
-- Fixed a bug in `<wa-radio-group>` and `<wa-radio>` where changing appearances dynamically would render incorrectly [issue:1178]
-- Fixed a bug in `<wa-input>` that prevented the value from changing when assigning non-string values to `value` [issue:1323]
 
 ## 3.0.0-beta.4
 

packages/webawesome/src/components/input/input.ts

@@ -372,7 +372,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
           step=${ifDefined(this.step as number)}
-          .value=${live(this.value ?? '')}
+          .value=${live(this.value || '')}
           autocapitalize=${ifDefined(this.autocapitalize)}
           autocomplete=${ifDefined(this.autocomplete)}
           autocorrect=${ifDefined(this.autocorrect)}

packages/webawesome/src/components/radio-group/radio-group.css

@@ -18,19 +18,31 @@
   margin-inline-start: var(--wa-form-control-required-content-offset);
 }
 
+.button-group {
+  display: flex;
+}
+
 [part~='form-control-input'] {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  gap: 0; /* Radios handle their own spacing */
+  gap: 0.75em;
 }
 
 /* Horizontal */
 :host([orientation='horizontal']) [part~='form-control-input'] {
   flex-direction: row;
+  gap: 1em;
 }
 
 /* Help text */
 [part~='hint'] {
   margin-block-start: 0.5em;
 }
+
+/* Radios have the "button" appearance */
+:host fieldset.has-radio-buttons {
+  [part~='form-control-input'] {
+    gap: 0;
+  }
+}

packages/webawesome/src/components/radio-group/radio-group.ts

@@ -57,6 +57,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
 
   private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
 
+  @state() hasRadioButtons = false;
+
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
   /**
@@ -195,9 +197,11 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
 
   private async syncRadioElements() {
     const radios = this.getAllRadios();
+    let hasRadioButtons = false;
 
-    // Set positioning data attributes and properties
+    // Add data attributes to support styling
     radios.forEach((radio, index) => {
+      if (radio.appearance === 'button') hasRadioButtons = true;
       radio.setAttribute('size', this.size);
       radio.toggleAttribute('data-wa-radio-horizontal', this.orientation !== 'vertical');
       radio.toggleAttribute('data-wa-radio-vertical', this.orientation === 'vertical');
@@ -209,6 +213,9 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
       (radio as WaRadio).forceDisabled = this.disabled;
     });
 
+    // If at least one radio button exists, we assume it's a radio button group
+    this.hasRadioButtons = hasRadioButtons;
+
     await Promise.all(
       radios.map(async radio => {
         await radio.updateComplete;
@@ -342,6 +349,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
           'form-control': true,
           'form-control-radio-group': true,
           'form-control-has-label': hasLabel,
+          'has-radio-buttons': this.hasRadioButtons,
         })}
         role="radiogroup"
         aria-labelledby="label"

packages/webawesome/src/components/radio/radio.css

@@ -31,41 +31,6 @@
   margin-block-start: 0.5em;
 }
 
-/* Default spacing for default appearance radios */
-:host([appearance='default']) {
-  margin-block: 0.375em; /* Half of the original 0.75em gap on each side */
-}
-
-:host([appearance='default'][data-wa-radio-horizontal]) {
-  margin-block: 0;
-  margin-inline: 0.5em; /* Half of the original 1em gap on each side */
-}
-
-/* Remove margin from first/last items to prevent extra space */
-:host([appearance='default'][data-wa-radio-first]) {
-  margin-block-start: 0;
-  margin-inline-start: 0;
-}
-
-:host([appearance='default'][data-wa-radio-last]) {
-  margin-block-end: 0;
-  margin-inline-end: 0;
-}
-
-/* Button appearance have no spacing, they get handled by the overlap margins below */
-:host([appearance='button']) {
-  margin: 0;
-  align-items: center;
-  min-height: var(--wa-form-control-height);
-  background-color: var(--wa-color-surface-default);
-  border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
-  border-radius: var(--wa-border-radius-m);
-  padding: 0 var(--wa-form-control-padding-inline);
-  transition:
-    background-color var(--wa-transition-fast),
-    border-color var(--wa-transition-fast);
-}
-
 /* Default appearance */
 :host([appearance='default']) {
   .control {
@@ -101,13 +66,6 @@
   }
 }
 
-/* Button appearance */
-:host([appearance='button']) {
-  .control {
-    display: none;
-  }
-}
-
 /* Checked */
 :host(:state(checked)) .control {
   color: var(--checked-icon-color);
@@ -127,6 +85,23 @@
   cursor: not-allowed;
 }
 
+/* Button appearance */
+:host([appearance='button']) {
+  align-items: center;
+  min-height: var(--wa-form-control-height);
+  background-color: var(--wa-color-surface-default);
+  border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
+  border-radius: var(--wa-border-radius-m);
+  padding: 0 var(--wa-form-control-padding-inline);
+  transition:
+    background-color var(--wa-transition-fast),
+    border-color var(--wa-transition-fast);
+
+  .control {
+    display: none;
+  }
+}
+
 /* Horizontal grouping - remove inner border radius */
 :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-inner]) {
   border-radius: 0;
@@ -178,7 +153,7 @@
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-/* Button overlap margins */
+/* Remove inner borders and handle overlap */
 :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) {
   margin-inline-start: calc(-1 * var(--wa-form-control-border-width));
 }

packages/webawesome/src/components/radio/radio.ts

@@ -111,6 +111,7 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
     // We override `setValue` because we don't want to set form values from here. We want to do that in "RadioGroup" itself.
   }
 
+  // Update the handleClick method (around line 75)
   private handleClick = () => {
     if (!this.disabled && !this.forceDisabled) {
       this.checked = true;

packages/webawesome/src/components/tree/tree.ts

@@ -64,7 +64,7 @@ function syncCheckboxes(changedTreeItem: WaTreeItem, initialSync = false) {
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty [--indent-size=var(--wa-space-m)] - The size of the indentation for nested items.
+ * @cssproperty [--indent-size=var(--wa-spacing-m)] - The size of the indentation for nested items.
  * @cssproperty [--indent-guide-color=var(--wa-color-surface-border)] - The color of the indentation line.
  * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
  *  indentation line's starting position.