@nectary/components 5.37.7 → 5.37.8

package/bundle.js

@@ -7378,12 +7378,80 @@ class Popover extends NectaryElement {
   };
 }
 defineCustomElement("sinch-popover", Popover);
+const isActivationKey = (key) => key === "Enter" || key === " ";
+function createKeyboardNavigation() {
+  return {
+    navigateToNextOption(enabledOptions, forward) {
+      const optionsLength = enabledOptions.length;
+      if (optionsLength === 0) {
+        return;
+      }
+      const currentIndex = enabledOptions.findIndex((option) => option === getDeepActiveElement());
+      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": {
+          e.preventDefault();
+          this.navigateToNextOption(enabledOptions, false);
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          this.navigateToNextOption(enabledOptions, true);
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, 0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, enabledOptions.length - 1);
+          break;
+        }
+      }
+    }
+  };
+}
 const templateHTML$P = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-comp-tab-color-default-border-initial);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template$P = document.createElement("template");
 template$P.innerHTML = templateHTML$P;
 class Tabs extends NectaryElement {
   #$slot;
   #controller = null;
+  #enabledOptions = [];
+  #keyboardNav = createKeyboardNavigation();
+  #observer = null;
+  #rovingValue = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -7393,14 +7461,28 @@ class Tabs extends NectaryElement {
   connectedCallback() {
     this.#controller = new AbortController();
     const { signal } = this.#controller;
+    const options = { signal };
     this.setAttribute("role", "tablist");
-    this.#$slot.addEventListener("option-change", this.#onOptionChange, { signal });
-    this.#$slot.addEventListener("slotchange", this.#onSlotChange, { signal });
-    this.addEventListener("-change", this.#onChangeReactHandler, { signal });
+    this.setAttribute("aria-orientation", "horizontal");
+    this.#$slot.addEventListener("option-change", this.#onOptionChange, options);
+    this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
+    this.#$slot.addEventListener("focusin", this.#onOptionFocusIn, options);
+    this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
+    this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.#observer = new MutationObserver(this.#onOptionMutation);
+    this.#observer.observe(this, {
+      attributes: true,
+      attributeFilter: ["disabled", "value"],
+      childList: true,
+      subtree: true
+    });
+    this.#syncOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
+    this.#observer?.disconnect();
+    this.#observer = null;
   }
   static get observedAttributes() {
     return ["value"];
@@ -7426,19 +7508,91 @@ class Tabs extends NectaryElement {
     }
     return null;
   }
+  #getOptions() {
+    return this.#$slot.assignedElements();
+  }
+  #updateEnabledOptions(options = this.#getOptions()) {
+    this.#enabledOptions = options.filter((option) => !getBooleanAttribute(option, "disabled"));
+  }
+  #getFocusableOption() {
+    if (this.#enabledOptions.length === 0) {
+      return null;
+    }
+    if (this.#rovingValue !== null) {
+      const rovingOption = this.#enabledOptions.find(
+        (option) => getAttribute(option, "value", "") === this.#rovingValue
+      );
+      if (rovingOption != null) {
+        return rovingOption;
+      }
+    }
+    const selectedOption = this.#enabledOptions.find(
+      (option) => getAttribute(option, "value", "") === this.value
+    );
+    return selectedOption ?? this.#enabledOptions[0];
+  }
+  #syncOptions() {
+    const options = this.#getOptions();
+    this.#updateEnabledOptions(options);
+    const focusableOption = this.#getFocusableOption();
+    this.#rovingValue = focusableOption == null ? null : getAttribute(focusableOption, "value", "");
+    for (const $option of options) {
+      const isDisabled = getBooleanAttribute($option, "disabled");
+      const isChecked = !isDisabled && this.value === getAttribute($option, "value", "");
+      updateBooleanAttribute($option, "data-checked", isChecked);
+      $option.tabIndex = !isDisabled && $option === focusableOption ? 0 : -1;
+    }
+  }
   #onSlotChange = () => {
-    this.#onValueChange(this.value);
+    this.#syncOptions();
   };
   #onOptionChange = (e) => {
     e.stopPropagation();
