@nectary/components 0.8.1 → 0.10.0

package/link/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icon/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"><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 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 {
@@ -37,7 +37,7 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));

package/logo/create-logo-class.js

@@ -10,7 +10,7 @@ export const createLogoClass = templateHTML => {
     constructor() {
       super();
       const shadowRoot = this.attachShadow({
-        mode: 'production' === 'development' ? 'open' : 'closed'
+        mode: 'closed'
       });
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');

package/logo/sinch-icon/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createLogoClass } from '../create-logo-class';
-const templateHTML = '<svg viewBox="0 0 93 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M92.298 25.271a17.167 17.167 0 0 1-.814 5.312c-1.51 4.734-5.27 8.678-10.06 10.549-5.64 2.202-12.252 1.416-18.624-2.21l-4.649-2.67a16.424 16.424 0 0 1-3.563 3.064l-14.817 8.679-.027.015v-7.501l.027-.014 22.29-13.057a16.017 16.017 0 0 1-.713 3.206l4.656 2.65c5.95 3.386 10.388 2.85 13.065 1.806 2.991-1.167 5.323-3.59 6.245-6.483.692-2.15.679-4.467-.04-6.609-.955-2.88-3.319-5.275-6.324-6.41-2.688-1.014-7.132-1.494-13.04 1.962L29.7 38.747l-.043.028c-4.017 2.35-8.14 3.556-12.065 3.58a18.162 18.162 0 0 1-6.53-1.145C6.247 39.396 2.44 35.498.874 30.783A17.116 17.116 0 0 1 .81 20.166c1.51-4.733 5.272-8.676 10.063-10.548 5.64-2.202 12.252-1.416 18.623 2.212l4.649 2.67a16.377 16.377 0 0 1 3.563-3.067l.281-.163 1.726-1.011-7.37-4.197A3.238 3.238 0 0 1 35.551.437l10.591 6.06L56.52.457a3.238 3.238 0 0 1 3.27 5.588l-29.528 17.05c.132-1.017.36-2.019.683-2.992l-4.656-2.65c-5.946-3.383-10.384-2.847-13.061-1.803-2.991 1.167-5.325 3.59-6.247 6.481a10.623 10.623 0 0 0 .039 6.608c.956 2.882 3.321 5.277 6.324 6.41 2.689 1.012 7.136 1.495 13.042-1.966l36.256-21.208c4.017-2.349 8.14-3.555 12.067-3.579a18.112 18.112 0 0 1 6.53 1.145c4.812 1.813 8.62 5.712 10.187 10.426a17.23 17.23 0 0 1 .872 5.304Z"/></svg>';
+const templateHTML = '<svg viewBox="0 0 93 48" aria-hidden="true"><path d="M92.298 25.271a17.167 17.167 0 0 1-.814 5.312c-1.51 4.734-5.27 8.678-10.06 10.549-5.64 2.202-12.252 1.416-18.624-2.21l-4.649-2.67a16.424 16.424 0 0 1-3.563 3.064l-14.817 8.679-.027.015v-7.501l.027-.014 22.29-13.057a16.017 16.017 0 0 1-.713 3.206l4.656 2.65c5.95 3.386 10.388 2.85 13.065 1.806 2.991-1.167 5.323-3.59 6.245-6.483.692-2.15.679-4.467-.04-6.609-.955-2.88-3.319-5.275-6.324-6.41-2.688-1.014-7.132-1.494-13.04 1.962L29.7 38.747l-.043.028c-4.017 2.35-8.14 3.556-12.065 3.58a18.162 18.162 0 0 1-6.53-1.145C6.247 39.396 2.44 35.498.874 30.783A17.116 17.116 0 0 1 .81 20.166c1.51-4.733 5.272-8.676 10.063-10.548 5.64-2.202 12.252-1.416 18.623 2.212l4.649 2.67a16.377 16.377 0 0 1 3.563-3.067l.281-.163 1.726-1.011-7.37-4.197A3.238 3.238 0 0 1 35.551.437l10.591 6.06L56.52.457a3.238 3.238 0 0 1 3.27 5.588l-29.528 17.05c.132-1.017.36-2.019.683-2.992l-4.656-2.65c-5.946-3.383-10.384-2.847-13.061-1.803-2.991 1.167-5.325 3.59-6.247 6.481a10.623 10.623 0 0 0 .039 6.608c.956 2.882 3.321 5.277 6.324 6.41 2.689 1.012 7.136 1.495 13.042-1.966l36.256-21.208c4.017-2.349 8.14-3.555 12.067-3.579a18.112 18.112 0 0 1 6.53 1.145c4.812 1.813 8.62 5.712 10.187 10.426a17.23 17.23 0 0 1 .872 5.304Z"/></svg>';
 defineCustomElement('sinch-logo-sinch-icon', createLogoClass(templateHTML));

package/logo/sinch-icon-wordmark/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createLogoClass } from '../create-logo-class';
-const templateHTML = '<svg viewBox="0 0 236 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m100.82 36.72 6.606-3.801c1.299 2.603 3.5 3.903 6.602 3.9 2.914 0 4.704-1.299 4.704-3.201 0-1.902-2.498-2.498-6.806-3.401-5.903-1.303-9.703-3.7-9.703-8.704 0-5.412 5.503-9.108 11.605-9.108 5.204 0 8.804 1.403 12.006 5.411l-6.303 3.605c-1.199-2.081-3.001-3.101-5.603-3.101-2.701 0-4.2 1.199-4.2 2.802 0 1.998 3.001 2.397 7.002 3.4 5.503 1.4 9.707 3.301 9.707 8.805 0 5.702-5.603 9.603-12.609 9.603-5.802-.008-10.207-1.607-13.008-6.21Zm29.618 5.41V16.739l7.405-4.333v29.717l-7.405.009Zm12.608 0V26.517c0-8.004 5.903-14.111 14.108-14.111 8.325 0 14.107 6.506 14.107 14.111v15.606h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106l-7.514.009Zm32.203-14.515c0-8.904 6.402-15.21 15.402-15.21 5.603 0 10.602 2.914 13.004 7.405l-6.402 3.805a7.36 7.36 0 0 0-6.702-4.005c-4.404 0-7.705 3.302-7.705 8.005 0 4.604 3.101 8.105 7.705 8.105 3.001 0 5.603-1.503 6.802-4.004l6.402 3.704a14.887 14.887 0 0 1-13.104 7.493c-8.883.009-15.402-6.394-15.402-15.298Zm32.519 14.507V4.304L215.186 0v14.607a12.584 12.584 0 0 1 6.902-2.202c8.204 0 13.907 5.603 13.907 13.907v15.819h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106h-7.526ZM82.892 27.578a15.068 15.068 0 0 1-9.766 14.244C68.06 43.8 62.124 43.072 56.4 39.837l-4.162-2.398a14.752 14.752 0 0 1-3.197 2.752l-13.32 7.792h-.026v-6.722h.025l20.02-11.735a14.647 14.647 0 0 1-.641 2.876l4.162 2.381c5.345 3.04 9.333 2.56 11.735 1.624a9.484 9.484 0 0 0 5.607-5.828 9.67 9.67 0 0 0 .458-2.972 9.257 9.257 0 0 0-6.17-8.717c-2.418-.911-6.406-1.344-11.713 1.761L26.675 39.679l-.038.025c-3.605 2.11-7.31 3.197-10.823 3.217-2.001.02-3.99-.328-5.865-1.028a15.185 15.185 0 0 1-9.22-18.898 15.352 15.352 0 0 1 9.037-9.475c5.066-1.977 11.002-1.274 16.725 1.986l4.163 2.398a14.678 14.678 0 0 1 3.201-2.752l.28-.166 1.552-.908-6.619-3.746a2.915 2.915 0 0 1 2.86-5.058l9.512 5.44 9.32-5.41a2.914 2.914 0 0 1 2.939 5.007l-26.52 15.31a14.67 14.67 0 0 1 .616-2.68l-4.163-2.382c-5.341-3.038-9.325-2.56-11.73-1.619a9.317 9.317 0 0 0 .103 17.508c2.415.912 6.407 1.345 11.714-1.76l32.557-19.053c3.604-2.11 7.31-3.193 10.823-3.214 2-.02 3.987.329 5.86 1.029a15.077 15.077 0 0 1 9.937 14.128"/></svg>';
+const templateHTML = '<svg viewBox="0 0 236 48" aria-hidden="true"><path d="m100.82 36.72 6.606-3.801c1.299 2.603 3.5 3.903 6.602 3.9 2.914 0 4.704-1.299 4.704-3.201 0-1.902-2.498-2.498-6.806-3.401-5.903-1.303-9.703-3.7-9.703-8.704 0-5.412 5.503-9.108 11.605-9.108 5.204 0 8.804 1.403 12.006 5.411l-6.303 3.605c-1.199-2.081-3.001-3.101-5.603-3.101-2.701 0-4.2 1.199-4.2 2.802 0 1.998 3.001 2.397 7.002 3.4 5.503 1.4 9.707 3.301 9.707 8.805 0 5.702-5.603 9.603-12.609 9.603-5.802-.008-10.207-1.607-13.008-6.21Zm29.618 5.41V16.739l7.405-4.333v29.717l-7.405.009Zm12.608 0V26.517c0-8.004 5.903-14.111 14.108-14.111 8.325 0 14.107 6.506 14.107 14.111v15.606h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106l-7.514.009Zm32.203-14.515c0-8.904 6.402-15.21 15.402-15.21 5.603 0 10.602 2.914 13.004 7.405l-6.402 3.805a7.36 7.36 0 0 0-6.702-4.005c-4.404 0-7.705 3.302-7.705 8.005 0 4.604 3.101 8.105 7.705 8.105 3.001 0 5.603-1.503 6.802-4.004l6.402 3.704a14.887 14.887 0 0 1-13.104 7.493c-8.883.009-15.402-6.394-15.402-15.298Zm32.519 14.507V4.304L215.186 0v14.607a12.584 12.584 0 0 1 6.902-2.202c8.204 0 13.907 5.603 13.907 13.907v15.819h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106h-7.526ZM82.892 27.578a15.068 15.068 0 0 1-9.766 14.244C68.06 43.8 62.124 43.072 56.4 39.837l-4.162-2.398a14.752 14.752 0 0 1-3.197 2.752l-13.32 7.792h-.026v-6.722h.025l20.02-11.735a14.647 14.647 0 0 1-.641 2.876l4.162 2.381c5.345 3.04 9.333 2.56 11.735 1.624a9.484 9.484 0 0 0 5.607-5.828 9.67 9.67 0 0 0 .458-2.972 9.257 9.257 0 0 0-6.17-8.717c-2.418-.911-6.406-1.344-11.713 1.761L26.675 39.679l-.038.025c-3.605 2.11-7.31 3.197-10.823 3.217-2.001.02-3.99-.328-5.865-1.028a15.185 15.185 0 0 1-9.22-18.898 15.352 15.352 0 0 1 9.037-9.475c5.066-1.977 11.002-1.274 16.725 1.986l4.163 2.398a14.678 14.678 0 0 1 3.201-2.752l.28-.166 1.552-.908-6.619-3.746a2.915 2.915 0 0 1 2.86-5.058l9.512 5.44 9.32-5.41a2.914 2.914 0 0 1 2.939 5.007l-26.52 15.31a14.67 14.67 0 0 1 .616-2.68l-4.163-2.382c-5.341-3.038-9.325-2.56-11.73-1.619a9.317 9.317 0 0 0 .103 17.508c2.415.912 6.407 1.345 11.714-1.76l32.557-19.053c3.604-2.11 7.31-3.193 10.823-3.214 2-.02 3.987.329 5.86 1.029a15.077 15.077 0 0 1 9.937 14.128"/></svg>';
 defineCustomElement('sinch-logo-sinch-icon-wordmark', createLogoClass(templateHTML));

