@nectary/components 0.13.0 → 0.15.0

package/search/index.js

@@ -0,0 +1,470 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$label, _$input, _selectionStart, _selectionEnd, _$optionSlot, _$listbox, _$clear, _onInput, _onValueChange, _onClearMouseDown, _onClear, _onInputFocus, _onInputBlur, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements;
+
+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 { isSearchOptionElement } from '../search-option';
+import { attrValueToPixels, defineCustomElement, getAttribute, getIntegerAttribute, getRect, updateAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{all:initial;position:absolute;right:8px;top:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-300)}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value=""]) #clear{display:none}:host([value=""]) #input{padding-right:12px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><button id="clear"><sinch-icon-close id="icon-close"></sinch-icon-close></button><div id="listbox"><slot name="option"></slot></div></div>';
+import '../icon/search';
+import '../icon/close';
+const ITEM_HEIGHT = 40;
+
+const findSelectedOption = elements => {
+  for (const el of elements) {
+    if (el.selected) {
+      return el;
+    }
+  }
+
+  return null;
+};
+
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$clear = new WeakMap(), _onInput = new WeakMap(), _onValueChange = new WeakSet(), _onClearMouseDown = new WeakMap(), _onClear = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _getOptionElements);
+
+    _classPrivateMethodInitSpec(this, _selectOption);
+
+    _classPrivateMethodInitSpec(this, _getPrevOption);
+
+    _classPrivateMethodInitSpec(this, _getNextOption);
+
+    _classPrivateMethodInitSpec(this, _getLastOption);
+
+    _classPrivateMethodInitSpec(this, _getFirstOption);
+
+    _classPrivateMethodInitSpec(this, _onCollapse);
+
+    _classPrivateMethodInitSpec(this, _onExpand);
+
+    _classPrivateMethodInitSpec(this, _onValueChange);
+
+    _classPrivateFieldInitSpec(this, _$label, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$input, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _selectionStart, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _selectionEnd, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _$optionSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$listbox, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$clear, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onInput, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, _classPrivateFieldGet(this, _$input).value, true);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onClearMouseDown, {
+      writable: true,
+      value: e => {
+        e.preventDefault();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onClear, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, '');
+
+        _classPrivateFieldGet(this, _$input).focus();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInputFocus, {
+      writable: true,
+      value: () => {
+        _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInputBlur, {
+      writable: true,
+      value: () => {
+        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        const $elem = e.target;
+
+        if (isSearchOptionElement($elem)) {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $elem.text);
+        }
+
+        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxKeyPress, {
+      writable: true,
+      value: e => {
+        switch (e.code) {
+          case 'Enter':
+            {
+              e.preventDefault();
+              const $elem = findSelectedOption(_classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this));
+
+              if ($elem != null) {
+                _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $elem.text);
+              }
+
+              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
+      writable: true,
+      value: e => {
+        switch (e.code) {
+          case 'ArrowUp':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this));
+
+              break;
+            }
+
+          case 'ArrowDown':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
+
+              break;
+            }
+
+          case 'Escape':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onOptionSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
+
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
+
+    _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
+
+    _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
+
+    _classPrivateFieldSet(this, _$clear, shadowRoot.querySelector('#clear'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'listbox');
+    this.setAttribute('autocomplete', 'off');
+    this.setAttribute('aria-expanded', 'false');
+
+    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
+
+    _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+
+    _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
+
+    _classPrivateFieldGet(this, _$clear).addEventListener('mousedown', _classPrivateFieldGet(this, _onClearMouseDown));
+
+    _classPrivateFieldGet(this, _$clear).addEventListener('click', _classPrivateFieldGet(this, _onClear));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+
+    _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
+
+    _classPrivateFieldGet(this, _$clear).removeEventListener('mousedown', _classPrivateFieldGet(this, _onClearMouseDown));
+
+    _classPrivateFieldGet(this, _$clear).removeEventListener('click', _classPrivateFieldGet(this, _onClear));
+  }
+
+  static get observedAttributes() {
+    return ['label', 'value', 'placeholder', 'maxvisibleitems', 'clear-aria-label'];
+  }
+
+  get type() {
+    return 'text';
+  }
+
+  get nodeName() {
+    return 'input';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+
+  get placeholder() {
+    return getAttribute(this, 'placeholder', null);
+  }
+
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+
+  get label() {
+    return getAttribute(this, 'label', null);
+  }
+
+  set maxVisibleItems(value) {
+    updateIntegerAttribute(this, 'maxvisibleitems', value);
+  }
+
+  get maxVisibleItems() {
+    return getIntegerAttribute(this, 'maxvisibleitems', null);
+  }
+
+  get dropdownRect() {
+    return getRect(_classPrivateFieldGet(this, _$listbox));
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          const nextVal = newVal ?? '';
+
+          if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
+            _classPrivateFieldGet(this, _$input).value = nextVal;
+            const isNextCursorEnd = _classPrivateFieldGet(this, _selectionStart) === null || _classPrivateFieldGet(this, _selectionStart) === nextVal.length;
+
+            if (!isNextCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _selectionStart), _classPrivateFieldGet(this, _selectionEnd));
+            }
+          }
+
+          break;
+        }
+
+      case 'label':
+        {
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          break;
+        }
+
+      case 'placeholder':
+        {
+          _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
+          updateAttribute(this, 'aria-placeholder', newVal);
+          break;
+        }
+
+      case 'maxvisibleitems':
+        {
+          _classPrivateFieldGet(this, _$listbox).style.maxHeight = attrValueToPixels(newVal, {
+            min: 2,
+            multiplier: ITEM_HEIGHT
+          });
+          break;
+        }
+
+      case 'clear-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$clear), 'aria-label', newVal);
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$input).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$input).blur();
+  }
+
+}));
+
+function _onValueChange2(nextValue) {
+  let preserveCursorPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const prevValue = this.value;
+
+  if (prevValue !== nextValue) {
+    const nextSelectionStart = preserveCursorPosition ? _classPrivateFieldGet(this, _$input).selectionStart : nextValue.length;
+    const nextSelectionEnd = preserveCursorPosition ? _classPrivateFieldGet(this, _$input).selectionEnd : nextValue.length;
+
+    const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
+
+    const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
+
+    const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
+    _classPrivateFieldGet(this, _$input).value = prevValue;
+
+    if (!isPrevCursorEnd) {
+      _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
+    }
+
+    _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
+
+    _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
+
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: nextValue,
+      bubbles: true
+    }));
+  }
+}
+
+function _onExpand2() {
+  const elems = _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this);
+
+  if (elems.length === 0 || document.activeElement !== this) {
+    _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+    return;
+  }
+
+  this.setAttribute('aria-expanded', 'true');
+
+  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, elems[0]);
+}
+
+function _onCollapse2() {
+  this.setAttribute('aria-expanded', 'false');
+}
+
+function _getFirstOption2() {
+  return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)[0] ?? null;
+}
+
+function _getLastOption2() {
+  return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this).reverse()[0] ?? null;
+}
+
+function _getNextOption2() {
+  const $options = _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).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, _getOptionElements, _getOptionElements2).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 _selectOption2($option) {
+  for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
+    const isSelected = $op === $option;
+    $op.selected = isSelected;
+
+    if (isSelected) {
+      $op.scrollIntoView?.({
+        block: 'nearest'
+      });
+    }
+  }
+}
+
+function _getOptionElements2() {
+  return _classPrivateFieldGet(this, _$optionSlot).assignedElements().filter(isSearchOptionElement);
+}

