diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..255710bf3 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..3bac197ad Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..53886cada Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..ff581d6bc Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..3bac197ad Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..bf741406e Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..785b21ced Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..042a62fbd Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..46a2c6f81 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..20973c5e8 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..bfe242074 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..de6e904fa Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..a91f3b431 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..5c447c3aa Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..1a421bb75 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-closed.png new file mode 100644 index 000000000..21d2c086b Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..cc3b226e7 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-closed.png new file mode 100644 index 000000000..202b11219 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..f47c012c6 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-closed.png new file mode 100644 index 000000000..f85a7c0b5 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..69ebb494e Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-closed.png new file mode 100644 index 000000000..216166df9 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..af3326e26 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-closed.png new file mode 100644 index 000000000..9bebee5bd Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..89897a21c Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..98c75607b Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..ef117bcd8 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..eb1bb8509 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..9c61b5bfe Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..d797789df Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-expanded.png new file mode 100644 index 000000000..103e89258 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..4941e59d9 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-expanded.png new file mode 100644 index 000000000..55fb070a7 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..1c28308c1 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-expanded.png new file mode 100644 index 000000000..c99cff1a5 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..ef07d95f5 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-expanded.png new file mode 100644 index 000000000..321a89ac0 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..19d9763db Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-expanded.png new file mode 100644 index 000000000..6e456049a Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..4a8a8a2f8 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-both-expanded.png new file mode 100644 index 000000000..0daa1316f Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png new file mode 100644 index 000000000..86c3e654e Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-both-expanded.png new file mode 100644 index 000000000..058d2f0e1 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png new file mode 100644 index 000000000..c6c01a76b Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-both-expanded.png new file mode 100644 index 000000000..f4454ddb2 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-expanded.png new file mode 100644 index 000000000..5609da92a Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-both-expanded.png new file mode 100644 index 000000000..4e391930a Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-expanded.png new file mode 100644 index 000000000..c5bb7ed7c Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-both-expanded.png new file mode 100644 index 000000000..5cf4bd439 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-expanded.png new file mode 100644 index 000000000..f75c40919 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png new file mode 100644 index 000000000..5b91558e6 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-initial.png new file mode 100644 index 000000000..f9b208894 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-second-expanded.png new file mode 100644 index 000000000..c9540b713 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-second-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png new file mode 100644 index 000000000..713bf042a Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-initial.png new file mode 100644 index 000000000..8cf14a54f Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-second-expanded.png new file mode 100644 index 000000000..516465591 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-second-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-expanded.png new file mode 100644 index 000000000..5cd52e7e7 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-initial.png new file mode 100644 index 000000000..dd5854019 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-second-expanded.png new file mode 100644 index 000000000..52b8728b4 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-second-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-expanded.png new file mode 100644 index 000000000..6a09423aa Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-initial.png new file mode 100644 index 000000000..ae6bc199e Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-second-expanded.png new file mode 100644 index 000000000..8322018e3 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-second-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-expanded.png new file mode 100644 index 000000000..fdaaf5de6 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-initial.png new file mode 100644 index 000000000..236196ecf Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-second-expanded.png new file mode 100644 index 000000000..fd178ae6a Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-second-expanded.png differ diff --git a/.vscode/settings.json b/.vscode/settings.json index d1d050a7f..bccd66c07 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -45,6 +45,7 @@ "modal": true, "tab": true, "toast": true, - "alert": true + "alert": true, + "expander": true } } \ No newline at end of file diff --git a/README.md b/README.md index 73e2ef4a8..f280a8912 100644 --- a/README.md +++ b/README.md @@ -183,7 +183,7 @@ This example shows how to import and use a few common components. Omni Component
Tag Name | Description |
---|---|
-[omni-loading-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-loading-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -191,7 +191,7 @@ Loading icon component. |
-[omni-render-element](/Users/runner/work/omni-components/omni-components/src/render-element/README.md) +[omni-render-element](/Users/cp340150/code/omni-components/omni-components/src/render-element/README.md) | @@ -199,7 +199,7 @@ Element that defers content rendering to a provided function / promise. |
-[omni-modal](/Users/runner/work/omni-components/omni-components/src/modal/README.md) +[omni-modal](/Users/cp340150/code/omni-components/omni-components/src/modal/README.md) | @@ -207,7 +207,7 @@ Control to display modal content with optional header and footer content. |
-[omni-button](/Users/runner/work/omni-components/omni-components/src/button/README.md) +[omni-button](/Users/cp340150/code/omni-components/omni-components/src/button/README.md) | @@ -215,7 +215,7 @@ Control that allows an action to be executed. |
-[omni-alert](/Users/runner/work/omni-components/omni-components/src/alert/README.md) +[omni-alert](/Users/cp340150/code/omni-components/omni-components/src/alert/README.md) | @@ -223,7 +223,7 @@ Component that displays an alert. |
-[omni-clear-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-clear-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -231,7 +231,7 @@ Clear icon component. |
-[omni-search-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-search-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -239,7 +239,7 @@ Search icon component. |
-[omni-search-field](/Users/runner/work/omni-components/omni-components/src/search-field/README.md) +[omni-search-field](/Users/cp340150/code/omni-components/omni-components/src/search-field/README.md) | @@ -247,7 +247,7 @@ Search input control. |
-[omni-chevron-down-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-chevron-down-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -255,7 +255,7 @@ Chevron down icon component. |
-[omni-more-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-more-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -263,7 +263,7 @@ More icon component. |
-[omni-select](/Users/runner/work/omni-components/omni-components/src/select/README.md) +[omni-select](/Users/cp340150/code/omni-components/omni-components/src/select/README.md) | @@ -271,7 +271,7 @@ Control to get / set a value within a list of options. |
-[omni-icon](/Users/runner/work/omni-components/omni-components/src/icon/README.md) +[omni-icon](/Users/cp340150/code/omni-components/omni-components/src/icon/README.md) | @@ -279,7 +279,7 @@ Component that displays an icon. |
-[omni-color-field](/Users/runner/work/omni-components/omni-components/src/color-field/README.md) +[omni-color-field](/Users/cp340150/code/omni-components/omni-components/src/color-field/README.md) | @@ -287,7 +287,7 @@ Color input control. |
-[omni-text-field](/Users/runner/work/omni-components/omni-components/src/text-field/README.md) +[omni-text-field](/Users/cp340150/code/omni-components/omni-components/src/text-field/README.md) | @@ -295,7 +295,7 @@ Control to input text. |
-[omni-label](/Users/runner/work/omni-components/omni-components/src/label/README.md) +[omni-label](/Users/cp340150/code/omni-components/omni-components/src/label/README.md) | @@ -303,7 +303,7 @@ Label component that renders styled text. |
-[omni-switch](/Users/runner/work/omni-components/omni-components/src/switch/README.md) +[omni-switch](/Users/cp340150/code/omni-components/omni-components/src/switch/README.md) | @@ -311,7 +311,7 @@ Control to switch a value on or off. |
-[omni-chevron-left-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-chevron-left-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -319,7 +319,7 @@ Chevron left icon component. |
-[omni-chevron-right-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-chevron-right-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -327,7 +327,7 @@ Chevron right icon component. |
-[omni-calendar](/Users/runner/work/omni-components/omni-components/src/calendar/README.md) +[omni-calendar](/Users/cp340150/code/omni-components/omni-components/src/calendar/README.md) | @@ -335,7 +335,7 @@ Calendar component to set specific date. |
-[omni-indeterminate-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-indeterminate-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -343,7 +343,7 @@ Indeterminate icon component. |
-[omni-check-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-check-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -351,7 +351,7 @@ Check icon component. |
-[omni-check](/Users/runner/work/omni-components/omni-components/src/check/README.md) +[omni-check](/Users/cp340150/code/omni-components/omni-components/src/check/README.md) | @@ -359,7 +359,7 @@ Control that allows a selection to be made. |
-[omni-close-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-close-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -367,7 +367,7 @@ Close icon component. |
-[omni-chip](/Users/runner/work/omni-components/omni-components/src/chip/README.md) +[omni-chip](/Users/cp340150/code/omni-components/omni-components/src/chip/README.md) | @@ -375,7 +375,7 @@ Control that can be used for input, setting attributes, or performing actions. |
-[omni-arrow-right-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-arrow-right-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -383,7 +383,7 @@ Arrow right icon component. |
-[omni-backspace-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-backspace-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -391,7 +391,7 @@ Backspace icon component. |
-[omni-caps-off-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-caps-off-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -399,7 +399,7 @@ Caps off icon component. |
-[omni-caps-on-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-caps-on-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -407,7 +407,7 @@ Caps on icon component. |
-[omni-caps-lock-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-caps-lock-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -415,7 +415,7 @@ Caps lock icon component. |
-[omni-next-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-next-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -423,7 +423,7 @@ Next icon component. |
-[omni-previous-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-previous-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -431,7 +431,7 @@ Previous icon component. |
-[omni-send-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-send-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -439,7 +439,7 @@ Send icon component. |
-[omni-keyboard-button](/Users/runner/work/omni-components/omni-components/src/keyboard/README.md) +[omni-keyboard-button](/Users/cp340150/code/omni-components/omni-components/src/keyboard/README.md) | @@ -447,7 +447,7 @@ An internal keyboard button control used in the keyboard component. |
-[omni-keyboard](/Users/runner/work/omni-components/omni-components/src/keyboard/README.md) +[omni-keyboard](/Users/cp340150/code/omni-components/omni-components/src/keyboard/README.md) | @@ -455,7 +455,7 @@ A responsive on-screen keyboard control component. |
-[omni-currency-field](/Users/runner/work/omni-components/omni-components/src/currency-field/README.md) +[omni-currency-field](/Users/cp340150/code/omni-components/omni-components/src/currency-field/README.md) | @@ -463,7 +463,7 @@ Control to enter a formatted currency value. |
-[omni-calendar-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md) +[omni-calendar-icon](/Users/cp340150/code/omni-components/omni-components/src/icons/README.md) | @@ -471,7 +471,7 @@ A calendar icon component. |
-[omni-date-picker](/Users/runner/work/omni-components/omni-components/src/date-picker/README.md) +[omni-date-picker](/Users/cp340150/code/omni-components/omni-components/src/date-picker/README.md) | @@ -479,7 +479,7 @@ Control to get / set a specific date using a calendar. |
-[omni-email-field](/Users/runner/work/omni-components/omni-components/src/email-field/README.md) +[omni-email-field](/Users/cp340150/code/omni-components/omni-components/src/email-field/README.md) | @@ -487,7 +487,23 @@ Email input control, used in forms for input validation and to display correct v |
-[omni-hyperlink](/Users/runner/work/omni-components/omni-components/src/hyperlink/README.md) +[omni-expander](/Users/cp340150/code/omni-components/omni-components/src/expander/README.md) + + | + +Layout component that groups together content in an expanded box. + + |
+ +[omni-expander-group](/Users/cp340150/code/omni-components/omni-components/src/expander/README.md) + + | + +Layout container that groups expanders, allowing for automatic expanding and collapsing of sibling expander controls. + + |
+ +[omni-hyperlink](/Users/cp340150/code/omni-components/omni-components/src/hyperlink/README.md) | @@ -543,7 +559,7 @@ Plus icon component. |
-[omni-number-field](/Users/runner/work/omni-components/omni-components/src/number-field/README.md) +[omni-number-field](/Users/cp340150/code/omni-components/omni-components/src/number-field/README.md) | @@ -551,7 +567,7 @@ Input control to enter a single line of numbers. |
-[omni-password-field](/Users/runner/work/omni-components/omni-components/src/password-field/README.md) +[omni-password-field](/Users/cp340150/code/omni-components/omni-components/src/password-field/README.md) | @@ -559,7 +575,7 @@ Password input control. |
-[omni-pin-field](/Users/runner/work/omni-components/omni-components/src/pin-field/README.md) +[omni-pin-field](/Users/cp340150/code/omni-components/omni-components/src/pin-field/README.md) | @@ -567,7 +583,7 @@ Input control to enter a masked numeric value. |
-[omni-radio](/Users/runner/work/omni-components/omni-components/src/radio/README.md) +[omni-radio](/Users/cp340150/code/omni-components/omni-components/src/radio/README.md) | @@ -575,7 +591,7 @@ Control to select a single value from a group of values. |
-[omni-radio-group](/Users/runner/work/omni-components/omni-components/src/radio/README.md) +[omni-radio-group](/Users/cp340150/code/omni-components/omni-components/src/radio/README.md) | @@ -583,7 +599,7 @@ Control to group radio components for single selection |
-[omni-tab](/Users/runner/work/omni-components/omni-components/src/tab/README.md) +[omni-tab](/Users/cp340150/code/omni-components/omni-components/src/tab/README.md) | @@ -591,7 +607,7 @@ Control that can be used to display slotted content, for use within an Tab Group |
-[omni-tab-header](/Users/runner/work/omni-components/omni-components/src/tab/README.md) +[omni-tab-header](/Users/cp340150/code/omni-components/omni-components/src/tab/README.md) | @@ -599,7 +615,7 @@ Control that can be used to display custom slotted content, for use within Tab G |
-[omni-tab-group](/Users/runner/work/omni-components/omni-components/src/tab/README.md) +[omni-tab-group](/Users/cp340150/code/omni-components/omni-components/src/tab/README.md) | @@ -607,7 +623,7 @@ Component that displays content in tabs. |
-[omni-toast-stack](/Users/runner/work/omni-components/omni-components/src/toast/README.md) +[omni-toast-stack](/Users/cp340150/code/omni-components/omni-components/src/toast/README.md) | @@ -615,7 +631,7 @@ A toast container that animates in and stacks toast elements. |
-[omni-toast](/Users/runner/work/omni-components/omni-components/src/toast/README.md) +[omni-toast](/Users/cp340150/code/omni-components/omni-components/src/toast/README.md) |
diff --git a/package.json b/package.json
index 06bd2bcfa..d704c61dc 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,8 @@
"modal",
"toast",
"tab",
- "alert"
+ "alert",
+ "expander"
],
"exports": {
"./*": "./dist/*/index.js"
diff --git a/src/expander/Expander.spec.ts b/src/expander/Expander.spec.ts
new file mode 100644
index 000000000..645c098b7
--- /dev/null
+++ b/src/expander/Expander.spec.ts
@@ -0,0 +1,110 @@
+import { test, expect, mockEventListener, withCoverage } from '../utils/JestPlaywright.js';
+
+test(`Expander - Visual and Behaviour`, async ({ page }) => {
+ await withCoverage(page, async () => {
+ await page.goto('/components/expander/');
+ const expander = page.locator('.Interactive').getByTestId('test-expander');
+
+ await expect(expander).toHaveScreenshot('expander-initial.png');
+ // The expanded attribute should be not set by default
+ await expect(expander).not.toHaveAttribute('expanded', '');
+
+ const expanderHeader = expander.locator('.header');
+ await expanderHeader.click();
+ // The expanded attribute should be set once the expander is expanded
+ await expect(expander).toHaveAttribute('expanded', '');
+
+ await expect(expander).toHaveScreenshot('expander-expanded.png');
+
+ await expanderHeader.click();
+
+ await expect(expander).not.toHaveAttribute('expanded', '');
+ });
+});
+
+test(`Expander - Disabled Behaviour`, async ({ page }) => {
+ await withCoverage(page, async () => {
+ await page.goto('/components/expander/');
+ const expander = page.locator('.Disabled').getByTestId('test-expander');
+
+ await expect(expander).toHaveScreenshot('expander-initial.png');
+
+ const animantionEnd = await mockEventListener(expander, 'animationend');
+
+ const expanderHeader = expander.locator('.header');
+ await expanderHeader.click();
+
+ await expect(expander).not.toHaveAttribute('expanded', '');
+
+ await expect(expander).toHaveScreenshot('expander-initial.png');
+ await expect(animantionEnd).toBeCalledTimes(0);
+ });
+});
+
+test(`Expander - Button Alignment Behaviour`, async ({ page }) => {
+ await withCoverage(page, async () => {
+ await page.goto('/components/expander/');
+ const expander = page.locator('.Button_Alignment').getByTestId('test-expander');
+
+ await expect(expander).toHaveScreenshot('expander-initial.png');
+
+ const header = expander.locator('.header');
+
+ // Confirm that there is 3 elements in the header
+ await expect(await header.evaluate((h) => h.childElementCount)).toBe(3);
+
+ await expect(expander).toHaveAttribute('button-alignment', 'left');
+
+ const headerButton = header.locator('.expand-icon-container');
+ await expect(headerButton).toHaveCount(1);
+ });
+});
+
+test(`Expander - Expanded Behaviour`, async ({ page }) => {
+ await withCoverage(page, async () => {
+ await page.goto('/components/expander/');
+ const expander = page.locator('.Expanded').getByTestId('test-expander');
+
+ await expect(expander).toHaveScreenshot('expander-initial.png');
+ await expect(expander).toHaveAttribute('expanded', 'true');
+
+ const expanderHeader = expander.locator('.header');
+ await expanderHeader.click();
+
+ await expect(expander).not.toHaveAttribute('expanded', '');
+ await expect(expander).toHaveScreenshot('expander-closed.png');
+ });
+});
+
+test(`Expander - Expand Slotted Icon Behaviour`, async ({ page }) => {
+ await withCoverage(page, async () => {
+ await page.goto('/components/expander/');
+ const expander = page.locator('.Expand_Icon').getByTestId('test-expander');
+
+ await expect(expander).toHaveScreenshot('expander-initial.png');
+
+ const header = expander.locator('.header');
+
+ const expandIconContainer = header.locator('.expand-icon-container');
+ await expect(expandIconContainer).toHaveCount(1);
+
+ const slotElement = expander.locator('slot[name="expand-icon"]');
+ await expect(slotElement).toHaveCount(1);
+ });
+});
+
+test(`Expander - Header Slotted Icon Behaviour`, async ({ page }) => {
+ await withCoverage(page, async () => {
+ await page.goto('/components/expander/');
+ const expander = page.locator('.Header_Icon').getByTestId('test-expander');
+
+ await expect(expander).toHaveScreenshot('expander-initial.png');
+ const header = expander.locator('.header');
+
+ const headerIconContainer = header.locator('.header-icon-container');
+ await expect(headerIconContainer).toHaveCount(1);
+
+ const slotElement = expander.locator('slot[name="header-icon"]');
+ await expect(slotElement).toHaveCount(1);
+ });
+});
diff --git a/src/expander/Expander.stories.ts b/src/expander/Expander.stories.ts
new file mode 100644
index 000000000..73d81cce9
--- /dev/null
+++ b/src/expander/Expander.stories.ts
@@ -0,0 +1,210 @@
+import { html, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifNotEmpty } from '../utils/Directives.js';
+import { assignToSlot, ComponentStoryFormat, getSourceFromLit, raw } from '../utils/StoryUtils.js';
+
+import '../label/Label.js';
+import '../icon/Icon.js';
+import './Expander.js';
+import './ExpanderGroup.js';
+
+const buttonAlignment = ['left', 'right'] as const;
+
+interface Args {
+ label: string;
+ disabled: boolean;
+ expanded: boolean;
+ buttonAlignment: (typeof buttonAlignment)[number];
+ '[Default Slot]': string;
+ expand_icon: string;
+ header_icon: string;
+}
+
+export const Interactive: ComponentStoryFormat this._headerClick(e)}">
+ ${this._renderHeader()}
+
+
+
+ `;
+ }
+
+ _renderHeader(): TemplateResult {
+ return html`
+ ${
+ this.buttonAlignment === 'left'
+ ? html` `
+ : this._renderIcon()
+ }
+ ${this.label ? html`
+ The
+ The
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'omni-expander-group': ExpanderGroup;
+ }
+}
diff --git a/src/expander/README.md b/src/expander/README.md
new file mode 100644
index 000000000..e0842f219
--- /dev/null
+++ b/src/expander/README.md
@@ -0,0 +1,139 @@
+# omni-expander
+
+Layout component that groups together content in an expanded box.
+
+## Example
+
+html
+
+```
+ |