@nectary/components 5.37.7 → 5.38.0

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) => {
@@ -7857,13 +8028,14 @@ class EmojiPicker extends NectaryElement {
   }
 }
 defineCustomElement("sinch-emoji-picker", EmojiPicker);
-const templateHTML$M = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const templateHTML$M = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#optional:empty{display:none}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><sinch-tooltip id="optional-tooltip" allow-scroll><span id="optional"></span></sinch-tooltip></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template$M = document.createElement("template");
 template$M.innerHTML = templateHTML$M;
 class Field extends NectaryElement {
   topSection;
   #$label;
   #$optionalText;
+  #$optionalTooltip;
   #$additionalText;
   #$invalidText;
   #$inputSlot;
@@ -7877,6 +8049,7 @@ class Field extends NectaryElement {
     this.topSection = shadowRoot.querySelector("#top");
     this.#$label = shadowRoot.querySelector("#label");
     this.#$optionalText = shadowRoot.querySelector("#optional");
+    this.#$optionalTooltip = shadowRoot.querySelector("#optional-tooltip");
     this.#$additionalText = shadowRoot.querySelector("#additional");
     this.#$invalidText = shadowRoot.querySelector("#invalid");
     this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
@@ -7900,6 +8073,7 @@ class Field extends NectaryElement {
     return [
       "label",
       "optionaltext",
+      "optionaltooltip",
       "additionaltext",
       "invalidtext",
       "disabled"
@@ -7920,6 +8094,10 @@ class Field extends NectaryElement {
         this.#$optionalText.textContent = newVal;
         break;
       }
+      case "optionaltooltip": {
+        updateAttribute(this.#$optionalTooltip, "text", newVal);
+        break;
+      }
       case "additionaltext": {
         this.#$additionalText.textContent = newVal;
         break;
@@ -7950,6 +8128,12 @@ class Field extends NectaryElement {
   get optionalText() {
     return getAttribute(this, "optionaltext");
   }
+  set optionalTooltip(value) {
+    updateAttribute(this, "optionaltooltip", value);
+  }
+  get optionalTooltip() {
+    return getAttribute(this, "optionaltooltip");
+  }
   set additionalText(value) {
     updateAttribute(this, "additionaltext", value);
   }
@@ -13058,65 +13242,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 +14820,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 +14859,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 +14888,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/field/index.d.ts

@@ -1,3 +1,4 @@
+import '../tooltip';
 import { NectaryElement } from '../utils';
 export * from './types';
 export declare class Field extends NectaryElement {
@@ -13,6 +14,8 @@ export declare class Field extends NectaryElement {
     get label(): string | null;
     set optionalText(value: string | null);
     get optionalText(): string | null;
+    set optionalTooltip(value: string | null);
+    get optionalTooltip(): string | null;
     set additionalText(value: string | null);
     get additionalText(): string | null;
     set invalidText(value: string | null);

package/field/index.js

@@ -1,13 +1,15 @@
+import "../tooltip/index.js";
 import { getAttribute, setClass, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getFirstSlotElement } from "../utils/slot.js";
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#optional:empty{display:none}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><sinch-tooltip id="optional-tooltip" allow-scroll><span id="optional"></span></sinch-tooltip></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Field extends NectaryElement {
   topSection;
   #$label;
   #$optionalText;
+  #$optionalTooltip;
   #$additionalText;
   #$invalidText;
   #$inputSlot;
@@ -21,6 +23,7 @@ class Field extends NectaryElement {
     this.topSection = shadowRoot.querySelector("#top");
     this.#$label = shadowRoot.querySelector("#label");
     this.#$optionalText = shadowRoot.querySelector("#optional");
+    this.#$optionalTooltip = shadowRoot.querySelector("#optional-tooltip");
     this.#$additionalText = shadowRoot.querySelector("#additional");
     this.#$invalidText = shadowRoot.querySelector("#invalid");
     this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
@@ -44,6 +47,7 @@ class Field extends NectaryElement {
     return [
       "label",
       "optionaltext",
+      "optionaltooltip",
       "additionaltext",
       "invalidtext",
       "disabled"
@@ -64,6 +68,10 @@ class Field extends NectaryElement {
         this.#$optionalText.textContent = newVal;
         break;
       }
+      case "optionaltooltip": {
+        updateAttribute(this.#$optionalTooltip, "text", newVal);
+        break;
+      }
       case "additionaltext": {
         this.#$additionalText.textContent = newVal;
         break;
@@ -94,6 +102,12 @@ class Field extends NectaryElement {
   get optionalText() {
     return getAttribute(this, "optionaltext");
   }
+  set optionalTooltip(value) {
+    updateAttribute(this, "optionaltooltip", value);
+  }
+  get optionalTooltip() {
+    return getAttribute(this, "optionaltooltip");
+  }
   set additionalText(value) {
     updateAttribute(this, "additionaltext", value);
   }

package/field/types.d.ts

@@ -4,6 +4,8 @@ export type TSinchFieldProps = {
     label?: string;
     /** Optional text */
     optionalText?: string;
+    /** Tooltip text for optional text */
+    optionalTooltip?: string;
     /** Additional text */
     additionalText?: string;
     /** Invalid text, controls the overall invalid state of the text field */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.37.7",
+  "version": "5.38.0",
   "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,