@nectary/components 0.40.0 → 0.41.0

package/popover/index.js

@@ -1,77 +1,63 @@
-import dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, Context, getFirstSlotElement, isElementFocused } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}#content{position:relative;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-m);outline:0;overflow:hidden}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog></div>';
-import { orientationValues } from './utils';
+import '../pop';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap } from '../utils';
+import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}#content{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-m);box-shadow:var(--sinch-elevation-level-2);overflow:hidden}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-color-snow-100);stroke:var(--sinch-color-snow-500);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}:host([tip]) #content{box-shadow:none}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-elevation-level-2))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+import { assertOrientation, getPopOrientation, orientationValues } from './utils';
+const TIP_SIZE = 16;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-const POPOVER_OFFSET = 4;
 defineCustomElement('sinch-popover', class extends NectaryElement {
-  #$target;
-  #$dialog;
-  #isConnected;
-  #resizeThrottle;
-  #originalOverflowValue = '';
-  #$targetSlot;
-  #$targetOpenSlot;
-  #$contentSlot;
-  #$targetOpenWrapper;
-  #targetActiveElement = null;
-  #controller = new AbortController();
-  #keydownContext;
-  #visibilityContext;
+  #$pop;
+  #$content;
+  #$tip;
+  #controller = null;
 
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$target = shadowRoot.querySelector('#target');
-    this.#$dialog = shadowRoot.querySelector('#dialog');
-    this.#$targetSlot = shadowRoot.querySelector('slot[name="target"]');
-    this.#$targetOpenSlot = shadowRoot.querySelector('slot[name="target-open"]');
-    this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
-    this.#$targetOpenWrapper = shadowRoot.querySelector('#target-open');
-    this.#isConnected = false;
-    this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
-    this.#keydownContext = new Context(this.#$contentSlot, 'keydown');
-    this.#visibilityContext = new Context(this.#$contentSlot, 'visibility');
-    dialogPolyfill.registerDialog(this.#$dialog);
-
-    dialogPolyfill.dm.handleFocus_ = function () {};
+    this.#$pop = shadowRoot.querySelector('#pop');
+    this.#$content = shadowRoot.querySelector('#content');
+    this.#$tip = shadowRoot.querySelector('#tip');
   }
 
   connectedCallback() {
+    this.#controller = new AbortController();
     const {
       signal
     } = this.#controller;
-    this.setAttribute('role', 'dialog');
-    this.#$dialog.addEventListener('cancel', this.#onCancel, {
+    this.addEventListener('-close', this.#onCloseReactHandler, {
       signal
     });
-    this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, {
+    this.#$pop.addEventListener('-close', this.#onPopClose, {
       signal
     });
-    this.addEventListener('-close', this.#onCloseReactHandler, {
+    this.#$content.addEventListener('-visibility', this.#onContextVisibility, {
       signal
     });
-    this.#isConnected = true;
-    this.#keydownContext.subscribe();
-    this.#visibilityContext.subscribe();
-
-    if (getBooleanAttribute(this, 'open')) {
-      this.#onExpand();
-    }
+    dispatchContextConnectEvent(this.#$content, 'visibility');
+    updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
   }
 
   disconnectedCallback() {
+    dispatchContextDisconnectEvent(this.#$content, 'visibility');
     this.#controller.abort();
-    this.#onCollapse();
-    this.#isConnected = false;
-    this.#keydownContext.unsubscribe();
-    this.#visibilityContext.unsubscribe();
+  }
+
+  #onPopClose = () => {
+    this.#dispatchCloseEvent();
+  };
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'onClose')?.();
+    getReactEventHandler(this, 'on-close')?.(e);
+  };
+
+  #dispatchCloseEvent() {
+    this.dispatchEvent(new CustomEvent('-close'));
   }
 
   static get observedAttributes() {
-    return ['orientation', 'open'];
+    return ['orientation', 'open', 'modal', 'tip'];
   }
 
   set modal(isModal) {
@@ -90,6 +76,14 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     return getBooleanAttribute(this, 'open');
   }
 
+  set tip(hasTip) {
+    updateBooleanAttribute(this, 'tip', hasTip);
+  }
+
+  get tip() {
+    return getBooleanAttribute(this, 'tip');
+  }
+
   get orientation() {
     return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-left');
   }
@@ -98,8 +92,12 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
 