-    this.#dispatchChangeEvent(e.detail);
+    const value = e.detail;
+    this.#rovingValue = value;
+    this.#dispatchChangeEvent(value);
   };
   #onValueChange(value) {
-    for (const $option of this.#$slot.assignedElements()) {
-      const isChecked = !getBooleanAttribute($option, "disabled") && value === getAttribute($option, "value", "");
-      updateBooleanAttribute($option, "data-checked", isChecked);
-    }
+    this.#rovingValue = value;
+    this.#syncOptions();
   }
+  #onOptionFocusIn = (e) => {
+    const target = getTargetByAttribute(e, "value");
+    if (target === null || getBooleanAttribute(target, "disabled")) {
+      return;
+    }
+    this.#rovingValue = getAttribute(target, "value", "");
+    this.#syncOptions();
+  };
+  #onOptionKeydown = (e) => {
+    switch (e.code) {
+      case "ArrowLeft": {
+        e.preventDefault();
+        this.#keyboardNav.navigateToNextOption(this.#enabledOptions, false);
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        this.#keyboardNav.navigateToNextOption(this.#enabledOptions, true);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        this.#keyboardNav.navigateToOption(this.#enabledOptions, 0);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        this.#keyboardNav.navigateToOption(this.#enabledOptions, this.#enabledOptions.length - 1);
+        break;
+      }
+    }
+  };
+  #onOptionMutation = (mutations) => {
+    if (mutations.some((mutation) => mutation.target !== this)) {
+      this.#syncOptions();
+    }
+  };
   #dispatchChangeEvent(value) {
     this.dispatchEvent(
       new CustomEvent("-change", { detail: value })
@@ -7450,25 +7604,26 @@ class Tabs extends NectaryElement {
   };
 }
 defineCustomElement("sinch-tabs", Tabs);
