@nectary/components 0.29.1 → 0.31.0

package/segment/index.js

@@ -1,17 +1,20 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$caption, _$collapseSlot;
+var _$caption, _$previewSlot, _$previewWrapper, _$infoSlot, _$infoWrapper, _$collapseSlot, _$collapseWrapper, _onPreviewSlotChange, _onInfoSlotChange, _onCollapseSlotChange;
 
 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, getRect, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgba(0,0,0,.1)}#header{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;height:32px;padding:24px 32px 16px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-l);color:var(--sinch-color-text-default);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#content-wrapper{padding:0 32px;flex:1;min-height:0;overflow:auto}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:16px 32px 24px}#info{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;z-index:1}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #header{padding-bottom:24px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><span id="caption"></span><div id="info"><slot name="info"></slot></div><slot name="collapse"></slot></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+import '../title';
+import { getTitleLevelFromType } from '../title/utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:16px;width:100%;height:100%;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);box-shadow:var(--sinch-elevation-level-2);padding:8px 24px 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-l);color:var(--sinch-color-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:1em}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><sinch-title id="caption" level="3" type="m"></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+import { assertSize, sizeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$collapseSlot = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$previewSlot = new WeakMap(), _$previewWrapper = new WeakMap(), _$infoSlot = new WeakMap(), _$infoWrapper = new WeakMap(), _$collapseSlot = new WeakMap(), _$collapseWrapper = new WeakMap(), _onPreviewSlotChange = new WeakMap(), _onInfoSlotChange = new WeakMap(), _onCollapseSlotChange = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -20,28 +23,120 @@ defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$collapseSlot
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _$previewSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$previewWrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$infoSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$infoWrapper, {
+      writable: true,
+      value: void 0
+    });
+
     _classPrivateFieldInitSpec(this, _$collapseSlot, {
       writable: true,
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _$collapseWrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onPreviewSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$previewWrapper), 'empty', _classPrivateFieldGet(this, _$previewSlot).assignedElements().length === 0);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInfoSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$infoWrapper), 'empty', _classPrivateFieldGet(this, _$infoSlot).assignedElements().length === 0);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCollapseSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$collapseWrapper), 'empty', _classPrivateFieldGet(this, _$collapseSlot).assignedElements().length === 0);
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
 
+    _classPrivateFieldSet(this, _$previewSlot, shadowRoot.querySelector('slot[name="preview"]'));
+
+    _classPrivateFieldSet(this, _$infoSlot, shadowRoot.querySelector('slot[name="info"]'));
+
     _classPrivateFieldSet(this, _$collapseSlot, shadowRoot.querySelector('slot[name="collapse"]'));