+  get footprintRect() {
+    return this.#$pop.footprintRect;
+  }
+
   get popoverRect() {
-    return getRect(this.#$dialog);
+    return this.#$pop.popoverRect;
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -108,216 +106,79 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     }
 
     switch (name) {
-      case 'open':
+      case 'orientation':
         {
-          if (isAttrTrue(newVal)) {
-            requestAnimationFrame(() => {
-              this.#onExpand();
-            });
-          } else {
-            this.#onCollapse();
+          assertOrientation(newVal);
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(newVal));
+
+          if (this.#isOpen()) {
+            this.#updateTipOrientation();
           }
 
-          updateBooleanAttribute(this, 'open', isAttrTrue(newVal));
           break;
         }
 
-      case 'orientation':
+      case 'tip':
         {
-          if (this.#isOpen()) {
-            this.#updateOrientation();
+          updateBooleanAttribute(this, 'tip', isAttrTrue(newVal));
+
+          if (newVal === '' && this.#isOpen()) {
+            this.#updateTipOrientation();
           }
 
           break;
         }
-    }
-  }
-
-  #onExpand() {
-    if (!this.#isConnected || this.#isOpen()) {
-      return;
-    }
 
-    const isNonModal = !this.modal;
-    this.#$targetSlot.addEventListener('blur', this.#captureActiveElement, true);
-
-    if (isNonModal) {
-      this.#$targetOpenSlot.addEventListener('blur', this.#captureActiveElement, true);
-      this.#$targetOpenSlot.addEventListener('focus', this.#stopPropagation, true);
-      const targetRect = this.#$target.getBoundingClientRect();
-      const widthPx = `${targetRect.width}px`;
-      const heightPx = `${targetRect.height}px`;
-      this.#$target.style.width = widthPx;
-      this.#$target.style.height = heightPx;
-      this.#$targetOpenWrapper.style.width = widthPx;
-      this.#$targetOpenWrapper.style.height = heightPx;
-      getFirstSlotElement(this.#$targetSlot)?.setAttribute('slot', 'target-open');
-      this.#$targetOpenSlot.addEventListener('keydown', this.#onTargetKeydown);
-    }
+      case 'open':
+        {
+          const isOpen = isAttrTrue(newVal);
+          updateBooleanAttribute(this.#$pop, name, isOpen);
+          updateBooleanAttribute(this, name, isOpen);
+          break;
+        }
 
-    this.#$dialog.showModal();
-    this.#updateOrientation();
-    this.#$target.setAttribute('aria-expanded', 'true');
-    this.#$targetSlot.removeEventListener('blur', this.#captureActiveElement, true);
-
-    if (isNonModal) {
-      this.#$targetOpenSlot.removeEventListener('blur', this.#captureActiveElement, true);
-      this.#$targetOpenSlot.removeEventListener('focus', this.#stopPropagation, true);
-
-      if (this.#targetActiveElement !== null) {
-        if (!isElementFocused(this.#targetActiveElement)) {
-          requestAnimationFrame(() => {
-            this.#$targetOpenSlot.addEventListener('focus', this.#stopPropagation, true);
-            this.#targetActiveElement?.focus();
-            this.#$targetOpenSlot.removeEventListener('focus', this.#stopPropagation, true);
-          });
+      default:
+        {
+          updateAttribute(this.#$pop, name, newVal);
         }
-      }
-    } else {
-      if (document.activeElement === document.body) {
-        getFirstSlotElement(this.#$contentSlot)?.focus();
-      }
     }
-
-    this.#originalOverflowValue = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    window.addEventListener('resize', this.#onResize);
-    this.#dispatchContentVisibility(true);
   }
 
-  #onCollapse() {
-    if (!this.#isOpen()) {
-      return;
-    }
-
-    this.#dispatchContentVisibility(false);
-    this.#$targetSlot.addEventListener('focus', this.#stopPropagation, true);
-    getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute('slot', 'target');
-    this.#$target.style.width = 'unset';
-    this.#$target.style.height = 'unset';
-    this.#$dialog.close();
-    this.#$target.setAttribute('aria-expanded', 'false');
-
-    if (this.#targetActiveElement !== null) {
-      if (!isElementFocused(this.#targetActiveElement)) {
-        requestAnimationFrame(() => {
-          this.#$targetSlot.addEventListener('focus', this.#stopPropagation, true);
-          this.#targetActiveElement.focus();
-          this.#targetActiveElement = null;
-          this.#$targetSlot.removeEventListener('focus', this.#stopPropagation, true);
-        });
-      } else {
-        this.#targetActiveElement = null;
-      }
+  #onContextVisibility = e => {
+    if (e.detail) {
+      this.#updateTipOrientation();
+    } else {
+      this.#resetTipOrientation();
     }
-
-    this.#$targetSlot.removeEventListener('focus', this.#stopPropagation, true);
-    this.#$targetOpenSlot.removeEventListener('keydown', this.#onTargetKeydown);
-    document.body.style.overflow = this.#originalOverflowValue;
-    this.#resizeThrottle.cancel();
-    window.removeEventListener('resize', this.#onResize);
-  }
-
-  #isOpen() {
-    return getBooleanAttribute(this.#$dialog, 'open');
-  }
-
-  #onResize = () => {
-    this.#resizeThrottle.fn();
   };
-  #updateOrientation = () => {
-    this.#$dialog.style.width = 'max-content';
-    const targetRect = this.#$target.getBoundingClientRect();
-    const modalRect = this.#$dialog.getBoundingClientRect();
-    let leftPos = 0;
-    let topPos = 0;
-    const orient = this.orientation;
-    const shouldSetWidthToTarget = orient === 'top' || orient === 'bottom';
-    const resultWidth = shouldSetWidthToTarget ? targetRect.width : modalRect.width;
-
-    if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top' || orient === 'bottom') {
-      leftPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.x, window.innerWidth - resultWidth - POPOVER_OFFSET));
-    }
-
-    if (orient === 'bottom-left' || orient === 'top-left') {
-      leftPos = Math.max(POPOVER_OFFSET, targetRect.right - resultWidth);
-    }
-
-    if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
-      topPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.bottom + POPOVER_OFFSET, window.innerHeight - modalRect.height - POPOVER_OFFSET));
-    }
 
-    if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
-      topPos = Math.max(POPOVER_OFFSET, targetRect.top - POPOVER_OFFSET - modalRect.height);
-    }
+  #resetTipOrientation() {
+    this.#$tip.style.top = '';
+    this.#$tip.style.left = '';
+  }
 