package/package.json

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

package/pagination/index.d.ts

@@ -0,0 +1,27 @@
+import '../icon/keyboard-arrow-left';
+import '../icon/keyboard-arrow-right';
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, SyntheticEvent } from 'react';
+export declare type TSinchPaginationElement = HTMLElement & {
+    value: number;
+    max: number;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
+    value: number;
+    max: number;
+    onChange: (event: SyntheticEvent<TSinchPaginationElement, CustomEvent<number>>) => void;
+    onFocus?: (e: FocusEvent<TSinchPaginationElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchPaginationElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-pagination': TSinchPaginationReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-pagination': TSinchPaginationElement;
+    }
+}

package/pagination/index.js

@@ -0,0 +1,219 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$left, _$right, _$buttons, _$wrapper, _onValueChange, _onButtonClick, _clamp, _dispatchChangeEvent;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+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"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import '../icon/keyboard-arrow-left';
+import '../icon/keyboard-arrow-right';
+import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass } 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);
+const FIRST_BTN_INDEX = 0;
+const LAST_BTN_INDEX = NUM_BUTTONS - 1;
+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 {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
+
+    _classPrivateMethodInitSpec(this, _clamp);
+
+    _classPrivateMethodInitSpec(this, _onValueChange);
+
+    _classPrivateFieldInitSpec(this, _$left, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$right, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$buttons, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$wrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        const value = getIntegerAttribute(this, 'value', 0) - 1;
+        const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
+
+        if (e.target === _classPrivateFieldGet(this, _$left)) {
+          return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, value - 1);
+        }
+
+        if (e.target === _classPrivateFieldGet(this, _$right)) {
+          return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, value + 1);
+        }
+
+        const btnIndex = Array.prototype.indexOf.call(_classPrivateFieldGet(this, _$wrapper).children, e.target) - 1;
+
+        if (btnIndex >= 0 && btnIndex < _classPrivateFieldGet(this, _$buttons).length) {
+          if (btnIndex === FIRST_BTN_INDEX) {
+            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, 0);
+          }
+
+          if (btnIndex === _classPrivateFieldGet(this, _$buttons).length - 1) {
+            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, max - 1);
+          }
+
+          if (btnIndex === DOTS_LEFT_INDEX && max > NUM_BUTTONS && value > MIDDLE_BTN_INDEX) {
+            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, Math.floor(value / 2));
+          }
+
+          if (btnIndex === DOTS_RIGHT_INDEX && max > NUM_BUTTONS && value <= max - DOTS_RIGHT_INDEX) {
+            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, Math.floor((max - value) / 2 + value));
+          }
+
+          return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, btnIndex + Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS)));
+        }
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$left, shadowRoot.querySelector('#left'));
+
+    _classPrivateFieldSet(this, _$right, shadowRoot.querySelector('#right'));
+
+    _classPrivateFieldSet(this, _$buttons, shadowRoot.querySelectorAll('.page'));
+
+    _classPrivateFieldSet(this, _$wrapper, shadowRoot.querySelector('#wrapper'));
+  }
+
+  connectedCallback() {
+    _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
+
+    _classPrivateFieldGet(this, _$wrapper).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$wrapper).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+  }
+
+  static get observedAttributes() {
+    return ['max', 'value'];
+  }
+
+  attributeChangedCallback(name, _) {
+    switch (name) {
+      case 'value':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
+
+          break;
+        }
+
+      case 'max':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
+
+          break;
+        }
+    }
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(val) {
+    updateAttribute(this, 'value', val);
+  }
+
+  get value() {
+    return getIntegerAttribute(this, 'value', 0);
+  }
+
+  set max(val) {
+    updateAttribute(this, 'max', val);
+  }
+
+  get max() {
+    return getIntegerAttribute(this, 'value', 0);
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$left).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$left).blur();
+
+    _classPrivateFieldGet(this, _$right).blur();
+
+    _classPrivateFieldGet(this, _$buttons).forEach($b => $b.blur());
+  }
+
+}));
+
+function _onValueChange2() {
+  const value = getIntegerAttribute(this, 'value', 0) - 1;
+  const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
+  const valueOffset = Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS));
+
+  for (let i = 0; i < _classPrivateFieldGet(this, _$buttons).length; i++) {
+    const $b = _classPrivateFieldGet(this, _$buttons)[i];
+
+    if (value < 3) {
+      setClass($b, 'active', value === i);
+    } else if (value >= max - MIDDLE_BTN_INDEX) {
+      setClass($b, 'active', i + valueOffset === value);
+    } else {
+      setClass($b, 'active', i === MIDDLE_BTN_INDEX);
+    }
+
+    if (max > NUM_BUTTONS) {
+      setClass($b, 'dots', i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX);
+    }
+
+    setClass($b, 'hidden', i >= max);
+    const btnText = $b.firstElementChild;
+
+    if (btnText != null) {
+      btnText.textContent = i === FIRST_BTN_INDEX ? '1' : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
+    }
+  }
+
+  const isValueBad = value < 0 || value >= max;
+  _classPrivateFieldGet(this, _$left).disabled = isValueBad || value === 0;
+  _classPrivateFieldGet(this, _$right).disabled = isValueBad || value === max - 1;
+}
+
+function _clamp2(value, max) {
+  return Math.max(0, Math.min(max - 1, value));
+}
+
+function _dispatchChangeEvent2(value) {
+  const max = getIntegerAttribute(this, 'max', 0);
+  this.dispatchEvent(new CustomEvent('change', {
+    detail: _classPrivateMethodGet(this, _clamp, _clamp2).call(this, value, max) + 1,
+    bubbles: true
+  }));
+}

