feat(sbb-radio-button, sbb-radio-button-panel): implement native form…

… support (#3160) BREAKING CHANGE: Removed `SbbRadioButtonGroupEventDetail` from the `change`, `input` and `didChange` events of the `sbb-radio-button-group`. As an alternative to `event.detail.value` use `radioButtonGroup.value`
sbb-design-systems · Nov 19, 2024 · e113c6a · e113c6a
1 parent 212992e
commit e113c6a
Show file tree

Hide file tree

Showing 29 changed files with 2,077 additions and 714 deletions.
diff --git a/...autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.snapshot.spec.snap.js b/...autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.snapshot.spec.snap.js
@@ -1,12 +1,8 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-autocomplete-grid Safari DOM"] = 
-`<sbb-autocomplete-grid
-  data-state="closed"
-  id="sbb-autocomplete-grid-1"
-  role="grid"
->
+snapshots["sbb-autocomplete-grid Chrome-Firefox DOM"] = 
+`<sbb-autocomplete-grid data-state="closed">
   <sbb-autocomplete-grid-row
     id="sbb-autocomplete-grid-row-1"
     role="row"
@@ -55,9 +51,9 @@ snapshots["sbb-autocomplete-grid Safari DOM"] =
   </sbb-autocomplete-grid-row>
 </sbb-autocomplete-grid>
 `;
-/* end snapshot sbb-autocomplete-grid Safari DOM */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox DOM */
 
-snapshots["sbb-autocomplete-grid Safari Shadow DOM"] = 
+snapshots["sbb-autocomplete-grid Chrome-Firefox Shadow DOM"] = 
 `<div class="sbb-autocomplete__gap-fix">
 </div>
 <div class="sbb-autocomplete__container">
@@ -79,18 +75,26 @@ snapshots["sbb-autocomplete-grid Safari Shadow DOM"] =
   </div>
   <div class="sbb-autocomplete__panel">
     <div class="sbb-autocomplete__wrapper">
-      <div class="sbb-autocomplete__options">
+      <div
+        class="sbb-autocomplete__options"
+        id="sbb-autocomplete-grid-2"
+        role="grid"
+      >
         <slot>
         </slot>
       </div>
     </div>
   </div>
 </div>
 `;
-/* end snapshot sbb-autocomplete-grid Safari Shadow DOM */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox Shadow DOM */
 
-snapshots["sbb-autocomplete-grid Chrome-Firefox DOM"] = 
-`<sbb-autocomplete-grid data-state="closed">
+snapshots["sbb-autocomplete-grid Safari DOM"] = 
+`<sbb-autocomplete-grid
+  data-state="closed"
+  id="sbb-autocomplete-grid-1"
+  role="grid"
+>
   <sbb-autocomplete-grid-row
     id="sbb-autocomplete-grid-row-1"
     role="row"
@@ -139,9 +143,9 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox DOM"] =
   </sbb-autocomplete-grid-row>
 </sbb-autocomplete-grid>
 `;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox DOM */
+/* end snapshot sbb-autocomplete-grid Safari DOM */
 
-snapshots["sbb-autocomplete-grid Chrome-Firefox Shadow DOM"] = 
+snapshots["sbb-autocomplete-grid Safari Shadow DOM"] = 
 `<div class="sbb-autocomplete__gap-fix">
 </div>
 <div class="sbb-autocomplete__container">
@@ -163,28 +167,24 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox Shadow DOM"] =
   </div>
   <div class="sbb-autocomplete__panel">
     <div class="sbb-autocomplete__wrapper">
-      <div
-        class="sbb-autocomplete__options"
-        id="sbb-autocomplete-grid-2"
-        role="grid"
-      >
+      <div class="sbb-autocomplete__options">
         <slot>
         </slot>
       </div>
     </div>
   </div>
 </div>
 `;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox Shadow DOM */
+/* end snapshot sbb-autocomplete-grid Safari Shadow DOM */
 
-snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] = 
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] = 
 `<p>
   {
-  "role": "WebArea",
+  "role": "document",
   "name": "",
   "children": [
     {
-      "role": "text",
+      "role": "statictext",
       "name": ""
     },
     {
@@ -197,16 +197,16 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox */
 
-snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] = 
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] = 
 `<p>
   {
-  "role": "document",
+  "role": "WebArea",
   "name": "",
   "children": [
     {
-      "role": "statictext",
+      "role": "text",
       "name": ""
     },
     {
@@ -219,5 +219,5 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome */
 
diff --git a/src/elements/core/mixins.ts b/src/elements/core/mixins.ts
@@ -2,6 +2,7 @@ export * from './mixins/constructor.js';
 export * from './mixins/disabled-mixin.js';
 export * from './mixins/form-associated-checkbox-mixin.js';
 export * from './mixins/form-associated-mixin.js';
+export * from './mixins/form-associated-radio-button-mixin.js';
 export * from './mixins/hydration-mixin.js';
 export * from './mixins/named-slot-list-mixin.js';
 export * from './mixins/negative-mixin.js';

diff --git a/src/elements/core/mixins/form-associated-mixin.ts b/src/elements/core/mixins/form-associated-mixin.ts
@@ -3,7 +3,7 @@ import { property, state } from 'lit/decorators.js';
 
 import type { AbstractConstructor } from './constructor.js';
 
-export declare abstract class SbbFormAssociatedMixinType<V = string> {
+export declare abstract class SbbFormAssociatedMixinType<V = string> extends LitElement {
   public get form(): HTMLFormElement | null;
   public get name(): string;
   public set name(value: string);