@nectary/components 0.40.0 → 0.41.1

package/date-picker/index.js

@@ -7,7 +7,7 @@ import '../icons/delete-outline';
 import '../icons/today';
 import '../text';
 import { defineCustomElement, getAttribute, getReactEventHandler, getRect, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" small><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" small><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" small><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" small><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" small><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" small><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" small><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" small><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
 import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/field/index.js

@@ -1,5 +1,5 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) #top{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);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]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) #top{--sinch-color-icon:var(--sinch-color-stormy-100)}</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 template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-field', class extends NectaryElement {
@@ -8,6 +8,9 @@ defineCustomElement('sinch-field', class extends NectaryElement {
   #$additionalText;
   #$invalidText;
   #$inputSlot;
+  #$tooltipWrapper;
+  #$tooltipSlot;
+  #controller = null;
 
   constructor() {
     super();
@@ -18,14 +21,25 @@ defineCustomElement('sinch-field', class extends NectaryElement {
     this.#$additionalText = shadowRoot.querySelector('#additional');
     this.#$invalidText = shadowRoot.querySelector('#invalid');
     this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
+    this.#$tooltipSlot = shadowRoot.querySelector('slot[name="tooltip"]');
+    this.#$tooltipWrapper = shadowRoot.querySelector('#tooltip');
   }
 
   connectedCallback() {
-    this.#$label.addEventListener('click', this.#onLabelClick);
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.#$label.addEventListener('click', this.#onLabelClick, {
+      signal
+    });
+    this.#$tooltipSlot.addEventListener('slotchange', this.#onTooltipSlotChange, {
+      signal
+    });
   }
 
   disconnectedCallback() {
-    this.#$label.removeEventListener('click', this.#onLabelClick);
+    this.#controller.abort();
   }
 
   static get observedAttributes() {
@@ -101,6 +115,9 @@ defineCustomElement('sinch-field', class extends NectaryElement {
   }
 
   #onLabelClick = () => {
-    this.#$inputSlot.assignedElements()[0]?.focus?.();
+    getFirstSlotElement(this.#$inputSlot)?.focus?.();
+  };
+  #onTooltipSlotChange = () => {
+    setClass(this.#$tooltipWrapper, 'empty', this.#$tooltipSlot.assignedElements().length === 0);
   };
 });

package/file-drop/index.js

@@ -1,7 +1,7 @@
 import '../text';
 import '../file-picker';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-shape-radius-m);background-color:var(--sinch-color-bg-primary-contrast)}#wrapper.drop.valid{background-color:var(--sinch-color-bg-comp-blue)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-color-stormy-100);border-radius:var(--sinch-shape-radius-m);pointer-events:none}#placeholder{align-self:center;text-align:center}:host([invalid]) #wrapper::after{border-color:var(--sinch-color-text-invalid);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid::after{border-color:var(--sinch-color-aqua-400);border-width:2px}#wrapper.drop #placeholder{color:var(--sinch-color-text-muted)}:host([disabled]) #wrapper #placeholder{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{background-color:var(--sinch-color-snow-100)}:host([disabled]) #wrapper::after{border-color:var(--sinch-color-stormy-100);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-shape-radius-m);background-color:var(--sinch-color-bg-primary-contrast)}#wrapper.drop.valid{background-color:var(--sinch-color-bg-comp-blue)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-color-stormy-100);border-radius:var(--sinch-shape-radius-m);pointer-events:none}#placeholder{align-self:center;text-align:center}:host([invalid]) #wrapper::after{border-color:var(--sinch-color-text-invalid);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid::after{border-color:var(--sinch-color-border-focus);border-width:2px}#wrapper.drop #placeholder{color:var(--sinch-color-text-muted)}:host([disabled]) #wrapper #placeholder{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{background-color:var(--sinch-color-snow-100)}:host([disabled]) #wrapper::after{border-color:var(--sinch-color-stormy-100);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
 import { areFilesAccepted, doFilesSatisfySize } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/file-picker/index.js

@@ -84,7 +84,7 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
 
   #onTargetSlotChange = () => {
     this.#$target?.removeEventListener('-click', this.#onTargetClick);
-    this.#$target = getFirstSlotElement(this.#$targetSlot);
+    this.#$target = getFirstSlotElement(this.#$targetSlot, true);
     this.#$target?.addEventListener('-click', this.#onTargetClick);
   };
   #onTargetClick = () => {

package/help-tooltip/index.js

@@ -1,15 +1,17 @@
 import '../tooltip';
 import '../icons/help-outline';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;--sinch-size-icon:18px}sinch-tooltip{display:block}</style><sinch-tooltip><sinch-icon-help-outline></sinch-icon-help-outline></sinch-tooltip>';
+const templateHTML = '<style>:host{display:contents}#icon{--sinch-size-icon:18px}</style><sinch-tooltip><sinch-icon-help-outline id="icon"></sinch-icon-help-outline></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
+  #$tooltip;
+
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$tooltip = shadowRoot.querySelector('sinch-tooltip');
+    this.#$tooltip = shadowRoot.querySelector('sinch-tooltip');
   }
 
   static get observedAttributes() {
@@ -48,35 +50,16 @@ defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
     updateAttribute(this, 'orientation', value);
   }
 