package/radio/index.d.ts

@@ -5,6 +5,7 @@ export declare type TSinchRadioElement = HTMLElement & {
 };
 export declare type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
     value: string;
+    'aria-label': string;
     onChange: (event: SyntheticEvent<TSinchRadioElement, CustomEvent<boolean>>) => void;
 };
 declare global {

package/radio/index.js

@@ -1,73 +1,43 @@
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 
-var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange;
+var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
 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"); } }
 
+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';
 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 getEnabledRadioElements = $slot => {
-  return $slot.assignedElements().filter(opt => isRadioOptionElement(opt) && opt.disabled !== true);
-};
-
 const findSelectedOption = elements => {
   return elements.find(el => el.checked) ?? null;
 };
 
-const getFirstOption = $slot => {
-  for (const $option of $slot.assignedElements()) {
-    if (isRadioOptionElement($option) && $option.disabled !== true) {
-      return $option;
-    }
-  }
-
-  return null;
-};
-
-const getLastOption = $slot => {
-  for (const $option of $slot.assignedElements().reverse()) {
-    if (isRadioOptionElement($option) && $option.disabled !== true) {
-      return $option;
-    }
-  }
-
-  return null;
-};
+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 {
+  constructor() {
+    super();
 
-const getNextOption = $slot => {
-  const $options = getEnabledRadioElements($slot);
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    _classPrivateMethodInitSpec(this, _getEnabledRadioElements);
 
-  if (currentIndex < 0) {
-    return getFirstOption($slot);
-  }
+    _classPrivateMethodInitSpec(this, _getPrevOption);
 
-  return $options[(currentIndex + 1) % $options.length];
-};
+    _classPrivateMethodInitSpec(this, _getNextOption);
 
-const getPrevOption = $slot => {
-  const $options = getEnabledRadioElements($slot);
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    _classPrivateMethodInitSpec(this, _getLastOption);
 
-  if (currentIndex < 0) {
-    return getLastOption($slot);
-  }
+    _classPrivateMethodInitSpec(this, _getFirstOption);
 
-  return $options[(currentIndex - 1 + $options.length) % $options.length];
-};
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
 
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), class extends HTMLElement {
-  constructor() {
-    super();
+    _classPrivateMethodInitSpec(this, _onValueChange);
 
     _classPrivateFieldInitSpec(this, _$slot, {
       writable: true,
@@ -82,11 +52,13 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
           case 'ArrowLeft':
             {
               e.preventDefault();
-              const $option = getPrevOption(_classPrivateFieldGet(this, _$slot));
+
+              const $option = _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this);
 
               if ($option !== null) {
                 $option.focus();
-                this.dispatchChangeEvent($option.value);
+
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
               }
 
               break;
@@ -96,11 +68,13 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
           case 'ArrowRight':
             {
               e.preventDefault();
-              const $option = getNextOption(_classPrivateFieldGet(this, _$slot));
+
+              const $option = _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this);
 
               if ($option !== null) {
                 $option.focus();
-                this.dispatchChangeEvent($option.value);
+
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
               }
 
               break;
@@ -112,7 +86,7 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
     _classPrivateFieldInitSpec(this, _onSlotChange, {
       writable: true,
       value: () => {
-        this.onValueChange(this.value);
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
       }
     });
 
@@ -120,12 +94,13 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
       writable: true,
       value: e => {
         e.stopPropagation();
-        this.dispatchChangeEvent(e.detail);
+
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
       }
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -137,16 +112,16 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
     _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
   }
 
-  static get observedAttributes() {
-    return ['value'];
+  connectedCallback() {
+    this.setAttribute('role', 'radiogroup');
   }
 
-  get type() {
-    return 'text';
+  static get observedAttributes() {
+    return ['value'];
   }
 
   get nodeName() {
-    return 'input';
+    return 'select';
   }
 
   set value(value) {
@@ -161,25 +136,76 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
     switch (name) {
       case 'value':
         {
-          this.onValueChange(newVal ?? '');
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
+
           break;
         }
     }
   }
 
-  onValueChange(value) {
-    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-      if (isRadioOptionElement($option)) {
-        $option.checked = $option.disabled !== true && $option.value === value;
-      }
+}));
+
+function _onValueChange2(value) {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+    if (isRadioOptionElement($option)) {
+      $option.checked = $option.disabled !== true && $option.value === value;
     }
   }
+}
+
+function _dispatchChangeEvent2(value) {
+  this.dispatchEvent(new CustomEvent('change', {
+    detail: value,
+    bubbles: true
+  }));
+}
 
-  dispatchChangeEvent(value) {
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: value,
-      bubbles: true
-    }));
+function _getFirstOption2() {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+    if (isRadioOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
+  }
+
+  return null;
+}
+
+function _getLastOption2() {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements().reverse()) {
+    if (isRadioOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
   }
 
-}));
+  return null;
+}
+
+function _getNextOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
+  }
+
+  return $options[(currentIndex + 1) % $options.length];
+}
+
+function _getPrevOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
+  }
+
+  return $options[(currentIndex - 1 + $options.length) % $options.length];
+}
+
+function _getEnabledRadioElements2() {
+  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(opt => isRadioOptionElement(opt) && opt.disabled !== true);
+}

