@nectary/components 5.1.1 → 5.1.3

package/bundle.js

@@ -5731,6 +5731,8 @@ const orientationValues = [
   "top-right",
   "bottom-left",
   "bottom-right",
+  "left",
+  "right",
   "bottom",
   "top"
 ];
@@ -5741,9 +5743,15 @@ const getPopOrientation = (orientation) => {
   if (orientation === "bottom") {
     return "bottom-stretch";
   }
+  if (orientation === "left") {
+    return "center-left";
+  }
+  if (orientation === "right") {
+    return "center-right";
+  }
   return orientation;
 };
-const templateHTML$K = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+const templateHTML$K = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation=left]) #content-wrapper{padding-top:0;padding-right:4px}:host([orientation=right]) #content-wrapper{padding-top:0;padding-left:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}:host([orientation=left][tip]) #content-wrapper{padding-top:0;padding-right:12px}:host([orientation=right][tip]) #content-wrapper{padding-top:0;padding-left:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(-90deg);top:calc(50%);left:calc(100% - 13px)}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:calc(50%);left:13px}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 const TIP_SIZE = 16;
 const template$K = document.createElement("template");
 template$K.innerHTML = templateHTML$K;
@@ -5912,16 +5920,23 @@ class Popover extends NectaryElement {
     const orientation = this.orientation;
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
-    const diffX = targetRect.x - contentRect.x;
-    let desiredX = diffX + targetRect.width / 2;
-    if (orientation === "bottom-left" || orientation === "top-left") {
-      desiredX = Math.max(desiredX, contentRect.width * 0.75);
-    }
-    if (orientation === "bottom-right" || orientation === "top-right") {
-      desiredX = Math.min(desiredX, contentRect.width * 0.25);
+    if (orientation.startsWith("top") || orientation.startsWith("bottom")) {
+      const diffX = targetRect.x - contentRect.x;
+      let desiredX = diffX + targetRect.width / 2;
+      if (orientation === "bottom-left" || orientation === "top-left") {
+        desiredX = Math.max(desiredX, contentRect.width * 0.75);
+      }
+      if (orientation === "bottom-right" || orientation === "top-right") {
+        desiredX = Math.min(desiredX, contentRect.width * 0.25);
+      }
+      const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
+      this.#$tip.style.left = `${xPos}px`;
+    } else if (orientation.startsWith("left") || orientation.startsWith("right")) {
+      const diffY = targetRect.y - contentRect.y;
+      const desiredY = diffY + targetRect.height / 2;
+      const yPos = Math.max(TIP_SIZE, Math.min(desiredY, contentRect.height - TIP_SIZE));
+      this.#$tip.style.top = `${yPos}px`;
     }
-    const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
-    this.#$tip.style.left = `${xPos}px`;
     setClass(this.#$tip, "hidden", rectOverlap(targetRect, contentRect));
   };
   // Prevent content from overflowing the viewport
@@ -10479,12 +10494,80 @@ class SegmentedControlOption extends NectaryElement {
   };
 }
 defineCustomElement("sinch-segmented-control-option", SegmentedControlOption);
+function getActualActiveElement() {
+  let activeElement = document.activeElement;
+  while (activeElement?.shadowRoot?.activeElement != null) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+}
+function createKeyboardNavigation() {
+  return {
+    navigateToNextOption(enabledOptions, forward) {
+      const optionsLength = enabledOptions.length;
+      if (optionsLength === 0) {
+        return;
+      }
+      const currentIndex = enabledOptions.findIndex((option) => option === getActualActiveElement());
+      let nextIndex;
+      if (currentIndex !== -1) {
+        if (forward) {
+          nextIndex = (currentIndex + 1) % optionsLength;
+        } else {
+          nextIndex = currentIndex === 0 ? optionsLength - 1 : currentIndex - 1;
+        }
+      } else {
+        nextIndex = forward ? 0 : optionsLength - 1;
+      }
+      this.navigateToOption(enabledOptions, nextIndex);
+    },
+    navigateToOption(enabledOptions, index) {
+      const optionsLength = enabledOptions.length;
+      if (enabledOptions.length === 0 || index < 0 || index >= optionsLength) {
+        return;
+      }
+      const option = enabledOptions[index];
+      option.focus();
+    },
+    handleKeyboardNavigation(e, enabledOptions) {
+      switch (e.code) {
+        case "Space":
+        case "Enter": {
+          e.preventDefault();
+          const target = getTargetByAttribute(e, "value");
+          if (target !== null) {
+            target.click();
+          }
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowRight": {
+          e.preventDefault();
+          this.navigateToNextOption(enabledOptions, e.code === "ArrowRight");
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, 0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, enabledOptions.length - 1);
+          break;
+        }
+      }
+    }
+  };
+}
 const templateHTML$k = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template$k = document.createElement("template");
 template$k.innerHTML = templateHTML$k;
 class SegmentedControl extends NectaryElement {
   #$slot;
   #controller = null;
+  #enabledOptions = [];
+  #keyboardNav = createKeyboardNavigation();
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -10496,10 +10579,12 @@ class SegmentedControl extends NectaryElement {
     const { signal } = this.#controller;
     const options = { signal };
     this.setAttribute("role", "tablist");
+    this.setAttribute("aria-orientation", "horizontal");
     this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
     this.#$slot.addEventListener("click", this.#onOptionClick, options);
     this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler);
+    this.#updateEnabledOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -10522,8 +10607,14 @@ class SegmentedControl extends NectaryElement {
   get value() {
     return getAttribute(this, "value", "");
   }
+  #updateEnabledOptions = () => {
+    this.#enabledOptions = Array.from(this.#$slot.assignedElements()).filter(
+      (option) => !getBooleanAttribute(option, "disabled")
+    );
+  };
   #onSlotChange = () => {
     this.#onValueChange(this.value);