-const templateHTML$O = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button" tabindex="0"><slot name="icon"></slot></button></sinch-tooltip>';
+const templateHTML$O = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}:host([disabled]) #button{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}:host(:hover:not([disabled])) #button{background-color:var(--sinch-comp-tab-color-default-background-hover)}:host(:focus-visible) #button::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}::slotted(*){display:block;pointer-events:none}</style><sinch-tooltip id="tooltip"><div id="button"><slot name="icon"></slot></div></sinch-tooltip>';
 const template$O = document.createElement("template");
 template$O.innerHTML = templateHTML$O;
 class TabsIconOption extends NectaryElement {
-  #$button;
   #$tooltip;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({ delegatesFocus: true });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template$O.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector("#button");
     this.#$tooltip = shadowRoot.querySelector("#tooltip");
   }
   connectedCallback() {
     this.setAttribute("role", "tab");
-    this.#$button.addEventListener("click", this.#onClick);
+    this.addEventListener("click", this.#onClick);
+    this.addEventListener("keydown", this.#onKeyDown);
+    this.#updateTabIndex();
   }
   disconnectedCallback() {
-    this.#$button.removeEventListener("click", this.#onClick);
+    this.removeEventListener("click", this.#onClick);
+    this.removeEventListener("keydown", this.#onKeyDown);
   }
   static get observedAttributes() {
     return ["data-checked", "disabled", "aria-label"];
@@ -7496,7 +7651,8 @@ class TabsIconOption extends NectaryElement {
       }
       case "disabled": {
         const isDisabled = isAttrTrue(newVal);
-        this.#$button.disabled = isDisabled;
+        this.#updateTabIndex();
+        updateExplicitBooleanAttribute(this, "aria-disabled", isDisabled);
         updateBooleanAttribute(this, name, isDisabled);
         break;
       }
@@ -7510,17 +7666,32 @@ class TabsIconOption extends NectaryElement {
     return true;
   }
   focus() {
-    this.#$button.focus();
+    HTMLElement.prototype.focus.call(this);
   }
   blur() {
-    this.#$button.blur();
+    HTMLElement.prototype.blur.call(this);
+  }
+  #updateTabIndex() {
+    if (this.disabled) {
+      this.tabIndex = -1;
+    }
   }
   #onClick = (e) => {
+    if (this.disabled) {
+      return;
+    }
     e.stopPropagation();
     this.dispatchEvent(
       new CustomEvent("option-change", { bubbles: true, detail: this.value })
     );
   };
+  #onKeyDown = (e) => {
+    if (this.disabled || !isActivationKey(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    this.#onClick(e);
+  };
 }
 defineCustomElement("sinch-tabs-icon-option", TabsIconOption);
 const createDebounce = (delayFn, cancelFn) => (cb) => {
@@ -13058,65 +13229,6 @@ class SegmentedControlOption extends NectaryElement {
   };
 }
 defineCustomElement("sinch-segmented-control-option", SegmentedControlOption);
-function createKeyboardNavigation() {
-  return {
-    navigateToNextOption(enabledOptions, forward) {
-      const optionsLength = enabledOptions.length;
-      if (optionsLength === 0) {
-        return;
-      }
-      const currentIndex = enabledOptions.findIndex((option) => option === getDeepActiveElement());
-      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$m = '<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$m = document.createElement("template");
 template$m.innerHTML = templateHTML$m;
@@ -14695,25 +14807,26 @@ class Table extends NectaryElement {
   }
 }
 defineCustomElement("sinch-table", Table);
-const templateHTML$6 = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button" tabindex="0"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
+const templateHTML$6 = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}:host([disabled]) #button{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}:host(:hover:not([disabled])) #button{background-color:var(--sinch-comp-tab-color-default-background-hover)}:host(:focus-visible) #button::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block;pointer-events:none}</style><div id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></div>';
 const template$6 = document.createElement("template");
 template$6.innerHTML = templateHTML$6;
 class TabsOption extends NectaryElement {
-  #$button;
   #$text;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({ delegatesFocus: true });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template$6.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector("#button");
     this.#$text = shadowRoot.querySelector("#text");
   }
   connectedCallback() {
     this.setAttribute("role", "tab");
     this.addEventListener("click", this.#onClick);
+    this.addEventListener("keydown", this.#onKeyDown);
+    this.#updateTabIndex();
   }
   disconnectedCallback() {
     this.removeEventListener("click", this.#onClick);
+    this.removeEventListener("keydown", this.#onKeyDown);
   }
   static get observedAttributes() {
     return ["data-checked", "disabled", "text"];
@@ -14733,7 +14846,8 @@ class TabsOption extends NectaryElement {
       }
       case "disabled": {
         const isDisabled = isAttrTrue(newVal);
-        this.#$button.disabled = isDisabled;
+        this.#updateTabIndex();
+        updateExplicitBooleanAttribute(this, "aria-disabled", isDisabled);
         updateBooleanAttribute(this, name, isDisabled);
         break;
       }
@@ -14761,17 +14875,32 @@ class TabsOption extends NectaryElement {
     return true;
   }
   focus() {
-    this.#$button.focus();
+    HTMLElement.prototype.focus.call(this);
   }
   blur() {
-    this.#$button.blur();
+    HTMLElement.prototype.blur.call(this);
+  }
+  #updateTabIndex() {
+    if (this.disabled) {
+      this.tabIndex = -1;
+    }
   }
   #onClick = (e) => {
+    if (this.disabled) {
+      return;
+    }
     e.stopPropagation();
     this.dispatchEvent(
       new CustomEvent("option-change", { bubbles: true, detail: this.value })
     );
   };
+  #onKeyDown = (e) => {
+    if (this.disabled || !isActivationKey(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    this.#onClick(e);
+  };
 }
 defineCustomElement("sinch-tabs-option", TabsOption);
 const templateHTML$5 = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border:1px solid var(--sinch-comp-tag-border);border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';

package/package.json

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

package/tabs/index.js

@@ -2,12 +2,18 @@ import { updateAttribute, getAttribute, getBooleanAttribute, updateBooleanAttrib
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.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}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-comp-tab-color-default-border-initial);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Tabs extends NectaryElement {
   #$slot;
   #controller = null;
+  #enabledOptions = [];
+  #keyboardNav = createKeyboardNavigation();
+  #observer = null;
+  #rovingValue = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -17,14 +23,28 @@ class Tabs extends NectaryElement {
   connectedCallback() {
     this.#controller = new AbortController();
     const { signal } = this.#controller;
+    const options = { signal };
     this.setAttribute("role", "tablist");
-    this.#$slot.addEventListener("option-change", this.#onOptionChange, { signal });
-    this.#$slot.addEventListener("slotchange", this.#onSlotChange, { signal });
-    this.addEventListener("-change", this.#onChangeReactHandler, { signal });
+    this.setAttribute("aria-orientation", "horizontal");
+    this.#$slot.addEventListener("option-change", this.#onOptionChange, options);
+    this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
+    this.#$slot.addEventListener("focusin", this.#onOptionFocusIn, options);
+    this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
+    this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.#observer = new MutationObserver(this.#onOptionMutation);
+    this.#observer.observe(this, {
+      attributes: true,
+      attributeFilter: ["disabled", "value"],
+      childList: true,
+      subtree: true
+    });
+    this.#syncOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
+    this.#observer?.disconnect();
+    this.#observer = null;
   }
   static get observedAttributes() {
     return ["value"];
@@ -50,19 +70,91 @@ class Tabs extends NectaryElement {
     }
     return null;
   }
+  #getOptions() {
+    return this.#$slot.assignedElements();
+  }
+  #updateEnabledOptions(options = this.#getOptions()) {
+    this.#enabledOptions = options.filter((option) => !getBooleanAttribute(option, "disabled"));
+  }
+  #getFocusableOption() {
+    if (this.#enabledOptions.length === 0) {
+      return null;
+    }
+    if (this.#rovingValue !== null) {
+      const rovingOption = this.#enabledOptions.find(
+        (option) => getAttribute(option, "value", "") === this.#rovingValue
+      );
+      if (rovingOption != null) {
+        return rovingOption;
+      }
+    }
+    const selectedOption = this.#enabledOptions.find(
+      (option) => getAttribute(option, "value", "") === this.value
+    );
+    return selectedOption ?? this.#enabledOptions[0];
+  }
+  #syncOptions() {
+    const options = this.#getOptions();
+    this.#updateEnabledOptions(options);
+    const focusableOption = this.#getFocusableOption();
+    this.#rovingValue = focusableOption == null ? null : getAttribute(focusableOption, "value", "");
+    for (const $option of options) {
+      const isDisabled = getBooleanAttribute($option, "disabled");
+      const isChecked = !isDisabled && this.value === getAttribute($option, "value", "");
+      updateBooleanAttribute($option, "data-checked", isChecked);
+      $option.tabIndex = !isDisabled && $option === focusableOption ? 0 : -1;
+    }
+  }
   #onSlotChange = () => {