-    this.#$dialog.style.left = `${leftPos}px`;
-    this.#$dialog.style.top = `${topPos}px`;
-    this.#$dialog.style.width = `${resultWidth}px`;
+  #updateTipOrientation = () => {
+    const orientation = this.orientation;
+    const targetRect = this.#$pop.footprintRect;
+    const contentRect = this.#$content.getBoundingClientRect();
+    const diffX = targetRect.x - contentRect.x;
+    let desiredX = diffX + targetRect.width / 2;
 
-    if (!this.modal) {
-      const targetLeftPos = targetRect.left - leftPos;
-      const targetTopPos = targetRect.top - topPos;
-      this.#$targetOpenWrapper.style.left = `${targetLeftPos}px`;
-      this.#$targetOpenWrapper.style.top = `${targetTopPos}px`;
-    }
-  };
-  #onBackdropMouseDown = e => {
-    if (e.target !== this.#$dialog) {
-      return;
+    if (orientation === 'bottom-left' || orientation === 'top-left') {
+      desiredX = Math.max(desiredX, contentRect.width * 0.75);
     }
 
-    const rect = this.popoverRect;
-    const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
-
-    if (!isInside) {
-      this.#dispatchCloseEvent();
+    if (orientation === 'bottom-right' || orientation === 'top-right') {
+      desiredX = Math.min(desiredX, contentRect.width * 0.25);
     }
-  };
-  #onCancel = e => {
-    e.preventDefault();
-    this.#dispatchCloseEvent();
-  };
-  #onCloseReactHandler = e => {
-    getReactEventHandler(this, 'onClose')?.();
-    getReactEventHandler(this, 'on-close')?.(e);
-  };
-
-  #dispatchCloseEvent() {
-    this.dispatchEvent(new CustomEvent('-close'));
-  }
 
-  #captureActiveElement = e => {
-    e.stopPropagation();
-    this.#targetActiveElement = e.target;
-  };
-  #stopPropagation = e => {
-    e.stopPropagation();
+    const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
+    this.#$tip.style.left = `${xPos}px`;
+    setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
 
-  #dispatchContentVisibility(isVisible) {
-    for (const $el of this.#visibilityContext.elements) {
-      $el.dispatchEvent(new CustomEvent('-visibility', {
-        detail: isVisible
-      }));
-    }
+  #isOpen() {
+    return this.#$pop.open;
   }
 
-  #onTargetKeydown = e => {
-    for (const $el of this.#keydownContext.elements) {
-      let isPrevented = false;
-      $el.dispatchEvent(new CustomEvent('-keydown', {
-        detail: {
-          code: e.code,
-          preventDefault: () => {
-            isPrevented = true;
-          }
-        }
-      }));
-
-      if (isPrevented) {
-        e.preventDefault();
-      }
-    }
-  };
 });

package/popover/types.d.ts