+    this.#updateEnabledOptions();
   };
   #onOptionClick = (e) => {
     const target = getTargetByAttribute(e, "value");
@@ -10536,16 +10627,7 @@ class SegmentedControl extends NectaryElement {
     );
   };
   #onOptionKeydown = (e) => {
-    switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        const target = getTargetByAttribute(e, "value");
-        if (target !== null) {
-          target.click();
-        }
-      }
-    }
+    this.#keyboardNav.handleKeyboardNavigation(e, this.#enabledOptions);
   };
   #onValueChange(value) {
     for (const $option of this.#$slot.assignedElements()) {
@@ -10641,6 +10723,8 @@ template$i.innerHTML = templateHTML$i;
 class SegmentedIconControl extends NectaryElement {
   #$slot;
   #controller = null;
+  #keyboardNav = createKeyboardNavigation();
+  #enabledOptions = [];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -10652,10 +10736,12 @@ class SegmentedIconControl extends NectaryElement {
     const { signal } = this.#controller;
     const options = { signal };
     this.setAttribute("role", "tablist");
+    this.setAttribute("aria-orientation", "horizontal");
     this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
     this.#$slot.addEventListener("click", this.#onOptionClick, options);
     this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.#updateEnabledOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -10684,8 +10770,14 @@ class SegmentedIconControl extends NectaryElement {
   get multiple() {
     return getBooleanAttribute(this, "multiple");
   }
+  #updateEnabledOptions = () => {
+    this.#enabledOptions = Array.from(this.#$slot.assignedElements()).filter(
+      (option) => !getBooleanAttribute(option, "disabled")
+    );
+  };
   #onSlotChange = () => {
     this.#onValueChange(this.value);
+    this.#updateEnabledOptions();
   };
   #onOptionClick = (e) => {
     const target = getTargetByAttribute(e, "value");
@@ -10699,16 +10791,7 @@ class SegmentedIconControl extends NectaryElement {
     );
   };
   #onOptionKeydown = (e) => {
-    switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        const target = getTargetByAttribute(e, "value");
-        if (target !== null) {
-          target.click();
-        }
-      }
-    }
+    this.#keyboardNav.handleKeyboardNavigation(e, this.#enabledOptions);
   };
   #onValueChange(csv) {
     if (this.multiple) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.1.1",
+  "version": "5.1.3",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/popover/index.js

