@nectary/components 0.13.0 → 0.15.0

package/icon/warning-amber/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M12 5.99 19.53 19H4.47L12 5.99ZM2.74 18c-.77 1.33.19 3 1.73 3h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18ZM11 11v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1Zm0 5h2v2h-2v-2Z"/></svg>';
+defineCustomElement('sinch-icon-warning-amber', createIconClass(templateHTML));

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

@@ -144,42 +144,42 @@ export declare const createIconClass: (templateHTML: string) => {
         readonly PROCESSING_INSTRUCTION_NODE: number;
         readonly TEXT_NODE: number;
         dispatchEvent(event: Event): boolean;
-        ariaAtomic: string;
-        ariaAutoComplete: string;
-        ariaBusy: string;
-        ariaChecked: string;
-        ariaColCount: string;
-        ariaColIndex: string;
-        ariaColSpan: string;
-        ariaCurrent: string;
-        ariaDisabled: string;
-        ariaExpanded: string;
-        ariaHasPopup: string;
-        ariaHidden: string;
-        ariaKeyShortcuts: string;
-        ariaLabel: string;
-        ariaLevel: string;
-        ariaLive: string;
-        ariaModal: string;
-        ariaMultiLine: string;
-        ariaMultiSelectable: string;
-        ariaOrientation: string;
-        ariaPlaceholder: string;
-        ariaPosInSet: string;
-        ariaPressed: string;
-        ariaReadOnly: string;
-        ariaRequired: string;
-        ariaRoleDescription: string;
-        ariaRowCount: string;
-        ariaRowIndex: string;
-        ariaRowSpan: string;
-        ariaSelected: string;
-        ariaSetSize: string;
-        ariaSort: string;
-        ariaValueMax: string;
-        ariaValueMin: string;
-        ariaValueNow: string;
-        ariaValueText: string;
+        ariaAtomic: string | null;
+        ariaAutoComplete: string | null;
+        ariaBusy: string | null;
+        ariaChecked: string | null;
+        ariaColCount: string | null;
+        ariaColIndex: string | null;
+        ariaColSpan: string | null;
+        ariaCurrent: string | null;
+        ariaDisabled: string | null;
+        ariaExpanded: string | null;
+        ariaHasPopup: string | null;
+        ariaHidden: string | null;
+        ariaKeyShortcuts: string | null;
+        ariaLabel: string | null;
+        ariaLevel: string | null;
+        ariaLive: string | null;
+        ariaModal: string | null;
+        ariaMultiLine: string | null;
+        ariaMultiSelectable: string | null;
+        ariaOrientation: string | null;
+        ariaPlaceholder: string | null;
+        ariaPosInSet: string | null;
+        ariaPressed: string | null;
+        ariaReadOnly: string | null;
+        ariaRequired: string | null;
+        ariaRoleDescription: string | null;
+        ariaRowCount: string | null;
+        ariaRowIndex: string | null;
+        ariaRowSpan: string | null;
+        ariaSelected: string | null;
+        ariaSetSize: string | null;
+        ariaSort: string | null;
+        ariaValueMax: string | null;
+        ariaValueMin: string | null;
+        ariaValueNow: string | null;
+        ariaValueText: string | null;
         animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
@@ -273,11 +273,13 @@ export declare const createIconClass: (templateHTML: string) => {
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
         onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
         onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;

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

@@ -143,42 +143,42 @@ export declare const createIllustrationClass: (templateHTML: string) => {
         readonly PROCESSING_INSTRUCTION_NODE: number;
         readonly TEXT_NODE: number;
         dispatchEvent(event: Event): boolean;
-        ariaAtomic: string;
-        ariaAutoComplete: string;
-        ariaBusy: string;
-        ariaChecked: string;
-        ariaColCount: string;
-        ariaColIndex: string;
-        ariaColSpan: string;
-        ariaCurrent: string;
-        ariaDisabled: string;
-        ariaExpanded: string;
-        ariaHasPopup: string;
-        ariaHidden: string;
-        ariaKeyShortcuts: string;
-        ariaLabel: string;
-        ariaLevel: string;
-        ariaLive: string;
-        ariaModal: string;
-        ariaMultiLine: string;
-        ariaMultiSelectable: string;
-        ariaOrientation: string;
-        ariaPlaceholder: string;
-        ariaPosInSet: string;
-        ariaPressed: string;
-        ariaReadOnly: string;
-        ariaRequired: string;
-        ariaRoleDescription: string;
-        ariaRowCount: string;
-        ariaRowIndex: string;
-        ariaRowSpan: string;
-        ariaSelected: string;
-        ariaSetSize: string;
-        ariaSort: string;
-        ariaValueMax: string;
-        ariaValueMin: string;
-        ariaValueNow: string;
-        ariaValueText: string;
+        ariaAtomic: string | null;
+        ariaAutoComplete: string | null;
+        ariaBusy: string | null;
+        ariaChecked: string | null;
+        ariaColCount: string | null;
+        ariaColIndex: string | null;
+        ariaColSpan: string | null;
+        ariaCurrent: string | null;
+        ariaDisabled: string | null;
+        ariaExpanded: string | null;
+        ariaHasPopup: string | null;
+        ariaHidden: string | null;
+        ariaKeyShortcuts: string | null;
+        ariaLabel: string | null;
+        ariaLevel: string | null;
+        ariaLive: string | null;
+        ariaModal: string | null;
+        ariaMultiLine: string | null;
+        ariaMultiSelectable: string | null;
+        ariaOrientation: string | null;
+        ariaPlaceholder: string | null;
+        ariaPosInSet: string | null;
+        ariaPressed: string | null;
+        ariaReadOnly: string | null;
+        ariaRequired: string | null;
+        ariaRoleDescription: string | null;
+        ariaRowCount: string | null;
+        ariaRowIndex: string | null;
+        ariaRowSpan: string | null;
+        ariaSelected: string | null;
+        ariaSetSize: string | null;
+        ariaSort: string | null;
+        ariaValueMax: string | null;
+        ariaValueMin: string | null;
+        ariaValueNow: string | null;
+        ariaValueText: string | null;
         animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
@@ -272,11 +272,13 @@ export declare const createIllustrationClass: (templateHTML: string) => {
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
         onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
         onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;

package/index.d.ts

@@ -48,10 +48,65 @@ import './icon/north';
 import './icon/north-east';
 import './icon/north-west';
 import './icon/open-in-new';
+import './icon/search';
 import './icon/south';
 import './icon/south-east';
 import './icon/south-west';
 import './icon/west';
+import './icon/add-alert';
+import './icon/auto-delete';
+import './icon/error';
+import './icon/error-outline';
+import './icon/notification-important';
+import './icon/attach-email';
+import './icon/attachment';
+import './icon/cloud';
+import './icon/cloud-circle';
+import './icon/cloud-done';
+import './icon/cloud-download';
+import './icon/cloud-off';
+import './icon/cloud-queue';
+import './icon/cloud-upload';
+import './icon/create-new-folder';
+import './icon/download';
+import './icon/download-done';
+import './icon/folder';
+import './icon/folder-open';
+import './icon/folder-shared';
+import './icon/request-quote';
+import './icon/rule-folder';
+import './icon/snippet-folder';
+import './icon/text-snippet';
+import './icon/topic';
+import './icon/upload';
+import './icon/app-settings-alt';
+import './icon/apps';
+import './icon/arrow-drop-down';
+import './icon/arrow-drop-down-circle';
+import './icon/arrow-drop-up';
+import './icon/arrow-left';
+import './icon/arrow-right';
+import './icon/campaign';
+import './icon/check';
+import './icon/double-arrow';
+import './icon/first-page';
+import './icon/fullscreen';
+import './icon/fullscreen-exit';
+import './icon/home-work';
+import './icon/last-page';
+import './icon/legend-toggle';
+import './icon/menu';
+import './icon/menu-open';
+import './icon/payments';
+import './icon/refresh';
+import './icon/subdirectory-arrow-left';
+import './icon/subdirectory-arrow-right';
+import './icon/switch-left';
+import './icon/switch-right';
+import './icon/unfold-less';
+import './icon/unfold-more';
+import './icon/warning';
+import './icon/warning-amber';
 import './illustration/phone-and-cat';
 import './pagination';
 import './table';
@@ -79,3 +134,5 @@ import './dialog';
 import './grid';
 import './grid-item';
 import './icon-button';
+import './search';
+import './search-option';

package/index.js

@@ -48,10 +48,65 @@ import './icon/north';
 import './icon/north-east';
 import './icon/north-west';
 import './icon/open-in-new';
+import './icon/search';
 import './icon/south';
 import './icon/south-east';
 import './icon/south-west';
 import './icon/west';
+import './icon/add-alert';
+import './icon/auto-delete';
+import './icon/error';
+import './icon/error-outline';
+import './icon/notification-important';
+import './icon/attach-email';
+import './icon/attachment';
+import './icon/cloud';
+import './icon/cloud-circle';
+import './icon/cloud-done';
+import './icon/cloud-download';
+import './icon/cloud-off';
+import './icon/cloud-queue';
+import './icon/cloud-upload';
+import './icon/create-new-folder';
+import './icon/download';
+import './icon/download-done';
+import './icon/folder';
+import './icon/folder-open';
+import './icon/folder-shared';
+import './icon/request-quote';
+import './icon/rule-folder';
+import './icon/snippet-folder';
+import './icon/text-snippet';
+import './icon/topic';
+import './icon/upload';
+import './icon/app-settings-alt';
+import './icon/apps';
+import './icon/arrow-drop-down';
+import './icon/arrow-drop-down-circle';
+import './icon/arrow-drop-up';
+import './icon/arrow-left';
+import './icon/arrow-right';
+import './icon/campaign';
+import './icon/check';
+import './icon/double-arrow';
+import './icon/first-page';
+import './icon/fullscreen';
+import './icon/fullscreen-exit';
+import './icon/home-work';
+import './icon/last-page';
+import './icon/legend-toggle';
+import './icon/menu';
+import './icon/menu-open';
+import './icon/payments';
+import './icon/refresh';
+import './icon/subdirectory-arrow-left';
+import './icon/subdirectory-arrow-right';
+import './icon/switch-left';
+import './icon/switch-right';
+import './icon/unfold-less';
+import './icon/unfold-more';
+import './icon/warning';
+import './icon/warning-amber';
 import './illustration/phone-and-cat';
 import './pagination';
 import './table';
@@ -78,4 +133,6 @@ import './icon-branded/users';
 import './dialog';
 import './grid';
 import './grid-item';
-import './icon-button';
+import './icon-button';
+import './search';
+import './search-option';

package/input/index.d.ts

@@ -1,6 +1,9 @@
 import type { TSinchElementReact } from '../types';
 import type { DOMAttributes, FocusEvent, SyntheticEvent } from 'react';
+declare const inputTypes: readonly ["text", "password"];
+export declare type TTextInputType = typeof inputTypes[number];
 export declare type TSinchInputElement = HTMLElement & {
+    type: TTextInputType;
     value: string;
     label: string;
     placeholder: string | null;
@@ -12,6 +15,7 @@ export declare type TSinchInputElement = HTMLElement & {
     blur(): void;
 };
 export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
+    type?: TTextInputType;
     value: string;
     label: string;
     placeholder?: string;
@@ -35,3 +39,4 @@ declare global {
         'sinch-input': TSinchInputElement;
     }
 }
+export {};

package/input/index.js

@@ -7,8 +7,9 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#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([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-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const inputTypes = ['text', 'password'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
@@ -115,17 +116,21 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
   }
 
   static get observedAttributes() {
-    return ['value', 'placeholder', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
-  }
-
-  get type() {
-    return 'text';
+    return ['type', 'value', 'placeholder', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
   }
 
   get nodeName() {
     return 'input';
   }
 
+  set type(value) {
+    updateAttribute(this, 'type', value);
+  }
+
+  get type() {
+    return getLiteralAttribute(this, inputTypes, 'type', 'text');
+  }
+
   set value(value) {
     updateAttribute(this, 'value', value);
   }
@@ -184,6 +189,12 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
+      case 'type':
+        {
+          updateLiteralAttribute(_classPrivateFieldGet(this, _$input), inputTypes, 'type', newVal);
+          break;
+        }
+
       case 'value':
         {
           const nextVal = newVal ?? '';

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

@@ -144,42 +144,42 @@ export declare const createLogoClass: (templateHTML: string) => {
         readonly PROCESSING_INSTRUCTION_NODE: number;
         readonly TEXT_NODE: number;
         dispatchEvent(event: Event): boolean;
-        ariaAtomic: string;
-        ariaAutoComplete: string;
-        ariaBusy: string;
-        ariaChecked: string;
-        ariaColCount: string;
-        ariaColIndex: string;
-        ariaColSpan: string;
-        ariaCurrent: string;
-        ariaDisabled: string;
-        ariaExpanded: string;
-        ariaHasPopup: string;
-        ariaHidden: string;
-        ariaKeyShortcuts: string;
-        ariaLabel: string;
-        ariaLevel: string;
-        ariaLive: string;
-        ariaModal: string;
-        ariaMultiLine: string;
-        ariaMultiSelectable: string;
-        ariaOrientation: string;
-        ariaPlaceholder: string;
-        ariaPosInSet: string;
-        ariaPressed: string;
-        ariaReadOnly: string;
-        ariaRequired: string;
-        ariaRoleDescription: string;
-        ariaRowCount: string;
-        ariaRowIndex: string;
-        ariaRowSpan: string;
-        ariaSelected: string;
-        ariaSetSize: string;
-        ariaSort: string;
-        ariaValueMax: string;
-        ariaValueMin: string;
-        ariaValueNow: string;
-        ariaValueText: string;
+        ariaAtomic: string | null;
+        ariaAutoComplete: string | null;
+        ariaBusy: string | null;
+        ariaChecked: string | null;
+        ariaColCount: string | null;
+        ariaColIndex: string | null;
+        ariaColSpan: string | null;
+        ariaCurrent: string | null;
+        ariaDisabled: string | null;
+        ariaExpanded: string | null;
+        ariaHasPopup: string | null;
+        ariaHidden: string | null;
+        ariaKeyShortcuts: string | null;
+        ariaLabel: string | null;
+        ariaLevel: string | null;
+        ariaLive: string | null;
+        ariaModal: string | null;
+        ariaMultiLine: string | null;
+        ariaMultiSelectable: string | null;
+        ariaOrientation: string | null;
+        ariaPlaceholder: string | null;
+        ariaPosInSet: string | null;
+        ariaPressed: string | null;
+        ariaReadOnly: string | null;
+        ariaRequired: string | null;
+        ariaRoleDescription: string | null;
+        ariaRowCount: string | null;
+        ariaRowIndex: string | null;
+        ariaRowSpan: string | null;
+        ariaSelected: string | null;
+        ariaSetSize: string | null;
+        ariaSort: string | null;
+        ariaValueMax: string | null;
+        ariaValueMin: string | null;
+        ariaValueNow: string | null;
+        ariaValueText: string | null;
         animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
@@ -273,11 +273,13 @@ export declare const createLogoClass: (templateHTML: string) => {
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
         onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
         onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;

package/package.json

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

package/radio-option/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, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-800);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);box-shadow:0 0 0 2px var(--sinch-color-radio-border) inset;transition:background-color .1s linear}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0%;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-checked) inset}#input:checked~#icon-knob{opacity:100%;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus) inset}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover) inset}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active) inset}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled) inset}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus-checked) inset}#input:focus:checked~#icon-knob{opacity:100%;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover-checked) inset}#input:hover:checked~#icon-knob{opacity:100%;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active-checked) inset}#input:active:checked~#icon-knob{opacity:100%;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled-checked) inset}#input:disabled:checked~#icon-knob{opacity:100%;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
+const templateHTML = '<style>:host{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-800);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);box-shadow:0 0 0 2px var(--sinch-color-radio-border) inset;transition:background-color .1s linear}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-checked) inset}#input:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus) inset}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover) inset}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active) inset}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled) inset}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus-checked) inset}#input:focus:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover-checked) inset}#input:hover:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active-checked) inset}#input:active:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled-checked) inset}#input:disabled:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
 export const isRadioOptionElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-RADIO-OPTION';
 };

package/search/index.d.ts

@@ -0,0 +1,34 @@
+import '../icon/search';
+import '../icon/close';
+import type { TRect, TSinchElementReact } from '../types';
+import type { FocusEvent, SyntheticEvent } from 'react';
+export declare type TSinchSearchElement = HTMLElement & {
+    value: string;
+    label: string | null;
+    placeholder: string | null;
+    maxVisibleItems: number | null;
+    readonly dropdownRect: TRect;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchSearchReact = TSinchElementReact<TSinchSearchElement> & {
+    value: string;
+    label?: string;
+    placeholder?: string;
+    maxVisibleItems?: number;
+    'aria-label': string;
+    'clear-aria-label': string;
+    onChange: (e: SyntheticEvent<TSinchSearchElement, CustomEvent<string>>) => void;
+    onFocus?: (e: FocusEvent<TSinchSearchElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchSearchElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-search': TSinchSearchReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-search': TSinchSearchElement;
+    }
+}