@@ -7,6 +7,9 @@ export declare type TSinchPopoverElement = HTMLElement & {
     orientation: TSinchPopoverOrientation;
     /** Modal/non-modal mode */
     modal: boolean;
+    /** Show tip */
+    tip: boolean;
+    readonly footprintRect: TRect;
     readonly popoverRect: TRect;
     /** Close event */
     addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
@@ -15,7 +18,9 @@ export declare type TSinchPopoverElement = HTMLElement & {
     /** Orientation, where it *points to* from origin */
     setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
     /** Modal/non-modal mode */
-    setAttribute(name: 'modal', value: boolean): void;
+    setAttribute(name: 'modal', value: ''): void;
+    /** Show tip */
+    setAttribute(name: 'tip', value: ''): void;
 };
 export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
     /** Open/close state */
@@ -24,6 +29,8 @@ export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement
     orientation?: TSinchPopoverOrientation;
     /** Modal/non-modal mode */
     modal?: boolean;
+    /** Show tip */
+    tip?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
     /** Close event handler */

package/popover/utils.d.ts

@@ -1,2 +1,7 @@
+import type { TSinchPopOrientation } from '../pop/types';
 import type { TSinchPopoverOrientation } from './types';
 export declare const orientationValues: readonly TSinchPopoverOrientation[];
+export declare const getPopOrientation: (orientation: TSinchPopoverOrientation) => TSinchPopOrientation;
+declare type TAssertOrientation = (value: string | null) => asserts value is TSinchPopoverOrientation;
+export declare const assertOrientation: TAssertOrientation;
+export {};

package/popover/utils.js

@@ -1 +1,17 @@
-export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom', 'top'];
+export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom', 'top'];
+export const getPopOrientation = orientation => {
+  if (orientation === 'top') {
+    return 'top-stretch';
+  }
+
+  if (orientation === 'bottom') {
+    return 'bottom-stretch';
+  }
+
+  return orientation;
+};
+export const assertOrientation = value => {
+  if (value === null || !orientationValues.includes(value)) {
+    throw new Error(`sinch-popover: invalid orientation attribute: ${value}`);
+  }
+};

package/radio-option/index.js

@@ -90,6 +90,10 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
     }
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$input.focus();
   }

package/segment-collapse/index.js

@@ -56,6 +56,10 @@ defineCustomElement('sinch-segment-collapse', class extends NectaryElement {
     return getBooleanAttribute(this, 'value');
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$button.focus();
   }

package/segmented-control-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;position:relative;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:0;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-3px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-aqua-400);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="button" id="content"></label><button id="button"></button></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;position:relative;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:0;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-3px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-border-focus);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="button" id="content"></label><button id="button"></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-control-option', class extends NectaryElement {
@@ -85,6 +85,10 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
     }
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$button.focus();
   }

package/segmented-icon-control-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-aqua-400);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-border-focus);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-icon-control-option', class extends NectaryElement {
@@ -65,6 +65,10 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
     }
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$button.focus();
   }

package/select-button/index.js

@@ -7,7 +7,7 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-button', class extends NectaryElement {
   #$button;
   #$text;
-  #controller = new AbortController();
+  #controller = null;
 
   constructor() {
     super();
@@ -18,6 +18,7 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   }
 
   connectedCallback() {
+    this.#controller = new AbortController();
     const {
       signal
     } = this.#controller;
@@ -124,6 +125,10 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
     }
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$button.focus();
   }

package/select-menu/index.js

@@ -1,4 +1,5 @@
 import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
@@ -6,7 +7,7 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #$optionSlot;
   #$listbox;
-  #controller = new AbortController();
+  #controller = null;
 
   constructor() {
     super();
@@ -17,6 +18,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   }
 
   connectedCallback() {
+    this.#controller = new AbortController();
     const {
       signal
     } = this.#controller;
@@ -46,22 +48,14 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.addEventListener('-visibility', this.#onContextVisibility, {
       signal
     });
-    this.dispatchEvent(new CustomEvent('-context-connect-keydown', {
-      bubbles: true
-    }));
-    this.dispatchEvent(new CustomEvent('-context-connect-visibility', {
-      bubbles: true
-    }));
+    dispatchContextConnectEvent(this, 'keydown');
+    dispatchContextConnectEvent(this, 'visibility');
   }
 
   disconnectedCallback() {
+    dispatchContextDisconnectEvent(this, 'keydown');
+    dispatchContextDisconnectEvent(this, 'visibility');
     this.#controller.abort();
-    this.dispatchEvent(new CustomEvent('-context-disconnect-keydown', {
-      bubbles: true
-    }));
-    this.dispatchEvent(new CustomEvent('-context-disconnect-visibility', {
-      bubbles: true
-    }));
   }
 
   static get observedAttributes() {
@@ -343,4 +337,9 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
+
+  get focusable() {
+    return true;
+  }
+
 });

package/tabs-option/index.js

@@ -83,6 +83,10 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
     }
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$button.focus();
   }