package/radio-option/index.d.ts

@@ -13,6 +13,7 @@ export declare type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptio
     value: string;
     disabled?: boolean;
     text: string;
+    'aria-label': string;
     onFocus?: (e: FocusEvent<TSinchRadioOptionElement>) => void;
     onBlur?: (e: FocusEvent<TSinchRadioOptionElement>) => void;
 };

package/radio-option/index.js

@@ -41,7 +41,7 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -52,6 +52,8 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'radio');
+
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
   }
 
@@ -106,6 +108,7 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
       case 'checked':
         {
           _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
+          updateAttribute(this, 'aria-checked', isAttrTrue(newVal));
           break;
         }
 

package/select/index.d.ts

@@ -1,4 +1,5 @@
-import type { TSinchElementReact } from '../types';
+import '../select-option';
+import type { TRect, TSinchElementReact } from '../types';
 import type { FocusEvent, SyntheticEvent } from 'react';
 export declare type TSinchSelectElement = HTMLElement & {
     value: string;
@@ -9,6 +10,7 @@ export declare type TSinchSelectElement = HTMLElement & {
     additionalText: string | null;
     disabled: boolean;
     maxVisibleItems: number | null;
+    readonly dropdownRect: TRect;
     focus(): void;
     blur(): void;
 };
@@ -21,6 +23,7 @@ export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement>
     additionalText?: string;
     disabled?: boolean;
     maxVisibleItems?: number;
+    'aria-label': string;
     onChange: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
     onFocus?: (e: FocusEvent<TSinchSelectElement>) => void;
     onBlur?: (e: FocusEvent<TSinchSelectElement>) => void;