+  get footprintRect() {
+    return this.#$tooltip.footprintRect;
+  }
+
   get tooltipRect() {
-    return this.$tooltip.tooltipRect;
+    return this.#$tooltip.tooltipRect;
   }
 
   attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          updateAttribute(this.$tooltip, 'text', newVal);
-          break;
-        }
-
-      case 'width':
-        {
-          updateAttribute(this.$tooltip, 'width', newVal);
-          break;
-        }
-
-      case 'inverted':
-        {
-          updateAttribute(this.$tooltip, 'inverted', newVal);
-          break;
-        }
-
-      case 'orientation':
-        {
-          updateAttribute(this.$tooltip, 'orientation', newVal);
-        }
-    }
+    updateAttribute(this.#$tooltip, name, newVal);
   }
 
 });

package/icon-button/index.d.ts

@@ -1,3 +1,4 @@
+import '../tooltip';
 import type { TSinchIconButtonElement, TSinchIconButtonReact } from './types';
 declare global {
     namespace JSX {

package/icon-button/index.js

@@ -1,34 +1,37 @@
+import '../tooltip';
 import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:#f1f2f4}button:enabled:active::before{background-color:#e3e6e8}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:#f1f2f4}button:enabled:active::before{background-color:#e3e6e8}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false])) #button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</style><sinch-tooltip id="tooltip"><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', class extends NectaryElement {
   #$button;
+  #$tooltip;
+  #controller = null;
 
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector('button');
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
   }
 
   connectedCallback() {
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
     this.setAttribute('role', 'button');
-    this.#$button.addEventListener('click', this.#onButtonClick);
-    this.#$button.addEventListener('focus', this.#onButtonFocus);
-    this.#$button.addEventListener('blur', this.#onButtonBlur);
-    this.addEventListener('-click', this.#onClickReactHandler);
-    this.addEventListener('-focus', this.#onFocusReactHandler);
-    this.addEventListener('-blur', this.#onBlurReactHandler);
+    this.#$button.addEventListener('click', this.#onButtonClick, options);
+    this.#$button.addEventListener('focus', this.#onButtonFocus, options);
+    this.#$button.addEventListener('blur', this.#onButtonBlur, options);
+    this.addEventListener('-click', this.#onClickReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
   }
 
   disconnectedCallback() {
-    this.#$button.removeEventListener('click', this.#onButtonClick);
-    this.#$button.removeEventListener('focus', this.#onButtonFocus);
-    this.#$button.removeEventListener('blur', this.#onButtonBlur);
-    this.removeEventListener('-click', this.#onClickReactHandler);
-    this.removeEventListener('-focus', this.#onFocusReactHandler);
-    this.removeEventListener('-blur', this.#onBlurReactHandler);
+    this.#controller.abort();
   }
 
   static get observedAttributes() {
@@ -47,7 +50,7 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
 
       case 'aria-label':
         {
-          updateAttribute(this, 'title', newVal);
+          updateAttribute(this.#$tooltip, 'text', newVal);
           break;
         }
     }
@@ -69,6 +72,14 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     return getBooleanAttribute(this, 'small');
   }
 
+  get tooltipRect() {
+    return this.#$tooltip.tooltipRect;
+  }
+
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$button.focus();
   }

package/icon-button/types.d.ts

@@ -1,18 +1,32 @@
-import type { TSinchElementReact } from '../types';
+import type { TRect, TSinchElementReact } from '../types';
 export declare type TSinchIconButtonElement = HTMLElement & {
+    /** Disabled */
     disabled: boolean;
+    /** Small */
     small: boolean;
+    readonly tooltipRect: TRect;
+    /** Click event */
     addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Small */
     setAttribute(name: 'small', value: ''): void;
 };
 export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
-    'aria-label': string;
+    /** Disabled */
     disabled?: boolean;
+    /** Small */
     small?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Click event handler */
     'on-click'?: (e: CustomEvent<void>) => void;
+    /** Focus event handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur event handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/input/index.js

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

package/link/index.js

@@ -1,7 +1,7 @@
 import '../icons/open-in-new';
 import '../icons/arrow-forward';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-aqua-400);outline-offset:2px}@supports not selector(:focus-visible){a:focus{outline:2px solid var(--sinch-color-aqua-400);outline-offset:2px}}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px;margin-left:8px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-border-focus);outline-offset:2px}@supports not selector(:focus-visible){a:focus{outline:2px solid var(--sinch-color-border-focus);outline-offset:2px}}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px;margin-left:8px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', class extends NectaryElement {
@@ -113,6 +113,10 @@ defineCustomElement('sinch-link', class extends NectaryElement {
     }
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$anchor.focus();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.40.0",
+  "version": "0.41.1",
   "files": [
     "theme.css",
     "**/*/*.js",

package/pagination/index.js

@@ -166,6 +166,10 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     getReactEventHandler(this, 'on-change')?.(e);
   };
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$left.focus();
   }

package/pop/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchPopElement, TSinchPopReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-pop': TSinchPopReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-pop': TSinchPopElement;
+    }
+}