@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/components/accordion/accordion-bg.stories.js

@@ -20,9 +20,9 @@ Componentă Lit pentru secțiuni accordion cu două variante de design detectate
 <div class="accordion faq block">
   <bd-accordion-bg title="Questions? Answers.">
     <bd-accordion-bg-item title="What is Bitdefender?">
-      <bd-p kind="small">Answer here...</bd-p>
+      <bd-p variant="small">Answer here...</bd-p>
     </bd-accordion-bg-item>
-    <bd-p slot="footer" kind="small">* Footer note</bd-p>
+    <bd-p slot="footer" variant="small">* Footer note</bd-p>
   </bd-accordion-bg>
 </div>
 
@@ -30,9 +30,9 @@ Componentă Lit pentru secțiuni accordion cu două variante de design detectate
 <div class="accordion terms-of-use block">
   <bd-accordion-bg title="Terms of use">
     <bd-accordion-bg-item title="Auto renewal terms" open>
-      <bd-p kind="small">Your subscription...</bd-p>
+      <bd-p variant="small">Your subscription...</bd-p>
     </bd-accordion-bg-item>
-    <bd-p slot="footer" kind="small">* Terms apply</bd-p>
+    <bd-p slot="footer" variant="small">* Terms apply</bd-p>
   </bd-accordion-bg>
 </div>
 \`\`\`
@@ -65,7 +65,7 @@ Componenta urcă în DOM și detectează clasa părintelui:
 ### Slot \`footer\`
 Ambele variante suportă un slot \`footer\` pentru text italic după toate item-urile:
 \`\`\`html
-<bd-p slot="footer" kind="small">* Notă de subsol</bd-p>
+<bd-p slot="footer" variant="small">* Notă de subsol</bd-p>
 \`\`\`
         `
       }