+
+    _classPrivateFieldSet(this, _$previewWrapper, shadowRoot.querySelector('#preview'));
+
+    _classPrivateFieldSet(this, _$infoWrapper, shadowRoot.querySelector('#info'));
+
+    _classPrivateFieldSet(this, _$collapseWrapper, shadowRoot.querySelector('#collapse'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$previewSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onPreviewSlotChange));
+
+    _classPrivateFieldGet(this, _$infoSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onInfoSlotChange));
+
+    _classPrivateFieldGet(this, _$collapseSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onCollapseSlotChange));
+
+    _classPrivateFieldGet(this, _onPreviewSlotChange).call(this);
+
+    _classPrivateFieldGet(this, _onInfoSlotChange).call(this);
+
+    _classPrivateFieldGet(this, _onCollapseSlotChange).call(this);
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$previewSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onPreviewSlotChange));
+
+    _classPrivateFieldGet(this, _$infoSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onInfoSlotChange));
+
+    _classPrivateFieldGet(this, _$collapseSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onCollapseSlotChange));
   }
 
   static get observedAttributes() {
-    return ['caption'];
+    return ['caption', 'collapsed', 'size'];
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'caption':
         {
-          _classPrivateFieldGet(this, _$caption).textContent = newVal;
+          updateAttribute(_classPrivateFieldGet(this, _$caption), 'text', newVal);
+          break;
+        }
+
+      case 'collapsed':
+        {
+          updateBooleanAttribute(this, 'collapsed', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'size':
+        {
+          assertSize(newVal);
+          updateAttribute(_classPrivateFieldGet(this, _$caption), 'type', newVal);
+          updateAttribute(_classPrivateFieldGet(this, _$caption), 'level', getTitleLevelFromType(newVal));
           break;
         }
     }
@@ -63,6 +158,14 @@ defineCustomElement('sinch-segment', (_$caption = new WeakMap(), _$collapseSlot
     return getBooleanAttribute(this, 'collapsed');
   }
 
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', 'm');
+  }
+
+  set size(value) {
+    updateLiteralAttribute(this, sizeValues, 'size', value);
+  }
+
   get collapseButtonRect() {
     const $collapseButton = _classPrivateFieldGet(this, _$collapseSlot).assignedElements()[0];
 

package/segment/types.d.ts

@@ -1,12 +1,16 @@
 import type { TRect, TSinchElementReact } from '../types';
+export declare type TSinchSegmentSize = 'l' | 'm' | 's';
 export declare type TSinchSegmentElement = HTMLElement & {
     caption: string;
     collapsed: boolean;
+    size: TSinchSegmentSize;
     readonly collapseButtonRect: TRect | null;
     setAttribute(name: 'caption', value: string): void;
     setAttribute(name: 'collapsed', value: ''): void;
+    setAttribute(name: 'size', value: TSinchSegmentSize): void;
 };
 export declare type TSinchSegmentReact = TSinchElementReact<TSinchSegmentElement> & {
     caption: string;
     collapsed?: boolean;
+    size?: TSinchSegmentSize;
 };

package/segment/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TSinchSegmentSize } from './types';
+export declare const sizeValues: readonly TSinchSegmentSize[];
+declare type TAssertSize = (value: string | null) => asserts value is TSinchSegmentSize;
+export declare const assertSize: TAssertSize;
+export {};

package/segment/utils.js

@@ -0,0 +1,6 @@
+export const sizeValues = ['l', 'm', 's'];
+export const assertSize = value => {
+  if (value === null || !sizeValues.includes(value)) {
+    throw new Error(`sinch-segment: invalid size attribute: ${value}`);
+  }
+};

package/select/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import '../dropdown';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative;--sinch-popover-expand-width:1}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:4px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#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)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox-body{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative;--sinch-popover-expand-width:1}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#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="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _$sh = new WeakMap(), _createElement = new WeakSet(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), class extends NectaryElement {

package/spinner/types.d.ts

@@ -1,6 +1,5 @@
 import type { TSinchElementReact } from '../types';
-import type { spinnerTypes } from './utils';
-export declare type TSinchSpinnerType = typeof spinnerTypes[number];
+export declare type TSinchSpinnerType = 'large' | 'medium' | 'small';
 export declare type TSinchSpinnerElement = HTMLElement & {
     type: TSinchSpinnerType;
     setAttribute(name: 'type', value: TSinchSpinnerType): void;

package/spinner/utils.d.ts

@@ -1 +1,2 @@
-export declare const spinnerTypes: readonly ["large", "medium", "small"];
+import type { TSinchSpinnerType } from './types';
+export declare const spinnerTypes: readonly TSinchSpinnerType[];

package/table-cell/types.d.ts

@@ -1,10 +1,9 @@
 import type { TSinchElementReact } from '../types';
-import type { alignValues } from './utils';
-export declare type TAlignType = typeof alignValues[number];
+export declare type TSinchTableAlignType = 'start' | 'center' | 'end';
 export declare type TSinchTableCellElement = HTMLElement & {
-    align: TAlignType;
-    setAttribute(name: 'align', value: TAlignType): void;
+    align: TSinchTableAlignType;
+    setAttribute(name: 'align', value: TSinchTableAlignType): void;
 };
 export declare type TSinchTableCellReact = TSinchElementReact<TSinchTableCellElement> & {
-    align?: TAlignType;
+    align?: TSinchTableAlignType;
 };

package/table-cell/utils.d.ts

@@ -1 +1,2 @@
-export declare const alignValues: readonly ["start", "center", "end"];
+import type { TSinchTableAlignType } from './types';
+export declare const alignValues: readonly TSinchTableAlignType[];

package/table-head-cell/types.d.ts

@@ -1,15 +1,15 @@
-import type { TAlignType } from '../table-cell/types';
+import type { TSinchTableAlignType } from '../table-cell/types';
 import type { TSinchElementReact } from '../types';
 export declare type TSinchTableHeaderCellElement = HTMLElement & {
     text: string | null;
-    align: TAlignType;
+    align: TSinchTableAlignType;
     fit: boolean;
     setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'align', value: TAlignType): void;
+    setAttribute(name: 'align', value: TSinchTableAlignType): void;
     setAttribute(name: 'fit', value: ''): void;
 };
 export declare type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCellElement> & {
     text?: string;
     fit?: boolean;
-    align?: TAlignType;
+    align?: TSinchTableAlignType;
 };

package/tag/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;position:relative;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:100%;height:24px;box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400);--sinch-size-icon:16px}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px;--sinch-size-icon:14px}#text{text-overflow:ellipsis;white-space:nowrap;overflow:auto;flex:1}</style><div id="wrapper"><slot name="icon"></slot><span id="text"></span><slot name="close"></slot></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400);--sinch-size-icon:16px}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px;--sinch-size-icon:14px}#text{text-overflow:ellipsis;white-space:nowrap;overflow:auto;flex:1}</style><div id="wrapper"><slot name="icon"></slot><span id="text"></span><slot name="close"></slot></div>';
 import { categoryValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/tag/types.d.ts

@@ -1,6 +1,5 @@
 import type { TSinchElementReact } from '../types';
-import type { categoryValues } from './utils';
-export declare type TSinchTagCategory = typeof categoryValues[number];
+export declare type TSinchTagCategory = 'candy' | 'bolt' | 'aqua' | 'grass' | 'berry' | 'orange' | 'night' | 'mud' | 'dirt';
 export declare type TSinchTagElement = HTMLElement & {
     category: TSinchTagCategory | null;
     text: string;

package/tag/utils.d.ts

@@ -1 +1,2 @@
-export declare const categoryValues: readonly ["candy", "bolt", "aqua", "grass", "berry", "orange", "night", "mud", "dirt"];
+import type { TSinchTagCategory } from './types';
+export declare const categoryValues: readonly TSinchTagCategory[];

package/text/index.js

@@ -15,7 +15,6 @@ defineCustomElement('sinch-text', class extends NectaryElement {
 
   connectedCallback() {
     this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
-    assertType(this.getAttribute('type'));
   }
 
   get type() {

package/text/types.d.ts

@@ -1,6 +1,5 @@
 import type { TSinchElementReact } from '../types';
-import type { typeValues } from './utils';
-export declare type TSinchTextType = typeof typeValues[number];
+export declare type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
 export declare type TSinchTextElement = HTMLElement & {
     type: TSinchTextType;
     inline: boolean;

package/text/utils.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchTextType } from './types';
-export declare const typeValues: readonly ["m", "s", "xs", "xxs"];
+export declare const typeValues: readonly TSinchTextType[];
 declare type TAssertType = (value: string | null) => asserts value is TSinchTextType;
 export declare const assertType: TAssertType;
 export {};

package/textarea/index.js

@@ -8,7 +8,7 @@ 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, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } 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%;margin:2px 0;padding:8px 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);resize:none}#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)}:host([resizable]:not([resizable=false])) #input{resize:vertical}: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><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+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:var(--sinch-shape-radius-s);width:100%;margin:2px 0;padding:8px 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);resize:none}#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)}:host([resizable]:not([resizable=false])) #input{resize:vertical}: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><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-textarea', (_$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 {

package/theme.css

@@ -72,6 +72,11 @@
   --sinch-color-orange-200: #FFD4B3;
   --sinch-color-bolt-400: #FFBE3C;
   --sinch-color-bolt-200: #FFE6B3;
+  --sinch-color-background-grey: #FAFAFA;
+  --sinch-color-background-green: #DCEDE1;
+  --sinch-color-background-blue: #DEF2FF;
+  --sinch-color-background-yellow: #FCECCB;
+  --sinch-color-background-white: #FFFFFF;
   --sinch-color-transparent: transparent;
 
   /* Typography */
@@ -87,6 +92,18 @@
   --sinch-font-text-xs: 400 12px/20px var(--sinch-font-family);
   --sinch-font-text-xxs: 400 10px/16px var(--sinch-font-family);
 
+  /* Shapes */
+  --sinch-shape-radius-xs: 2px;
+  --sinch-shape-radius-s: 4px;
+  --sinch-shape-radius-m: 8px;
+  --sinch-shape-radius-l: 12px;
+
+  /* Elevation */
+  --sinch-elevation-level-0: 0 0 0 0 rgba(10, 39, 61, 0.1);
+  --sinch-elevation-level-1: 1px 2px 6px rgba(10, 39, 61, 0.1);
+  --sinch-elevation-level-2: 1px 4px 8px rgba(10, 39, 61, 0.1);
+  --sinch-elevation-level-3: 1px 6px 12px rgba(10, 39, 61, 0.15);
+
   /* Deprecated */
   --sinch-font-hero: 700 56px/72px var(--sinch-font-family);
   --sinch-font-body: 400 16px/24px var(--sinch-font-family);

package/title/index.js

@@ -30,8 +30,6 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
 
   connectedCallback() {
     this.setAttribute('role', 'heading');
-    assertLevel(this.getAttribute('level'));
-    assertType(this.getAttribute('type'));
   }
 
   get text() {

package/title/types.d.ts

@@ -1,7 +1,6 @@
 import type { TSinchElementReact } from '../types';
-import type { levelValues, typeValues } from './utils';
-export declare type TSinchTitleType = typeof typeValues[number];
-export declare type TSinchTitleLevel = typeof levelValues[number];
+export declare type TSinchTitleType = 'xl' | 'l' | 'm' | 's' | 'xs';
+export declare type TSinchTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
 export declare type TSinchTitleElement = HTMLElement & {
     text: string;
     type: TSinchTitleType;

package/title/utils.d.ts

@@ -1,8 +1,9 @@
 import type { TSinchTitleLevel, TSinchTitleType } from './types';
-export declare const typeValues: readonly ["xl", "l", "m", "s", "xs"];
-export declare const levelValues: readonly ["1", "2", "3", "4", "5", "6"];
+export declare const typeValues: readonly TSinchTitleType[];
+export declare const levelValues: readonly TSinchTitleLevel[];
 declare type TAssertLevel = (value: string | null) => asserts value is TSinchTitleLevel;
-declare type TAssertType = (value: string | null) => asserts value is TSinchTitleType;
 export declare const assertLevel: TAssertLevel;
+declare type TAssertType = (value: string | null) => asserts value is TSinchTitleType;
 export declare const assertType: TAssertType;
+export declare const getTitleLevelFromType: (type: TSinchTitleType) => TSinchTitleLevel;
 export {};

package/title/utils.js

@@ -9,4 +9,25 @@ export const assertType = value => {
   if (value === null || !typeValues.includes(value)) {
     throw new Error(`sinch-title: invalid type attribute: ${value}`);
   }
+};
+export const getTitleLevelFromType = type => {
+  switch (type) {
+    case 'xl':
+      return '1';
+
+    case 'l':
+      return '2';
+
+    case 'm':
+      return '3';
+
+    case 's':
+      return '4';
+
+    case 'xs':
+      return '5';
+
+    default:
+      throw new Error(`sinch-title: invalid type value: ${type}`);
+  }
 };

package/toggle/index.js

@@ -8,7 +8,7 @@ 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, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);text-align:initial}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#checkbox{all:initial;display:block;position:absolute;left:0;top:0;width:40px;height:20px;cursor:pointer;pointer-events:initial}#checkbox:disabled{cursor:initial}#knob-container{position:relative;box-sizing:border-box;align-self:center;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);overflow:hidden}:host([checked]:not([checked=false])) #knob-container{background-color:var(--sinch-color-tropical-500)}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);transform:translateX(0);transition:transform .1s ease-in-out}:host([checked]:not([checked=false])) #knob{transform:translateX(20px)}:host([small]:not([small=false])) #knob{width:12px;height:12px}:host([small]:not([small=false])[checked]:not([checked=false])) #knob{transform:translateX(16px)}#knob::after,#knob::before{color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}:host([disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-snow-700)}:host([checked]:not([checked=false])[disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><div id="knob-container"><div id="knob"></div><input id="checkbox" type="checkbox"></div><label for="checkbox" id="label"></label></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);text-align:initial}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#checkbox{all:initial;display:block;position:absolute;left:0;top:0;width:40px;height:20px;cursor:pointer;pointer-events:initial}#checkbox:disabled{cursor:initial}#knob-container{position:relative;box-sizing:border-box;align-self:center;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);box-shadow:var(--sinch-elevation-level-1);overflow:hidden}:host([checked]:not([checked=false])) #knob-container{background-color:var(--sinch-color-tropical-500)}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);transform:translateX(0);transition:transform .1s ease-in-out}:host([checked]:not([checked=false])) #knob{transform:translateX(20px)}:host([small]:not([small=false])) #knob{width:12px;height:12px}:host([small]:not([small=false])[checked]:not([checked=false])) #knob{transform:translateX(16px)}#knob::after,#knob::before{color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}:host([disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-snow-700)}:host([checked]:not([checked=false])[disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><div id="knob-container"><div id="knob"></div><input id="checkbox" type="checkbox"></div><label for="checkbox" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {

package/tooltip/index.js

@@ -1,5 +1,5 @@
 import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect, NectaryElement } 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: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 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:var(--sinch-shape-radius-xs);top:-8px;left:50%;transform:translateX(-50%) translateY(-100%);word-break:break-word}#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>';
 import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/tooltip/types.d.ts

