@nectary/components 0.23.0 → 0.24.0

package/dropdown/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import dialogPolyfill from 'dialog-polyfill';
 import { isDropdownOptionElement } from '../dropdown-option';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, getRect, isAttrTrue, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}dialog{outline:0;border:none;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto;contain:content;padding:0;border-radius:4px;cursor:pointer}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}::slotted(*){display:block}</style><div id="wrapper"><div id="target" aria-haspopup="listbox" aria-expanded="false"><slot name="target"></slot></div><dialog id="listbox" tabindex="-1"><slot name="option"></slot></dialog></div>';
 const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const ITEM_HEIGHT = 40;
@@ -30,7 +30,7 @@ const findSelectedOption = elements => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _isConnected = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _dispatchCloseEvent = new WeakSet(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _isConnected = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _dispatchCloseEvent = new WeakSet(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -173,10 +173,7 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$target, shadowRoot.querySelector('#target'));
@@ -470,7 +467,7 @@ function _getEnabledOptionElements2() {
 }
 
 function _dispatchChangeEvent2($opt) {
-  if ($opt != null && this.value !== $opt.value) {
+  if ($opt != null) {
     this.dispatchEvent(new CustomEvent('change', {
       detail: $opt.value,
       bubbles: true

package/dropdown-option/index.d.ts

@@ -1,5 +1,6 @@
+import { NectaryElement } from '../utils';
 import type { TSinchElementReact } from '../types';
-export declare class DropdownOption extends HTMLElement {
+export declare class DropdownOption extends NectaryElement {
     #private;
     constructor();
     connectedCallback(): void;

package/dropdown-option/index.js

@@ -5,8 +5,8 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:6px 12px;width:100%;align-items:center;gap:12px;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:12px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}:host()>*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:6px 12px;width:100%;align-items:center;gap:12px;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:12px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 
@@ -14,7 +14,7 @@ var _$iconSlot = new WeakMap();
 
 var _$content = new WeakMap();
 
-export class DropdownOption extends HTMLElement {
+export class DropdownOption extends NectaryElement {
   constructor() {
     super();
 
@@ -28,9 +28,7 @@ export class DropdownOption extends HTMLElement {
       value: void 0
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$iconSlot, shadowRoot.querySelector('slot'));

package/grid/index.js

@@ -1,14 +1,12 @@
-import { defineCustomElement } from '../utils';
+import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{--sinch-grid-gutter:24px;--sinch-grid-margin:32px;--sinch-grid-num-columns:12;display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),minmax(0,1fr));grid-column-gap:var(--sinch-grid-gutter);grid-row-gap:var(--sinch-grid-gutter);padding:var(--sinch-grid-margin)}@media only screen and (max-width:1439px){:host{--sinch-grid-gutter:24px;--sinch-grid-margin:24px;--sinch-grid-num-columns:12}}@media only screen and (max-width:1023px){:host{--sinch-grid-gutter:24px;--sinch-grid-margin:24px;--sinch-grid-num-columns:8}}@media only screen and (max-width:767px){:host{--sinch-grid-gutter:16px;--sinch-grid-margin:16px;--sinch-grid-num-columns:4}}</style><slot name="item"></slot>';
 import '../grid-item';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-grid', class extends HTMLElement {
+defineCustomElement('sinch-grid', class extends NectaryElement {
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 

package/grid-item/index.js

@@ -1,13 +1,11 @@
-import { defineCustomElement, getIntegerAttribute, updateIntegerAttribute } from '../utils';
+import { defineCustomElement, getIntegerAttribute, NectaryElement, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;grid-column:span 12}:host([xl="2"]){grid-column:span 2}:host([xl="3"]){grid-column:span 3}:host([xl="4"]){grid-column:span 4}:host([xl="5"]){grid-column:span 5}:host([xl="6"]){grid-column:span 6}:host([xl="7"]){grid-column:span 7}:host([xl="8"]){grid-column:span 8}:host([xl="9"]){grid-column:span 9}:host([xl="10"]){grid-column:span 10}:host([xl="11"]){grid-column:span 11}:host([xl="12"]){grid-column:span 12}@media only screen and (max-width:1439px){:host{grid-column:span 12}:host([l="2"]){grid-column:span 2}:host([l="3"]){grid-column:span 3}:host([l="4"]){grid-column:span 4}:host([l="5"]){grid-column:span 5}:host([l="6"]){grid-column:span 6}:host([l="7"]){grid-column:span 7}:host([l="8"]){grid-column:span 8}:host([l="9"]){grid-column:span 9}:host([l="10"]){grid-column:span 10}:host([l="11"]){grid-column:span 11}:host([l="12"]){grid-column:span 12}}@media only screen and (max-width:1023px){:host{grid-column:span 8}:host([m="2"]){grid-column:span 2}:host([m="3"]){grid-column:span 3}:host([m="4"]){grid-column:span 4}:host([m="5"]){grid-column:span 5}:host([m="6"]){grid-column:span 6}:host([m="7"]){grid-column:span 7}:host([m="8"]){grid-column:span 8}}@media only screen and (max-width:767px){:host{grid-column:span 4}:host([s="2"]){grid-column:span 2}:host([s="3"]){grid-column:span 3}:host([s="4"]){grid-column:span 4}}</style><slot name="content"></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-grid-item', class extends HTMLElement {
+defineCustomElement('sinch-grid-item', class extends NectaryElement {
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 

package/help-tooltip/index.js

@@ -1,15 +1,13 @@
 import '../tooltip';
 import '../icons/help-outline';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+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 template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-help-tooltip', class extends HTMLElement {
+defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.$tooltip = shadowRoot.querySelector('sinch-tooltip');
   }

package/icon-button/index.js

@@ -7,11 +7,11 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getBooleanAttribute, isAttrTrue, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getBooleanAttribute, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:4px;background-color:transparent;box-shadow:0 0 0 1px transparent inset;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500))}button:focus{box-shadow:0 0 0 1px var(--sinch-color-stormy-500) inset}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}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}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -20,10 +20,7 @@ defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extend
       value: void 0
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));

package/icons/create-icon-class.d.ts

@@ -2,6 +2,7 @@ export declare const createIconClass: (templateHTML: string) => {
     new (): {
         $svg: SVGElement;
         connectedCallback(): void;
+        attachShadow(): ShadowRoot;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -48,7 +49,6 @@ export declare const createIconClass: (templateHTML: string) => {
         readonly shadowRoot: ShadowRoot | null;
         slot: string;
         readonly tagName: string;
-        attachShadow(init: ShadowRootInit): ShadowRoot;
         closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<E extends Element = Element>(selectors: string): E | null;

package/icons/create-icon-class.js

@@ -1,14 +1,12 @@
-import { updateAttribute } from '../utils';
+import { NectaryElement, updateAttribute } from '../utils';
 const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;fill:var(--sinch-color-icon,--sinch-color-text-default);height:var(--sinch-size-icon,24px)}</style>';
 export const createIconClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = iconStylesHtml + templateHTML;
-  return class extends HTMLElement {
+  return class extends NectaryElement {
     constructor() {
       super();
-      const shadowRoot = this.attachShadow({
-        mode: 'closed'
-      });
+      const shadowRoot = this.attachShadow();
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }

package/icons-branded/create-icon-class.d.ts

@@ -5,6 +5,7 @@ export declare const createIconClass: (templateHTML: string) => {
         inverted: boolean;
         connectedCallback(): void;
         attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+        attachShadow(): ShadowRoot;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -51,7 +52,6 @@ export declare const createIconClass: (templateHTML: string) => {
         readonly shadowRoot: ShadowRoot | null;
         slot: string;
         readonly tagName: string;
-        attachShadow(init: ShadowRootInit): ShadowRoot;
         closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<E extends Element = Element>(selectors: string): E | null;

package/icons-branded/create-icon-class.js

@@ -1,4 +1,4 @@
-import { getBooleanAttribute, getIntegerAttribute, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
 const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;fill:var(--sinch-color-stormy-500)}.accent{fill:var(--sinch-color-text-link)}:host([inverted]:not([inverted=false])) svg{fill:var(--sinch-color-snow-100)}:host([inverted]:not([inverted=false])) .accent{fill:var(--sinch-color-honey-500)}</style>';
 const DEFAULT_SIZE = 48;
 const MIN_SIZE = 4;
@@ -6,12 +6,10 @@ const MAX_SIZE = 256;
 export const createIconClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = iconStylesHtml + templateHTML;
-  return class extends HTMLElement {
+  return class extends NectaryElement {
     constructor() {
       super();
-      const shadowRoot = this.attachShadow({
-        mode: 'closed'
-      });
+      const shadowRoot = this.attachShadow();
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }

package/icons-channel/create-icon-class.d.ts

@@ -4,6 +4,7 @@ export declare const createIconClass: (templateHTML: string) => {
         size: number;
         connectedCallback(): void;
         attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+        attachShadow(): ShadowRoot;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -50,7 +51,6 @@ export declare const createIconClass: (templateHTML: string) => {
         readonly shadowRoot: ShadowRoot | null;
         slot: string;
         readonly tagName: string;
-        attachShadow(init: ShadowRootInit): ShadowRoot;
         closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<E extends Element = Element>(selectors: string): E | null;

package/icons-channel/create-icon-class.js

@@ -1,4 +1,4 @@
-import { getIntegerAttribute, updateAttribute, updateIntegerAttribute } from '../utils';
+import { getIntegerAttribute, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
 const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}</style>';
 const DEFAULT_SIZE = 48;
 const MIN_SIZE = 4;
@@ -6,12 +6,10 @@ const MAX_SIZE = 256;
 export const createIconClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = iconStylesHtml + templateHTML;
-  return class extends HTMLElement {
+  return class extends NectaryElement {
     constructor() {
       super();
-      const shadowRoot = this.attachShadow({
-        mode: 'closed'
-      });
+      const shadowRoot = this.attachShadow();
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }

package/illustration/create-illustration-class.d.ts

@@ -4,6 +4,7 @@ export declare const createIllustrationClass: (templateHTML: string) => {
         size: number;
         connectedCallback(): void;
         attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+        attachShadow(): ShadowRoot;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -50,7 +51,6 @@ export declare const createIllustrationClass: (templateHTML: string) => {
         readonly shadowRoot: ShadowRoot | null;
         slot: string;
         readonly tagName: string;
-        attachShadow(init: ShadowRootInit): ShadowRoot;
         closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<E extends Element = Element>(selectors: string): E | null;

package/illustration/create-illustration-class.js

@@ -1,4 +1,4 @@
-import { getIntegerAttribute, updateAttribute, updateIntegerAttribute } from '../utils';
+import { getIntegerAttribute, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
 const illustrationStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none}</style>';
 const DEFAULT_SIZE = 256;
 const MIN_SIZE = 16;
@@ -6,12 +6,10 @@ const MAX_SIZE = 2048;
 export const createIllustrationClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = illustrationStylesHtml + templateHTML;
-  return class extends HTMLElement {
+  return class extends NectaryElement {
     constructor() {
       super();
-      const shadowRoot = this.attachShadow({
-        mode: 'closed'
-      });
+      const shadowRoot = this.attachShadow();
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }

package/input/index.js

@@ -7,12 +7,12 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#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)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::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])){--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><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const inputTypes = ['text', 'password'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -105,10 +105,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));

package/link/index.js

@@ -1,18 +1,18 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$anchor, _$text, _onClick;
+var _$anchor, _$text;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import '../icons/cancel';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline;outline:0}a{font:var(--sinch-font-body);font-size:inherit;line-height:inherit;color:var(--sinch-color-text-link);fill:var(--sinch-color-text-link)}svg{display:none;transform:translateY(.15em);margin-left:.4em;width:.8em;pointer-events:none}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;fill:var(--sinch-color-tropical-200)}:host([external]:not([external=false])) svg{display:inline-block}</style><a><span></span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M14.222 14.222H1.778V1.778H8V0H1.778C.79 0 0 .8 0 1.778v12.444C0 15.2.791 16 1.778 16h12.444C15.2 16 16 15.2 16 14.222V8h-1.778v6.222ZM9.778 0v1.778h3.19l-8.737 8.738 1.253 1.253 8.738-8.738v3.191H16V0H9.778Z"/></svg></a>';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:inline;outline:0}a{font:var(--sinch-font-body);font-size:inherit;line-height:inherit;color:var(--sinch-color-text-link);fill:var(--sinch-color-text-link)}svg{display:none;transform:translateY(.15em);margin-left:.4em;width:.8em;pointer-events:none}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;fill:var(--sinch-color-tropical-200)}:host([external]:not([external=false])) svg{display:inline-block}</style><a><span></span> <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M14.222 14.222H1.778V1.778H8V0H1.778C.79 0 0 .8 0 1.778v12.444C0 15.2.791 16 1.778 16h12.444C15.2 16 16 15.2 16 14.222V8h-1.778v6.222ZM9.778 0v1.778h3.19l-8.737 8.738 1.253 1.253 8.738-8.738v3.191H16V0H9.778Z"/></svg></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onClick = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -26,20 +26,7 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _onClick, {
-      writable: true,
-      value: e => {
-        if (this.disabled) {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }
-    });
-
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$anchor, shadowRoot.querySelector('a'));
@@ -47,14 +34,6 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
     _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('span'));
   }
 
-  connectedCallback() {
-    _classPrivateFieldGet(this, _$anchor).addEventListener('click', _classPrivateFieldGet(this, _onClick));
-  }
-
-  disconnectedCallback() {
-    _classPrivateFieldGet(this, _$anchor).removeEventListener('click', _classPrivateFieldGet(this, _onClick));
-  }
-
   get text() {
     return getAttribute(this, 'text', '');
   }

package/logo/create-logo-class.d.ts

@@ -5,6 +5,7 @@ export declare const createLogoClass: (templateHTML: string) => {
         inverted: boolean;
         connectedCallback(): void;
         attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+        attachShadow(): ShadowRoot;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -51,7 +52,6 @@ export declare const createLogoClass: (templateHTML: string) => {
         readonly shadowRoot: ShadowRoot | null;
         slot: string;
         readonly tagName: string;
-        attachShadow(init: ShadowRootInit): ShadowRoot;
         closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<E extends Element = Element>(selectors: string): E | null;

package/logo/create-logo-class.js

@@ -1,4 +1,4 @@
-import { getBooleanAttribute, getIntegerAttribute, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
 const logoStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;fill:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) svg{fill:var(--sinch-color-snow-100)}</style>';
 const DEFAULT_SIZE = 16;
 const MIN_SIZE = 4;
@@ -6,12 +6,10 @@ const MAX_SIZE = 256;
 export const createLogoClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = logoStylesHtml + templateHTML;
-  return class extends HTMLElement {
+  return class extends NectaryElement {
     constructor() {
       super();
-      const shadowRoot = this.attachShadow({
-        mode: 'closed'
-      });
+      const shadowRoot = this.attachShadow();
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }

package/package.json

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

package/pagination/index.d.ts

@@ -1,12 +1,15 @@
 import '../icons/keyboard-arrow-left';
 import '../icons/keyboard-arrow-right';
-import type { TSinchElementReact } from '../types';
+import type { TRect, TSinchElementReact } from '../types';
 import type { FocusEvent, SyntheticEvent } from 'react';
 export declare type TSinchPaginationElement = HTMLElement & {
     value: number;
     max: number;
     focus(): void;
     blur(): void;
+    readonly prevButtonRect: TRect;
+    readonly nextButtonRect: TRect;
+    nthButtonRect(index: number): TRect | null;
 };
 export declare type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
     value: number;

package/pagination/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import '../icons/keyboard-arrow-left';
 import '../icons/keyboard-arrow-right';
-import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass } from '../utils';
+import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-font-emphasized-body);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}</style><div id="wrapper"><button id="left"><sinch-icon-keyboard-arrow-left></sinch-icon-keyboard-arrow-left></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon-keyboard-arrow-right></sinch-icon-keyboard-arrow-right></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
@@ -23,7 +23,7 @@ const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new WeakMap(), _$buttons = new WeakMap(), _$wrapper = new WeakMap(), _onValueChange = new WeakSet(), _onButtonClick = new WeakMap(), _clamp = new WeakSet(), _dispatchChangeEvent = new WeakSet(), class extends HTMLElement {
+defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new WeakMap(), _$buttons = new WeakMap(), _$wrapper = new WeakMap(), _onValueChange = new WeakSet(), _onButtonClick = new WeakMap(), _clamp = new WeakSet(), _dispatchChangeEvent = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -92,10 +92,7 @@ defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new W
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$left, shadowRoot.querySelector('#left'));
@@ -171,6 +168,20 @@ defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new W
     _classPrivateFieldGet(this, _$buttons).forEach($b => $b.blur());
   }
 
+  get prevButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$left));
+  }
+
+  get nextButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$right));
+  }
+
+  nthButtonRect(index) {
+    const btn = _classPrivateFieldGet(this, _$buttons)[index];
+
+    return btn == null ? null : getRect(btn);
+  }
+
 }));
 
 function _onValueChange2() {

package/popover/index.js

@@ -12,12 +12,12 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 import dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 6px rgba(0,0,0,.15);border:1px solid var(--sinch-color-snow-500);border-radius:4px;overflow-y:auto;contain:content;padding:12px;box-sizing:border-box}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}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
 const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends HTMLElement {
+defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -74,10 +74,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$target, shadowRoot.querySelector('#target'));

package/radio/index.js

@@ -12,7 +12,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 import { isRadioOptionElement } from '../radio-option';
-import { defineCustomElement, getAttribute, updateAttribute } from '../utils';
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 
 const findSelectedOption = elements => {
@@ -21,7 +21,7 @@ const findSelectedOption = elements => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), class extends HTMLElement {
+defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -99,10 +99,7 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     shadowRoot.addEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
     shadowRoot.addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));