package/search-option/index.d.ts

@@ -0,0 +1,20 @@
+import type { TSinchElementReact } from '../types';
+export declare const isSearchOptionElement: (element: EventTarget | Element | null) => element is TSinchSearchOptionElement;
+export declare type TSinchSearchOptionElement = HTMLElement & {
+    text: string;
+    selected: boolean;
+};
+export declare type TSinchSearchOptionReact = TSinchElementReact<TSinchSearchOptionElement> & {
+    text: string;
+    'aria-label': string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-search-option': TSinchSearchOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-search-option': TSinchSearchOptionElement;
+    }
+}

package/search-option/index.js

@@ -0,0 +1,76 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+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 { defineCustomElement, getAttribute, getBooleanAttribute, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:block;box-sizing:border-box;line-height:40px;padding:0 12px;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}</style><div id="wrapper"></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+
+var _$content = new WeakMap();
+
+class SearchOption extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$content, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('#wrapper'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'option');
+  }
+
+  static get observedAttributes() {
+    return ['text'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$content).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set selected(isSelected) {
+    updateBooleanAttribute(this, 'data-selected', isSelected);
+    updateExplicitBooleanAttribute(this, 'aria-selected', isSelected);
+  }
+
+  get selected() {
+    return getBooleanAttribute(this, 'data-selected');
+  }
+
+}
+
+defineCustomElement('sinch-search-option', SearchOption);
+export const isSearchOptionElement = element => {
+  return element instanceof SearchOption;
+};

package/spinner/index.js