@@ -1,6 +1,5 @@
 import type { TRect, TSinchElementReact } from '../types';
-import type { orientationValues } from './utils';
-export declare type TSinchTooltipOrientation = typeof orientationValues[number];
+export declare type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export declare type TSinchTooltipElement = HTMLElement & {
     text: string;
     width: number | null;

package/tooltip/utils.d.ts

@@ -1 +1,2 @@
-export declare const orientationValues: readonly ["top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"];
+import type { TSinchTooltipOrientation } from './types';
+export declare const orientationValues: readonly TSinchTooltipOrientation[];

package/utils.d.ts

@@ -41,4 +41,8 @@ export declare const getFirstCsvValue: (acc: string) => string | null;
 export declare const getRect: (el: Element) => TRect;
 export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
 export declare const getCssVar: (element: Element, variableName: string) => string | null;
+export declare const throttleAnimationFrame: (cb: (...args: any[]) => void) => {
+    fn: (...args: any[]) => void;
+    cancel: () => void;
+};
 export {};

package/utils.js

@@ -56,13 +56,13 @@ export const getBooleanAttribute = ($element, attrName) => {
   return isAttrTrue($element.getAttribute(attrName));
 };
 export const updateBooleanAttribute = ($element, attrName, attrValue) => {
-  const isCurrentValueTrue = getBooleanAttribute($element, attrName);
+  const currentAttrValue = $element.getAttribute(attrName);
 
   if (attrValue === true) {
-    if (!isCurrentValueTrue) {
+    if (!isAttrTrue(currentAttrValue)) {
       $element.setAttribute(attrName, '');
     }
-  } else if (isCurrentValueTrue) {
+  } else if (currentAttrValue !== null) {
     $element.removeAttribute(attrName);
   }
 };
@@ -202,4 +202,35 @@ export const setClass = (elem, name, isSet) => {
 export const getCssVar = (element, variableName) => {
   const result = getComputedStyle(element).getPropertyValue(variableName);
   return result === '' ? null : result;
-};
+};
+
+const throttle = (delayFn, cancelFn) => cb => {
+  let id = null;
+  let fnArgs;
+
+  const delayCallback = () => {
+    id = null;
+    cb(fnArgs);
+  };
+
+  return {
+    fn: function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      fnArgs = args;
+
+      if (id === null) {
+        id = delayFn(delayCallback);
+      }
+    },
+    cancel: () => {
+      if (id !== null) {
+        cancelFn(id);
+      }
+    }
+  };
+};
+
+export const throttleAnimationFrame = throttle(global.requestAnimationFrame, global.cancelAnimationFrame);