@@ -81,28 +81,28 @@ export const FaqDefault = {
     <div class="accordion faq block">
       <bd-accordion-bg title="Questions? Answers.">
         <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?">
-          <bd-p kind="small">Bitdefender Internet Security provides the best protection through multiple layers of security:</bd-p>
+          <bd-p variant="small">Bitdefender Internet Security provides the best protection through multiple layers of security:</bd-p>
           <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Advanced threat detection using artificial intelligence</bd-p></bd-li>
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Real-time protection against viruses, malware, and ransomware</bd-p></bd-li>
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Secure browsing with anti-phishing technology</bd-p></bd-li>
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Firewall protection for network security</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Advanced threat detection using artificial intelligence</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Real-time protection against viruses, malware, and ransomware</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Secure browsing with anti-phishing technology</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Firewall protection for network security</bd-p></bd-li>
           </bd-list>
-          <bd-p kind="small">All these features work together to provide comprehensive protection for your devices.</bd-p>
+          <bd-p variant="small">All these features work together to provide comprehensive protection for your devices.</bd-p>
         </bd-accordion-bg-item>
 
         <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?">
-          <bd-p kind="small">Yes! Bitdefender Internet Security offers unbeatable ransomware protection with:</bd-p>
+          <bd-p variant="small">Yes! Bitdefender Internet Security offers unbeatable ransomware protection with:</bd-p>
           <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Multi-layer ransomware protection</bd-p></bd-li>
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Behavioral detection to stop unknown threats</bd-p></bd-li>
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Safe Files feature to protect your important documents</bd-p></bd-li>
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Real-time monitoring of file encryption attempts</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Multi-layer ransomware protection</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Behavioral detection to stop unknown threats</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Safe Files feature to protect your important documents</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Real-time monitoring of file encryption attempts</bd-p></bd-li>
           </bd-list>
         </bd-accordion-bg-item>
 
         <bd-accordion-bg-item title="Do I get a VPN with Bitdefender Internet Security?">
-          <bd-p kind="small">Bitdefender Internet Security includes a basic VPN with 200MB per day.</bd-p>
+          <bd-p variant="small">Bitdefender Internet Security includes a basic VPN with 200MB per day.</bd-p>
         </bd-accordion-bg-item>
       </bd-accordion-bg>
     </div>
@@ -117,12 +117,12 @@ export const FaqWithFooter = {
     <div class="accordion faq block">
       <bd-accordion-bg title="Questions? Answers.">
         <bd-accordion-bg-item title="How does Bitdefender protect me?">
-          <bd-p kind="small">Bitdefender provides multi-layer protection against all cyber threats.</bd-p>
+          <bd-p variant="small">Bitdefender provides multi-layer protection against all cyber threats.</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Does it work on Mac?">
-          <bd-p kind="small">Yes, Bitdefender is fully compatible with macOS 10.14 and later.</bd-p>
+          <bd-p variant="small">Yes, Bitdefender is fully compatible with macOS 10.14 and later.</bd-p>
         </bd-accordion-bg-item>
-        <bd-p slot="footer" kind="small">* Prices include VAT. Terms and conditions apply.</bd-p>
+        <bd-p slot="footer" variant="small">* Prices include VAT. Terms and conditions apply.</bd-p>
       </bd-accordion-bg>
     </div>
   `
@@ -136,10 +136,10 @@ export const FaqOpenByDefault = {
     <div class="accordion faq block">
       <bd-accordion-bg title="Getting Started">
         <bd-accordion-bg-item title="How do I install Bitdefender?" open>
-          <bd-p kind="small">Download the installer from your Bitdefender Central account and follow the on-screen steps.</bd-p>
+          <bd-p variant="small">Download the installer from your Bitdefender Central account and follow the on-screen steps.</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Do I need to remove my old antivirus first?">
-          <bd-p kind="small">Yes. Bitdefender will detect any existing security software and guide you through removing it.</bd-p>
+          <bd-p variant="small">Yes. Bitdefender will detect any existing security software and guide you through removing it.</bd-p>
         </bd-accordion-bg-item>
       </bd-accordion-bg>
     </div>
@@ -154,13 +154,13 @@ export const FaqNoBgItems = {
     <div class="accordion faq block">
       <bd-accordion-bg title="Product Features">
         <bd-accordion-bg-item title="What is Bitdefender VPN?" no-bg>
-          <bd-p kind="small">Bitdefender VPN encrypts your internet connection and masks your IP address.</bd-p>
+          <bd-p variant="small">Bitdefender VPN encrypts your internet connection and masks your IP address.</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="What is Anti-Tracker?" no-bg>
-          <bd-p kind="small">Anti-Tracker blocks advertising trackers and analytics scripts.</bd-p>
+          <bd-p variant="small">Anti-Tracker blocks advertising trackers and analytics scripts.</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="What is Bitdefender Photon™?" no-bg>
-          <bd-p kind="small">Photon is Bitdefender's adaptive scanning technology.</bd-p>
+          <bd-p variant="small">Photon is Bitdefender's adaptive scanning technology.</bd-p>
         </bd-accordion-bg-item>
       </bd-accordion-bg>
     </div>
@@ -180,33 +180,33 @@ export const FaqNoPadding = {
   },
   render: () => html`
     <div>
-      <bd-p kind="small" style="color: var(--color-neutral-500); margin-bottom: 8px;">
+      <bd-p variant="small" style="color: var(--color-neutral-500); margin-bottom: 8px;">
         Fără <code>no-padding</code> — 64px padding-top/bottom (spațiul albastru de sus/jos):
       </bd-p>
       <div style="outline: 2px dashed red;">
         <div class="accordion faq block">
           <bd-accordion-bg title="Questions? Answers.">
             <bd-accordion-bg-item title="How does Bitdefender protect me?">
-              <bd-p kind="small">Bitdefender provides multi-layer protection against all cyber threats.</bd-p>
+              <bd-p variant="small">Bitdefender provides multi-layer protection against all cyber threats.</bd-p>
             </bd-accordion-bg-item>
             <bd-accordion-bg-item title="Does it work on Mac?">
-              <bd-p kind="small">Yes, Bitdefender is fully compatible with macOS 10.14 and later.</bd-p>
+              <bd-p variant="small">Yes, Bitdefender is fully compatible with macOS 10.14 and later.</bd-p>
             </bd-accordion-bg-item>
           </bd-accordion-bg>
         </div>
       </div>
 
-      <bd-p kind="small" style="color: var(--color-neutral-500); margin: 24px 0 8px;">
+      <bd-p variant="small" style="color: var(--color-neutral-500); margin: 24px 0 8px;">
         Cu <code>no-padding</code> — 0px padding-top/bottom (secțiunea lipită de chenar):
       </bd-p>
       <div style="outline: 2px dashed red;">
         <div class="accordion faq block">
           <bd-accordion-bg title="Questions? Answers." no-padding>
             <bd-accordion-bg-item title="How does Bitdefender protect me?">
-              <bd-p kind="small">Bitdefender provides multi-layer protection against all cyber threats.</bd-p>
+              <bd-p variant="small">Bitdefender provides multi-layer protection against all cyber threats.</bd-p>
             </bd-accordion-bg-item>
             <bd-accordion-bg-item title="Does it work on Mac?">
-              <bd-p kind="small">Yes, Bitdefender is fully compatible with macOS 10.14 and later.</bd-p>
+              <bd-p variant="small">Yes, Bitdefender is fully compatible with macOS 10.14 and later.</bd-p>
             </bd-accordion-bg-item>
           </bd-accordion-bg>
         </div>
@@ -223,18 +223,18 @@ export const TermsOfUse = {
     <div class="accordion terms-of-use block">
       <bd-accordion-bg title="Terms of use">
         <bd-accordion-bg-item title="Auto renewal terms" open>
-          <bd-p kind="small">Your subscription automatically begins at the purchase date;</bd-p>
-          <bd-p kind="small">By subscribing, you are purchasing a recurring subscription which will automatically renew;</bd-p>
-          <bd-p kind="small">The Bitdefender Auto Renewal Plan is designed to save you time and effort.</bd-p>
+          <bd-p variant="small">Your subscription automatically begins at the purchase date;</bd-p>
+          <bd-p variant="small">By subscribing, you are purchasing a recurring subscription which will automatically renew;</bd-p>
+          <bd-p variant="small">The Bitdefender Auto Renewal Plan is designed to save you time and effort.</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Here is what the Bitdefender Auto Renewal Plan means for you">
-          <bd-p kind="small"><a href="#">Here is what the Bitdefender Auto Renewal Plan means for you</a></bd-p>
+          <bd-p variant="small"><a href="#">Here is what the Bitdefender Auto Renewal Plan means for you</a></bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Affirmative consent">
-          <bd-p kind="small"><a href="#">Affirmative consent</a></bd-p>
+          <bd-p variant="small"><a href="#">Affirmative consent</a></bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="How to cancel + email address cancelation support">
-          <bd-p kind="small"><a href="#">How to cancel + email address cancelation support</a></bd-p>
+          <bd-p variant="small"><a href="#">How to cancel + email address cancelation support</a></bd-p>
         </bd-accordion-bg-item>
       </bd-accordion-bg>
     </div>
@@ -249,13 +249,13 @@ export const TermsOfUseWithFooter = {
     <div class="accordion terms-of-use block">
       <bd-accordion-bg title="Terms of use">
         <bd-accordion-bg-item title="Auto renewal terms" open>
-          <bd-p kind="small">Your subscription automatically begins at the purchase date;</bd-p>
-          <bd-p kind="small">By subscribing, you are purchasing a recurring subscription which will automatically renew;</bd-p>
+          <bd-p variant="small">Your subscription automatically begins at the purchase date;</bd-p>
+          <bd-p variant="small">By subscribing, you are purchasing a recurring subscription which will automatically renew;</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Affirmative consent">
-          <bd-p kind="small"><a href="#">Affirmative consent</a></bd-p>
+          <bd-p variant="small"><a href="#">Affirmative consent</a></bd-p>
         </bd-accordion-bg-item>
-        <bd-p slot="footer" kind="small">* Sales tax included. First year price. See Terms of Use below.</bd-p>
+        <bd-p slot="footer" variant="small">* Sales tax included. First year price. See Terms of Use below.</bd-p>
       </bd-accordion-bg>
     </div>
   `
@@ -269,15 +269,15 @@ export const SystemRequirements = {
     <div class="accordion system-requirements block">
       <bd-accordion-bg title="System Requirements" guide-icon="/assets/user_guide.png" guide-label="User guide >" guide-href="#">
         <bd-accordion-bg-item title="Bitdefender Parental Control" open>
-          <bd-p kind="small"><strong>Windows™ Operating Systems</strong><br />Microsoft Windows 7 (all versions) with Service Pack 1 (SP 1) or later.</bd-p>
-          <bd-p kind="small"><strong>Mac® Operating Systems</strong><br />macOS X Yosemite (10.10) or later</bd-p>
-          <bd-p kind="small"><strong>Android™ Operating Systems</strong><br />Android 5.0 or later</bd-p>
-          <bd-p kind="small"><strong>iOS Operating Systems</strong><br />iOS 12.0 or later</bd-p>
+          <bd-p variant="small"><strong>Windows™ Operating Systems</strong><br />Microsoft Windows 7 (all versions) with Service Pack 1 (SP 1) or later.</bd-p>
+          <bd-p variant="small"><strong>Mac® Operating Systems</strong><br />macOS X Yosemite (10.10) or later</bd-p>
+          <bd-p variant="small"><strong>Android™ Operating Systems</strong><br />Android 5.0 or later</bd-p>
+          <bd-p variant="small"><strong>iOS Operating Systems</strong><br />iOS 12.0 or later</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Bitdefender Central">
-          <bd-p kind="small">Bitdefender Central requires a modern browser with JavaScript enabled.</bd-p>
+          <bd-p variant="small">Bitdefender Central requires a modern browser with JavaScript enabled.</bd-p>
         </bd-accordion-bg-item>
-        <bd-p slot="footer" kind="small">* Requirements may vary by product version.</bd-p>
+        <bd-p slot="footer" variant="small">* Requirements may vary by product version.</bd-p>
       </bd-accordion-bg>
     </div>
   `
@@ -292,19 +292,19 @@ export const AllVariants = {
     <div class="accordion faq block">
       <bd-accordion-bg title="Questions? Answers.">
         <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?">
-          <bd-p kind="small">Bitdefender Internet Security provides the best protection through multiple layers of security:</bd-p>
+          <bd-p variant="small">Bitdefender Internet Security provides the best protection through multiple layers of security:</bd-p>
           <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Advanced threat detection using artificial intelligence</bd-p></bd-li>
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Real-time protection against viruses, malware, and ransomware</bd-p></bd-li>
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Secure browsing with anti-phishing technology</bd-p></bd-li>
-            <bd-li kind="bullet" size="md"><bd-p kind="small">Firewall protection for network security</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Advanced threat detection using artificial intelligence</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Real-time protection against viruses, malware, and ransomware</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Secure browsing with anti-phishing technology</bd-p></bd-li>
+            <bd-li variant="bullet" size="md"><bd-p variant="small">Firewall protection for network security</bd-p></bd-li>
           </bd-list>
-          <bd-p kind="small">All these features work together to provide comprehensive protection for your devices.</bd-p>
+          <bd-p variant="small">All these features work together to provide comprehensive protection for your devices.</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?">
-          <bd-p kind="small">Yes! Bitdefender Internet Security offers unbeatable ransomware protection.</bd-p>
+          <bd-p variant="small">Yes! Bitdefender Internet Security offers unbeatable ransomware protection.</bd-p>
         </bd-accordion-bg-item>
-        <bd-p slot="footer" kind="small">* Prices include VAT. Terms and conditions apply.</bd-p>
+        <bd-p slot="footer" variant="small">* Prices include VAT. Terms and conditions apply.</bd-p>
       </bd-accordion-bg>
     </div>
 
@@ -313,20 +313,20 @@ export const AllVariants = {
     <div class="accordion terms-of-use block">
       <bd-accordion-bg title="Terms of use">
         <bd-accordion-bg-item title="Auto renewal terms" open>
-          <bd-p kind="small">Your subscription automatically begins at the purchase date;</bd-p>
-          <bd-p kind="small">By subscribing, you are purchasing a recurring subscription which will automatically renew;</bd-p>
-          <bd-p kind="small">The Bitdefender Auto Renewal Plan is designed to save you time, effort, and minimize your vulnerability risk.</bd-p>
+          <bd-p variant="small">Your subscription automatically begins at the purchase date;</bd-p>
+          <bd-p variant="small">By subscribing, you are purchasing a recurring subscription which will automatically renew;</bd-p>
+          <bd-p variant="small">The Bitdefender Auto Renewal Plan is designed to save you time, effort, and minimize your vulnerability risk.</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Here is what the Bitdefender Auto Renewal Plan means for you">
-          <bd-p kind="small"><a href="#">Here is what the Bitdefender Auto Renewal Plan means for you</a></bd-p>
+          <bd-p variant="small"><a href="#">Here is what the Bitdefender Auto Renewal Plan means for you</a></bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Affirmative consent">
-          <bd-p kind="small"><a href="#">Affirmative consent</a></bd-p>
+          <bd-p variant="small"><a href="#">Affirmative consent</a></bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="How to cancel + email address cancelation support">
-          <bd-p kind="small"><a href="#">How to cancel + email address cancelation support</a></bd-p>
+          <bd-p variant="small"><a href="#">How to cancel + email address cancelation support</a></bd-p>
         </bd-accordion-bg-item>
-        <bd-p slot="footer" kind="small">* Sales tax included. First year price. See Terms of Use below.</bd-p>
+        <bd-p slot="footer" variant="small">* Sales tax included. First year price. See Terms of Use below.</bd-p>
       </bd-accordion-bg>
     </div>
 
@@ -335,13 +335,13 @@ export const AllVariants = {
     <div class="accordion system-requirements block">
       <bd-accordion-bg title="System Requirements" guide-icon="/assets/user_guide.png" guide-label="User guide >" guide-href="#">
         <bd-accordion-bg-item title="Bitdefender Parental Control" open>
-          <bd-p kind="small"><strong>Windows™ Operating Systems</strong><br />Microsoft Windows 7 (all versions) with Service Pack 1 (SP 1) or later.</bd-p>
-          <bd-p kind="small"><strong>Mac® Operating Systems</strong><br />macOS X Yosemite (10.10) or later</bd-p>
-          <bd-p kind="small"><strong>Android™ Operating Systems</strong><br />Android 5.0 or later</bd-p>
-          <bd-p kind="small"><strong>iOS Operating Systems</strong><br />iOS 12.0 or later</bd-p>
+          <bd-p variant="small"><strong>Windows™ Operating Systems</strong><br />Microsoft Windows 7 (all versions) with Service Pack 1 (SP 1) or later.</bd-p>
+          <bd-p variant="small"><strong>Mac® Operating Systems</strong><br />macOS X Yosemite (10.10) or later</bd-p>
+          <bd-p variant="small"><strong>Android™ Operating Systems</strong><br />Android 5.0 or later</bd-p>
+          <bd-p variant="small"><strong>iOS Operating Systems</strong><br />iOS 12.0 or later</bd-p>
         </bd-accordion-bg-item>
         <bd-accordion-bg-item title="Bitdefender Central">
-          <bd-p kind="small">Bitdefender Central</bd-p>
+          <bd-p variant="small">Bitdefender Central</bd-p>
         </bd-accordion-bg-item>
       </bd-accordion-bg>
     </div>

package/src/components/accordion/accordion-keyboard.js

@@ -0,0 +1,80 @@
+/**
+ * Keyboard navigation between the disclosure triggers of one accordion group.
+ *
+ * The group is the set of accordion items that share a parent element -- the
+ * children of a bd-accordion-section, of a bd-accordion-bg, or of whatever the
+ * consuming page put them in. That is the smallest definition that gives the
+ * group ownership of navigation without a coordinator: the section is optional
+ * (Components/Accordion has an isolated-item story), items are cloned into
+ * bd-features' shadow root, and a consumer may nest one accordion inside
+ * another's panel. In every one of those cases the item's parent is the right
+ * group, and an item with no siblings is a group of one where these keys do
+ * nothing but swallow the key.
+ *
+ * The group is read at keydown time rather than cached, so items inserted or
+ * removed later are simply there or not.
+ *
+ * Keys, following the WAI-ARIA accordion pattern:
+ *
+ *   ArrowDown / ArrowRight   next trigger
+ *   ArrowUp   / ArrowLeft    previous trigger
+ *   Home                     first trigger
+ *   End                      last trigger
+ *
+ * The arrows wrap at the ends, as Components/Tab List already does in this package;
+ * the pattern permits either wrapping or stopping and one answer per package is
+ * better than two. Left/Right are an extension of the pattern's Up/Down for a
+ * vertical list, harmless because the handler is on the button and cannot
+ * reach a text field in a panel.
+ *
+ * These keys MOVE focus and do nothing else. They do not open or close the
+ * item they land on -- Enter and Space do that, through the button's own
+ * activation, which this code never touches -- and Tab and Shift+Tab are not
+ * handled here at all, so the document's tab sequence runs through the group
+ * unchanged. There is no trap.
+ */
+
+const ITEM_TAGS = new Set(["BD-ACCORDION-ITEM", "BD-ACCORDION-BG-ITEM"]);
+
+/** The accordion items that share this item's parent, in DOM order. */
+export function accordionGroup(item) {
+  const parent = item.parentElement;
+  if (!parent) return [item];
+  return Array.from(parent.children).filter(el => ITEM_TAGS.has(el.tagName));
+}
+
+/**
+ * Handle a keydown that fired on an item's trigger. Returns true when the key
+ * was one of ours.
+ */
+export function onTriggerKeydown(item, event) {
+  if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return false;
+
+  let where;
+  switch (event.key) {
+    case "ArrowDown":
+    case "ArrowRight": where = "next"; break;
+    case "ArrowUp":
+    case "ArrowLeft": where = "prev"; break;
+    case "Home": where = "first"; break;
+    case "End": where = "last"; break;
+    default: return false;
+  }
+
+  const group = accordionGroup(item);
+  const index = group.indexOf(item);
+  if (index < 0) return false;
+
+  const last = group.length - 1;
+  let target;
+  if (where === "first") target = 0;
+  else if (where === "last") target = last;
+  else if (where === "next") target = index === last ? 0 : index + 1;
+  else target = index === 0 ? last : index - 1;
+
+  // Even a group of one swallows the key: an arrow on a focused disclosure
+  // trigger should not scroll the page out from under it.
+  event.preventDefault();
+  if (target !== index) group[target].focusTrigger?.();
+  return true;
+}