@@ -12,6 +12,11 @@ defineCustomElement('sinch-spinner', class extends HTMLElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
+  connectedCallback() {
+    this.setAttribute('aria-live', 'polite');
+    this.setAttribute('aria-busy', 'true');
+  }
+
   set type(value) {
     updateLiteralAttribute(this, spinnerTypes, 'type', value);
   }

package/tooltip/index.js

@@ -1,5 +1,5 @@
 import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:block}#tooltip{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0%;transition:opacity .2s linear .2s}@media (prefers-reduced-motion){#tooltip{transition:none}}:host(:hover) #tooltip{opacity:100%}#text{position:absolute;padding:2px 6px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:max-content;border-radius:2px;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%)}#arrow{position:absolute;top:-8px;left:50%;transform:translateX(-50%);fill:var(--sinch-color-snow-600)}:host([orientation=top-left]) #text{transform:translateX(-80%) translateY(-100%)}:host([orientation=top-right]) #text{transform:translateX(-20%) translateY(-100%)}:host([orientation=bottom-right]) #text{top:calc(100% + 8px);transform:translateX(-20%)}:host([orientation=bottom-left]) #text{top:calc(100% + 8px);transform:translateX(-80%)}:host([orientation=bottom]) #text{top:calc(100% + 8px);transform:translateX(-50%)}:host([orientation^=bottom]) #arrow{top:calc(100% + 4px);transform:translateX(-50%) rotate(180deg)}:host([orientation=left]) #text{left:unset;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=left]) #arrow{left:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}:host([orientation=right]) #text{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=right]) #arrow{top:50%;left:calc(100% + 2px);transform:translateY(-50%) rotate(90deg)}:host([inverted]:not([inverted=false])) #text{color:var(--sinch-color-text-inverted);background-color:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) #arrow{fill:var(--sinch-color-stormy-500)}::slotted(*){display:block}</style><div id="wrapper"><slot></slot><div id="tooltip"><div id="text"></div><svg id="arrow" width="9" height="4" aria-hidden="true"><path d="m4.5 4 4-4h-8l4 4Z"/></svg></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:block}#tooltip{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .2s linear .2s}@media (prefers-reduced-motion){#tooltip{transition:none}}:host(:hover) #tooltip{opacity:1}#text{position:absolute;padding:2px 6px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:max-content;border-radius:2px;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%)}#arrow{position:absolute;top:-8px;left:50%;transform:translateX(-50%);fill:var(--sinch-color-snow-600)}:host([orientation=top-left]) #text{transform:translateX(-80%) translateY(-100%)}:host([orientation=top-right]) #text{transform:translateX(-20%) translateY(-100%)}:host([orientation=bottom-right]) #text{top:calc(100% + 8px);transform:translateX(-20%)}:host([orientation=bottom-left]) #text{top:calc(100% + 8px);transform:translateX(-80%)}:host([orientation=bottom]) #text{top:calc(100% + 8px);transform:translateX(-50%)}:host([orientation^=bottom]) #arrow{top:calc(100% + 4px);transform:translateX(-50%) rotate(180deg)}:host([orientation=left]) #text{left:unset;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=left]) #arrow{left:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}:host([orientation=right]) #text{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=right]) #arrow{top:50%;left:calc(100% + 2px);transform:translateY(-50%) rotate(90deg)}:host([inverted]:not([inverted=false])) #text{color:var(--sinch-color-text-inverted);background-color:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) #arrow{fill:var(--sinch-color-stormy-500)}::slotted(*){display:block}</style><div id="wrapper"><slot></slot><div id="tooltip"><div id="text"></div><svg id="arrow" width="9" height="4" aria-hidden="true"><path d="m4.5 4 4-4h-8l4 4Z"/></svg></div></div>';
 const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/utils.d.ts

@@ -3,6 +3,7 @@ export declare const defineCustomElement: (name: string, constructor: CustomElem
 export declare const defineNectaryElements: (registry: CustomElementRegistry) => void;
 export declare type TEventHandler = (arg?: any) => void;
 export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
+export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const isAttrTrue: (attrValue: string | null) => boolean;
 export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
 export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
@@ -10,7 +11,7 @@ export declare function getAttribute($element: Element, attrName: string): strin
 export declare function getAttribute($element: Element, attrName: string, defaultValue: null): string | null;
 export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
 export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
-export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: T[number] | null | undefined) => void;
+export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number] | undefined;
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];

package/utils.js

@@ -35,6 +35,9 @@ export const updateBooleanAttribute = ($element, attrName, attrValue) => {
     $element.removeAttribute(attrName);
   }
 };
+export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
+  $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
+};
 export const isAttrTrue = attrValue => {
   return attrValue === '' || attrValue !== 'false' && attrValue !== null;
 };