-    this.#onValueChange(this.value);
+    this.#syncOptions();
   };
   #onOptionChange = (e) => {
     e.stopPropagation();
-    this.#dispatchChangeEvent(e.detail);
+    const value = e.detail;
+    this.#rovingValue = value;
+    this.#dispatchChangeEvent(value);
   };
   #onValueChange(value) {
-    for (const $option of this.#$slot.assignedElements()) {
-      const isChecked = !getBooleanAttribute($option, "disabled") && value === getAttribute($option, "value", "");
-      updateBooleanAttribute($option, "data-checked", isChecked);
-    }
+    this.#rovingValue = value;
+    this.#syncOptions();
   }
+  #onOptionFocusIn = (e) => {
+    const target = getTargetByAttribute(e, "value");
+    if (target === null || getBooleanAttribute(target, "disabled")) {
+      return;
+    }
+    this.#rovingValue = getAttribute(target, "value", "");
+    this.#syncOptions();
+  };
+  #onOptionKeydown = (e) => {
+    switch (e.code) {
+      case "ArrowLeft": {
+        e.preventDefault();
+        this.#keyboardNav.navigateToNextOption(this.#enabledOptions, false);
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        this.#keyboardNav.navigateToNextOption(this.#enabledOptions, true);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        this.#keyboardNav.navigateToOption(this.#enabledOptions, 0);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        this.#keyboardNav.navigateToOption(this.#enabledOptions, this.#enabledOptions.length - 1);
+        break;
+      }
+    }
+  };
+  #onOptionMutation = (mutations) => {
+    if (mutations.some((mutation) => mutation.target !== this)) {
+      this.#syncOptions();
+    }
+  };
   #dispatchChangeEvent(value) {
     this.dispatchEvent(
       new CustomEvent("-change", { detail: value })

package/tabs-icon-option/index.js

@@ -1,24 +1,26 @@
-import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, updateExplicitBooleanAttribute } from "../utils/dom.js";
+import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute, isAttrEqual, updateExplicitBooleanAttribute, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button" tabindex="0"><slot name="icon"></slot></button></sinch-tooltip>';
+import { isActivationKey } from "../utils/control-keyboard-navigation.js";
+const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}:host([disabled]) #button{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}:host(:hover:not([disabled])) #button{background-color:var(--sinch-comp-tab-color-default-background-hover)}:host(:focus-visible) #button::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}::slotted(*){display:block;pointer-events:none}</style><sinch-tooltip id="tooltip"><div id="button"><slot name="icon"></slot></div></sinch-tooltip>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class TabsIconOption extends NectaryElement {
-  #$button;
   #$tooltip;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({ delegatesFocus: true });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector("#button");
     this.#$tooltip = shadowRoot.querySelector("#tooltip");
   }
   connectedCallback() {
     this.setAttribute("role", "tab");
-    this.#$button.addEventListener("click", this.#onClick);
+    this.addEventListener("click", this.#onClick);
+    this.addEventListener("keydown", this.#onKeyDown);
+    this.#updateTabIndex();
   }
   disconnectedCallback() {
-    this.#$button.removeEventListener("click", this.#onClick);
+    this.removeEventListener("click", this.#onClick);
+    this.removeEventListener("keydown", this.#onKeyDown);
   }
   static get observedAttributes() {
     return ["data-checked", "disabled", "aria-label"];
@@ -46,7 +48,8 @@ class TabsIconOption extends NectaryElement {
       }
       case "disabled": {
         const isDisabled = isAttrTrue(newVal);
-        this.#$button.disabled = isDisabled;
+        this.#updateTabIndex();
+        updateExplicitBooleanAttribute(this, "aria-disabled", isDisabled);
         updateBooleanAttribute(this, name, isDisabled);
         break;
       }
@@ -60,17 +63,32 @@ class TabsIconOption extends NectaryElement {
     return true;
   }
   focus() {
-    this.#$button.focus();
+    HTMLElement.prototype.focus.call(this);
   }
   blur() {
-    this.#$button.blur();
+    HTMLElement.prototype.blur.call(this);
+  }
+  #updateTabIndex() {
+    if (this.disabled) {
+      this.tabIndex = -1;
+    }
   }
   #onClick = (e) => {
+    if (this.disabled) {
+      return;
+    }
     e.stopPropagation();
     this.dispatchEvent(
       new CustomEvent("option-change", { bubbles: true, detail: this.value })
     );
   };
+  #onKeyDown = (e) => {
+    if (this.disabled || !isActivationKey(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    this.#onClick(e);
+  };
 }
 defineCustomElement("sinch-tabs-icon-option", TabsIconOption);
 export {

package/tabs-option/index.js

@@ -1,25 +1,27 @@
 import "../text/index.js";
-import { isAttrEqual, isAttrTrue, updateBooleanAttribute, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { isAttrEqual, updateExplicitBooleanAttribute, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button" tabindex="0"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
+import { isActivationKey } from "../utils/control-keyboard-navigation.js";
+const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}:host([disabled]) #button{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}:host(:hover:not([disabled])) #button{background-color:var(--sinch-comp-tab-color-default-background-hover)}:host(:focus-visible) #button::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block;pointer-events:none}</style><div id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class TabsOption extends NectaryElement {
-  #$button;
   #$text;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({ delegatesFocus: true });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector("#button");
     this.#$text = shadowRoot.querySelector("#text");
   }
   connectedCallback() {
     this.setAttribute("role", "tab");
     this.addEventListener("click", this.#onClick);
+    this.addEventListener("keydown", this.#onKeyDown);
+    this.#updateTabIndex();
   }
   disconnectedCallback() {
     this.removeEventListener("click", this.#onClick);
+    this.removeEventListener("keydown", this.#onKeyDown);
   }
   static get observedAttributes() {
     return ["data-checked", "disabled", "text"];
@@ -39,7 +41,8 @@ class TabsOption extends NectaryElement {
       }
       case "disabled": {
         const isDisabled = isAttrTrue(newVal);
-        this.#$button.disabled = isDisabled;
+        this.#updateTabIndex();
+        updateExplicitBooleanAttribute(this, "aria-disabled", isDisabled);
         updateBooleanAttribute(this, name, isDisabled);
         break;
       }
@@ -67,17 +70,32 @@ class TabsOption extends NectaryElement {
     return true;
   }
   focus() {
-    this.#$button.focus();
+    HTMLElement.prototype.focus.call(this);
   }
   blur() {
-    this.#$button.blur();
+    HTMLElement.prototype.blur.call(this);
+  }
+  #updateTabIndex() {
+    if (this.disabled) {
+      this.tabIndex = -1;
+    }
   }
   #onClick = (e) => {
+    if (this.disabled) {
+      return;
+    }
     e.stopPropagation();
     this.dispatchEvent(
       new CustomEvent("option-change", { bubbles: true, detail: this.value })
     );
   };
+  #onKeyDown = (e) => {
+    if (this.disabled || !isActivationKey(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    this.#onClick(e);
+  };
 }
 defineCustomElement("sinch-tabs-option", TabsOption);
 export {

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

@@ -1,3 +1,4 @@
+export declare const isActivationKey: (key: string) => key is " " | "Enter";
 export declare function createKeyboardNavigation(): {
     navigateToNextOption(enabledOptions: Element[], forward: boolean): void;
     navigateToOption(enabledOptions: Element[], index: number): void;

package/utils/control-keyboard-navigation.js

@@ -1,5 +1,6 @@
 import { getDeepActiveElement } from "./dom.js";
 import { getTargetByAttribute } from "./event-target.js";
+const isActivationKey = (key) => key === "Enter" || key === " ";
 function createKeyboardNavigation() {
   return {
     navigateToNextOption(enabledOptions, forward) {
@@ -39,10 +40,14 @@ function createKeyboardNavigation() {
           }
           break;
         }
-        case "ArrowLeft":
+        case "ArrowLeft": {
+          e.preventDefault();
+          this.navigateToNextOption(enabledOptions, false);
+          break;
+        }
         case "ArrowRight": {
           e.preventDefault();
-          this.navigateToNextOption(enabledOptions, e.code === "ArrowRight");
+          this.navigateToNextOption(enabledOptions, true);
           break;
         }
         case "Home": {
@@ -60,5 +65,6 @@ function createKeyboardNavigation() {
   };
 }
 export {
-  createKeyboardNavigation
+  createKeyboardNavigation,
+  isActivationKey
 };

package/utils/index.d.ts

@@ -9,4 +9,5 @@ export * from './debounce';
 export * from './get-react-event-handler';
 export * from './markdown';
 export * from './event-target';
+export { isActivationKey } from './control-keyboard-navigation';
 export * from './uid';

package/utils/index.js

@@ -9,6 +9,7 @@ import { debounceAnimationFrame, debounceTimeout } from "./debounce.js";
 import { getReactEventHandler } from "./get-react-event-handler.js";
 import { isEmojiString, parseMarkdown } from "./markdown.js";
 import { getTargetAttribute, getTargetByAttribute, getTargetIndexInParent, isTargetEqual } from "./event-target.js";
+import { isActivationKey } from "./control-keyboard-navigation.js";
 import { getUid } from "./uid.js";
 export {
   CSV_DELIMITER,
@@ -42,6 +43,7 @@ export {
   getTransformedAncestor,
   getUid,
   hasClass,
+  isActivationKey,
   isAttrEqual,
   isAttrTrue,
   isElementFocused,