@@ -5,7 +5,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { rectOverlap } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getPopOrientation, orientationValues } from "./utils.js";
-const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation=left]) #content-wrapper{padding-top:0;padding-right:4px}:host([orientation=right]) #content-wrapper{padding-top:0;padding-left:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}:host([orientation=left][tip]) #content-wrapper{padding-top:0;padding-right:12px}:host([orientation=right][tip]) #content-wrapper{padding-top:0;padding-left:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(-90deg);top:calc(50%);left:calc(100% - 13px)}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:calc(50%);left:13px}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 const TIP_SIZE = 16;
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
@@ -174,16 +174,23 @@ class Popover extends NectaryElement {
     const orientation = this.orientation;
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
-    const diffX = targetRect.x - contentRect.x;
-    let desiredX = diffX + targetRect.width / 2;
-    if (orientation === "bottom-left" || orientation === "top-left") {
-      desiredX = Math.max(desiredX, contentRect.width * 0.75);
-    }
-    if (orientation === "bottom-right" || orientation === "top-right") {
-      desiredX = Math.min(desiredX, contentRect.width * 0.25);
+    if (orientation.startsWith("top") || orientation.startsWith("bottom")) {
+      const diffX = targetRect.x - contentRect.x;
+      let desiredX = diffX + targetRect.width / 2;
+      if (orientation === "bottom-left" || orientation === "top-left") {
+        desiredX = Math.max(desiredX, contentRect.width * 0.75);
+      }
+      if (orientation === "bottom-right" || orientation === "top-right") {
+        desiredX = Math.min(desiredX, contentRect.width * 0.25);
+      }
+      const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
+      this.#$tip.style.left = `${xPos}px`;
+    } else if (orientation.startsWith("left") || orientation.startsWith("right")) {
+      const diffY = targetRect.y - contentRect.y;
+      const desiredY = diffY + targetRect.height / 2;
+      const yPos = Math.max(TIP_SIZE, Math.min(desiredY, contentRect.height - TIP_SIZE));
+      this.#$tip.style.top = `${yPos}px`;
     }
-    const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
-    this.#$tip.style.left = `${xPos}px`;
     setClass(this.#$tip, "hidden", rectOverlap(targetRect, contentRect));
   };
   // Prevent content from overflowing the viewport

package/popover/types.d.ts

@@ -1,5 +1,5 @@
 import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
-export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
+export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top' | 'left' | 'right';
 export type TSinchPopoverProps = {
     /** Open/close state */
     open: boolean;

package/popover/utils.js

@@ -3,6 +3,8 @@ const orientationValues = [
   "top-right",
   "bottom-left",
   "bottom-right",
+  "left",
+  "right",
   "bottom",
   "top"
 ];
@@ -13,6 +15,12 @@ const getPopOrientation = (orientation) => {
   if (orientation === "bottom") {
     return "bottom-stretch";
   }
+  if (orientation === "left") {
+    return "center-left";
+  }
+  if (orientation === "right") {
+    return "center-right";
+  }
   return orientation;
 };
 export {

package/segmented-control/index.js

@@ -2,12 +2,15 @@ import { updateAttribute, getAttribute, getBooleanAttribute, updateBooleanAttrib
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getTargetByAttribute } from "../utils/event-target.js";
+import { createKeyboardNavigation } from "../utils/control-keyboard-navigation.js";
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SegmentedControl extends NectaryElement {
   #$slot;
   #controller = null;
+  #enabledOptions = [];
+  #keyboardNav = createKeyboardNavigation();
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -19,10 +22,12 @@ class SegmentedControl extends NectaryElement {
     const { signal } = this.#controller;
     const options = { signal };
     this.setAttribute("role", "tablist");
+    this.setAttribute("aria-orientation", "horizontal");
     this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
     this.#$slot.addEventListener("click", this.#onOptionClick, options);
     this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler);
+    this.#updateEnabledOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -45,8 +50,14 @@ class SegmentedControl extends NectaryElement {
   get value() {
     return getAttribute(this, "value", "");
   }
+  #updateEnabledOptions = () => {
+    this.#enabledOptions = Array.from(this.#$slot.assignedElements()).filter(
+      (option) => !getBooleanAttribute(option, "disabled")
+    );
+  };
   #onSlotChange = () => {
     this.#onValueChange(this.value);
+    this.#updateEnabledOptions();
   };
   #onOptionClick = (e) => {
     const target = getTargetByAttribute(e, "value");
@@ -59,16 +70,7 @@ class SegmentedControl extends NectaryElement {
     );
   };
   #onOptionKeydown = (e) => {
-    switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        const target = getTargetByAttribute(e, "value");
-        if (target !== null) {
-          target.click();
-        }
-      }
-    }
+    this.#keyboardNav.handleKeyboardNavigation(e, this.#enabledOptions);
   };
   #onValueChange(value) {
     for (const $option of this.#$slot.assignedElements()) {

package/segmented-icon-control/index.js

@@ -3,12 +3,15 @@ import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttrib
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getTargetByAttribute } from "../utils/event-target.js";
+import { createKeyboardNavigation } from "../utils/control-keyboard-navigation.js";
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SegmentedIconControl extends NectaryElement {
   #$slot;
   #controller = null;
+  #keyboardNav = createKeyboardNavigation();
+  #enabledOptions = [];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -20,10 +23,12 @@ class SegmentedIconControl extends NectaryElement {
     const { signal } = this.#controller;
     const options = { signal };
     this.setAttribute("role", "tablist");
+    this.setAttribute("aria-orientation", "horizontal");
     this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
     this.#$slot.addEventListener("click", this.#onOptionClick, options);
     this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.#updateEnabledOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -52,8 +57,14 @@ class SegmentedIconControl extends NectaryElement {
   get multiple() {
     return getBooleanAttribute(this, "multiple");
   }
+  #updateEnabledOptions = () => {
+    this.#enabledOptions = Array.from(this.#$slot.assignedElements()).filter(
+      (option) => !getBooleanAttribute(option, "disabled")
+    );
+  };
   #onSlotChange = () => {
     this.#onValueChange(this.value);
+    this.#updateEnabledOptions();
   };
   #onOptionClick = (e) => {
     const target = getTargetByAttribute(e, "value");
@@ -67,16 +78,7 @@ class SegmentedIconControl extends NectaryElement {
     );
   };
   #onOptionKeydown = (e) => {
-    switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        const target = getTargetByAttribute(e, "value");
-        if (target !== null) {
-          target.click();
-        }
-      }
-    }
+    this.#keyboardNav.handleKeyboardNavigation(e, this.#enabledOptions);
   };
   #onValueChange(csv) {
     if (this.multiple) {

package/utils/control-keyboard-navigation.d.ts

@@ -0,0 +1,5 @@
+export declare function createKeyboardNavigation(): {
+    navigateToNextOption(enabledOptions: Element[], forward: boolean): void;
+    navigateToOption(enabledOptions: Element[], index: number): void;
+    handleKeyboardNavigation(e: KeyboardEvent, enabledOptions: Element[]): void;
+};

package/utils/control-keyboard-navigation.js

@@ -0,0 +1,70 @@
+import { getTargetByAttribute } from "./event-target.js";
+function getActualActiveElement() {
+  let activeElement = document.activeElement;
+  while (activeElement?.shadowRoot?.activeElement != null) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+}
+function createKeyboardNavigation() {
+  return {
+    navigateToNextOption(enabledOptions, forward) {
+      const optionsLength = enabledOptions.length;
+      if (optionsLength === 0) {
+        return;
+      }
+      const currentIndex = enabledOptions.findIndex((option) => option === getActualActiveElement());
+      let nextIndex;
+      if (currentIndex !== -1) {
+        if (forward) {
+          nextIndex = (currentIndex + 1) % optionsLength;
+        } else {
+          nextIndex = currentIndex === 0 ? optionsLength - 1 : currentIndex - 1;
+        }
+      } else {
+        nextIndex = forward ? 0 : optionsLength - 1;
+      }
+      this.navigateToOption(enabledOptions, nextIndex);
+    },
+    navigateToOption(enabledOptions, index) {
+      const optionsLength = enabledOptions.length;
+      if (enabledOptions.length === 0 || index < 0 || index >= optionsLength) {
+        return;
+      }
+      const option = enabledOptions[index];
+      option.focus();
+    },
+    handleKeyboardNavigation(e, enabledOptions) {
+      switch (e.code) {
+        case "Space":
+        case "Enter": {
+          e.preventDefault();
+          const target = getTargetByAttribute(e, "value");
+          if (target !== null) {
+            target.click();
+          }
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowRight": {
+          e.preventDefault();
+          this.navigateToNextOption(enabledOptions, e.code === "ArrowRight");
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, 0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, enabledOptions.length - 1);
+          break;
+        }
+      }
+    }
+  };
+}
+export {
+  createKeyboardNavigation
+};