@nectary/components 0.27.0 → 0.29.0

package/card-button/types.d.ts

@@ -0,0 +1,14 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchCardButtonElement = HTMLElement & {
+    text: string;
+    disabled: boolean;
+    focus(): void;
+    blur(): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchCardButtonReact = TSinchElementReact<TSinchCardButtonElement> & {
+    text: string;
+    'aria-label': string;
+    disabled?: boolean;
+};

package/card-button/types.js

@@ -0,0 +1 @@
+export {};

package/card-container/index.d.ts

@@ -1,6 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchCardContainerElement = HTMLElement & {};
-export declare type TSinchCardContainerReact = TSinchElementReact<TSinchCardContainerElement> & {};
+import type { TSinchCardContainerElement, TSinchCardContainerReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/card-container/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchCardContainerElement = HTMLElement;
+export declare type TSinchCardContainerReact = TSinchElementReact<TSinchCardContainerElement>;

package/card-container/types.js

@@ -0,0 +1 @@
+export {};

package/card-link/index.d.ts

@@ -1,21 +1,5 @@
 import '../icons/arrow-forward';
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent, MouseEvent } from 'react';
-export declare type TSinchCardLinkElement = HTMLElement & {
-    text: string;
-    href: string;
-    disabled: boolean;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchCardLinkReact = TSinchElementReact<TSinchCardLinkElement> & {
-    text: string;
-    href: string;
-    disabled?: boolean;
-    onClick?: (e: MouseEvent<TSinchCardLinkElement>) => void;
-    onFocus?: (e: FocusEvent<TSinchCardLinkElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchCardLinkElement>) => void;
-};
+import type { TSinchCardLinkElement, TSinchCardLinkReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/card-link/types.d.ts

@@ -0,0 +1,16 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchCardLinkElement = HTMLElement & {
+    text: string;
+    href: string;
+    disabled: boolean;
+    focus(): void;
+    blur(): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'href', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchCardLinkReact = TSinchElementReact<TSinchCardLinkElement> & {
+    text: string;
+    href: string;
+    disabled?: boolean;
+};

package/card-link/types.js

@@ -0,0 +1 @@
+export {};

package/chat/index.d.ts

@@ -1,6 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchChatElement = HTMLElement & {};
-export declare type TSinchChatReact = TSinchElementReact<TSinchChatElement> & {};
+import type { TSinchChatElement, TSinchChatReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/chat/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChatElement = HTMLElement;
+export declare type TSinchChatReact = TSinchElementReact<TSinchChatElement>;

package/chat/types.js

@@ -0,0 +1 @@
+export {};

package/chat-avatar/index.d.ts

@@ -1,14 +1,5 @@
 import '../avatar';
-import type { TSinchAvatarElement, TSinchAvatarReact } from '../avatar';
-import type { TSinchElementReact } from '../types';
-export declare type TSinchChatAvatarElement = HTMLElement & {
-    alt: TSinchAvatarElement['alt'];
-    src: TSinchAvatarElement['src'];
-};
-export declare type TSinchChatAvatarReact = TSinchElementReact<TSinchChatAvatarElement> & {
-    alt: TSinchAvatarReact['alt'];
-    src?: TSinchAvatarReact['src'];
-};
+import type { TSinchChatAvatarElement, TSinchChatAvatarReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/chat-avatar/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchAvatarElement, TSinchAvatarReact } from '../avatar/types';
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChatAvatarElement = HTMLElement & {
+    alt: TSinchAvatarElement['alt'];
+    src: TSinchAvatarElement['src'];
+    setAttribute(name: 'alt', value: string): void;
+    setAttribute(name: 'src', value: string): void;
+};
+export declare type TSinchChatAvatarReact = TSinchElementReact<TSinchChatAvatarElement> & {
+    alt: TSinchAvatarReact['alt'];
+    src?: TSinchAvatarReact['src'];
+};

package/chat-avatar/types.js

@@ -0,0 +1 @@
+export {};

package/chat-block/index.d.ts

@@ -1,17 +1,4 @@
-import type { TSinchChatBubbleType } from '../chat-bubble';
-import type { TSinchElementReact } from '../types';
-export declare type TSinchChatBlockElement = HTMLElement & {
-    type: TSinchChatBubbleType | null;
-    firstName: string | null;
-    lastName: string | null;
-    timestamp: string | null;
-};
-export declare type TSinchChatBlockReact = TSinchElementReact<TSinchChatBlockElement> & {
-    type: TSinchChatBubbleType;
-    firstName?: string;
-    lastName?: string;
-    timestamp?: string;
-};
+import type { TSinchChatBlockElement, TSinchChatBlockReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/chat-block/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchChatBubbleType } from '../chat-bubble/types';
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChatBlockElement = HTMLElement & {
+    type: TSinchChatBubbleType | null;
+    firstName: string | null;
+    lastName: string | null;
+    timestamp: string | null;
+    setAttribute(name: 'type', value: TSinchChatBubbleType): void;
+    setAttribute(name: 'firstName', value: string): void;
+    setAttribute(name: 'lastName', value: string): void;
+    setAttribute(name: 'timestamp', value: string): void;
+};
+export declare type TSinchChatBlockReact = TSinchElementReact<TSinchChatBlockElement> & {
+    type: TSinchChatBubbleType;
+    firstName?: string;
+    lastName?: string;
+    timestamp?: string;
+};

package/chat-block/types.js

@@ -0,0 +1 @@
+export {};

package/chat-bubble/index.d.ts

@@ -2,20 +2,7 @@ import '../icons/query-builder';
 import '../icons/check';
 import '../icons/done-all';
 import '../icons/error-outline';
-import { typeValues } from './utils';
-import type { TSinchElementReact } from '../types';
-declare const statusValues: readonly ["sending", "sent", "received", "seen", "error"];
-export declare type TSinchChatBubbleType = typeof typeValues[number];
-export declare type TSinchChatBubbleStatus = typeof statusValues[number];
-export declare type TSinchChatBubbleElement = HTMLElement & {
-    readonly type: TSinchChatBubbleType | null;
-    text: string;
-    status: TSinchChatBubbleStatus | null;
-};
-export declare type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
-    text: string;
-    status?: TSinchChatBubbleStatus;
-};
+import type { TSinchChatBubbleElement, TSinchChatBubbleReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -26,4 +13,3 @@ declare global {
         'sinch-chat-bubble': TSinchChatBubbleElement;
     }
 }
-export {};

package/chat-bubble/index.js

@@ -13,8 +13,7 @@ import '../icons/done-all';
 import '../icons/error-outline';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;padding:12px 16px;border-radius:16px;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#wrapper{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}#text{font:var(--sinch-font-body);color:var(--sinch-color-stormy-500)}sinch-icon-check,sinch-icon-done-all,sinch-icon-error-outline,sinch-icon-query-builder{display:none;position:absolute;right:16px;bottom:12px;--sinch-size-icon:16px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([status=sending]) sinch-icon-query-builder{display:block}:host([status=sent]) sinch-icon-check{display:block}:host([status=received]) sinch-icon-done-all{display:block}:host([status=seen]) sinch-icon-done-all{display:block;--sinch-color-icon:var(--sinch-color-success-500)}:host([status=error]) sinch-icon-error-outline{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><span id="text"></span><sinch-icon-query-builder></sinch-icon-query-builder><sinch-icon-check></sinch-icon-check><sinch-icon-done-all></sinch-icon-done-all><sinch-icon-error-outline></sinch-icon-error-outline></div>';
-import { typeValues } from './utils';
-const statusValues = ['sending', 'sent', 'received', 'seen', 'error'];
+import { statusValues, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-bubble', (_$text = new WeakMap(), class extends NectaryElement {

package/chat-bubble/types.d.ts

@@ -0,0 +1,15 @@
+import type { TSinchElementReact } from '../types';
+import type { statusValues, typeValues } from './utils';
+export declare type TSinchChatBubbleType = typeof typeValues[number];
+export declare type TSinchChatBubbleStatus = typeof statusValues[number];
+export declare type TSinchChatBubbleElement = HTMLElement & {
+    readonly type: TSinchChatBubbleType | null;
+    text: string;
+    status: TSinchChatBubbleStatus | null;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'status', value: TSinchChatBubbleStatus): void;
+};
+export declare type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
+    text: string;
+    status?: TSinchChatBubbleStatus;
+};

package/chat-bubble/types.js

@@ -0,0 +1 @@
+export {};

package/chat-bubble/utils.d.ts

@@ -1 +1,2 @@
 export declare const typeValues: readonly ["customer", "agent", "agent-prev"];
+export declare const statusValues: readonly ["sending", "sent", "received", "seen", "error"];

package/chat-bubble/utils.js

@@ -1 +1,2 @@
-export const typeValues = ['customer', 'agent', 'agent-prev'];
+export const typeValues = ['customer', 'agent', 'agent-prev'];
+export const statusValues = ['sending', 'sent', 'received', 'seen', 'error'];

package/checkbox/index.d.ts

@@ -1,25 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
-export declare type TSinchCheckboxElement = HTMLElement & {
-    checked: boolean;
-    indeterminate: boolean;
-    disabled: boolean;
-    invalid: boolean;
-    text: string | null;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
-    checked?: boolean;
-    indeterminate?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    text?: string;
-    'aria-label': string;
-    onChange: (event: SyntheticEvent<TSinchCheckboxElement, CustomEvent<boolean>>) => void;
-    onFocus?: (e: FocusEvent<TSinchCheckboxElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchCheckboxElement>) => void;
-};
+import type { TSinchCheckboxElement, TSinchCheckboxReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/checkbox/index.js

@@ -7,7 +7,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 } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-800);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-stormy-200);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:2px;pointer-events:none;background-color:var(--sinch-color-checkbox-background);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border) inset;transition:background-color .1s linear}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-body);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-checked) inset}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus) inset}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover) inset}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active) inset}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled) inset}#checkbox:focus:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus-checked) inset}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover-checked) inset}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active-checked) inset}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled-checked) inset}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/> <svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg> <svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -116,14 +116,17 @@ defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new We
 
       case 'checked':
         {
-          _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
-          updateAttribute(this, 'aria-checked', isAttrTrue(newVal));
+          const isChecked = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$input).checked = isChecked;
+          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
           break;
         }
 
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$input).disabled = isAttrTrue(newVal);
+          const isDisabled = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
     }

package/checkbox/types.d.ts

@@ -0,0 +1,26 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchCheckboxElement = HTMLElement & {
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    text: string | null;
+    focus(): void;
+    blur(): void;
+    addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'indeterminate', value: ''): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'invalid', value: ''): void;
+    setAttribute(name: 'text', value: string): void;
+};
+export declare type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    text?: string;
+    'aria-label': string;
+    onChange: (event: SyntheticEvent<TSinchCheckboxElement, CustomEvent<boolean>>) => void;
+};

package/checkbox/types.js

@@ -0,0 +1 @@
+export {};

package/dialog/index.d.ts

@@ -1,18 +1,6 @@
 import '../icon-button';
 import '../icons/close';
-import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
-export declare type TSinchDialogElement = HTMLElement & {
-    caption: string;
-    readonly dialogRect: TRect;
-    readonly closeButtonRect: TRect;
-};
-export declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
-    open: boolean;
-    caption: string;
-    'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchDialogElement, CustomEvent<void>>) => void;
-};
+import type { TSinchDialogElement, TSinchDialogReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/dialog/types.d.ts

@@ -0,0 +1,15 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchDialogElement = HTMLElement & {
+    caption: string;
+    readonly dialogRect: TRect;
+    readonly closeButtonRect: TRect;
+    addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    setAttribute(name: 'caption', value: string): void;
+};
+export declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
+    open: boolean;
+    caption: string;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchDialogElement, CustomEvent<void>>) => void;
+};

package/dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dropdown/index.d.ts

@@ -1,29 +1,5 @@
-import type { TRect, TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
-declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
-export declare type TSinchDropdownOrientation = typeof orientationValues[number];
-export declare type TSinchDropdownElement = HTMLElement & {
-    open: boolean;
-    multiple: boolean;
-    orientation: TSinchDropdownOrientation;
-    value: string;
-    maxVisibleItems: number | null;
-    readonly dropdownRect: TRect;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownElement> & {
-    open: boolean;
-    multiple?: boolean;
-    orientation?: TSinchDropdownOrientation;
-    value: string;
-    maxVisibleItems?: number;
-    'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchDropdownElement, CustomEvent<void>>) => void;
-    onChange: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
-    onFocus?: (e: FocusEvent<TSinchDropdownElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchDropdownElement>) => void;
-};
+import '../popover';
+import type { TSinchDropdownElement, TSinchDropdownReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -34,4 +10,3 @@ declare global {
         'sinch-dropdown': TSinchDropdownElement;
     }
 }
-export {};

package/dropdown/index.js

@@ -11,9 +11,10 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
+import { orientationValues } from '../popover/utils';
+import '../popover';
 import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}sinch-popover{width:100%}</style><sinch-popover><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
-const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/dropdown/types.d.ts

@@ -0,0 +1,30 @@
+import type { TSinchPopoverOrientation } from '../popover/types';
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchDropdownElement = HTMLElement & {
+    open: boolean;
+    multiple: boolean;
+    orientation: TSinchPopoverOrientation;
+    value: string;
+    maxVisibleItems: number | null;
+    readonly dropdownRect: TRect;
+    focus(): void;
+    blur(): void;
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    setAttribute(name: 'open', value: ''): void;
+    setAttribute(name: 'multiple', value: ''): void;
+    setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'maxvisibleitems', value: string): void;
+};
+export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownElement> & {
+    open: boolean;
+    multiple?: boolean;
+    orientation?: TSinchPopoverOrientation;
+    value: string;
+    maxVisibleItems?: number;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchDropdownElement, CustomEvent<void>>) => void;
+    onChange: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
+};

package/dropdown/types.js

@@ -0,0 +1 @@
+export {};

package/dropdown-checkbox-option/index.d.ts

@@ -1,17 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchDropdownCheckboxOptionElement = HTMLElement & {
-    value: string;
-    text: string;
-    checked: boolean;
-    selected: boolean;
-    disabled: boolean;
-};
-export declare type TSinchDropdownCheckboxOptionReact = TSinchElementReact<TSinchDropdownCheckboxOptionElement> & {
-    value: string;
-    text: string;
-    disabled?: boolean;
-    'aria-label': string;
-};
+import type { TSinchDropdownCheckboxOptionElement, TSinchDropdownCheckboxOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/dropdown-checkbox-option/index.js

@@ -7,7 +7,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 } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:4px 12px 4px 6px;align-items:center;gap:6px;user-select:none;cursor:pointer}#text{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-container{position:relative;width:32px;height:32px}#icon-container::before{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:2px;pointer-events:none;background-color:var(--sinch-color-snow-100);box-shadow:0 0 0 2px var(--sinch-color-stormy-300) inset;transition:background-color .1s linear}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-color-snow-100)}:host([checked]:not([checked=false])) #icon-container::before{background-color:var(--sinch-color-tropical-500);box-shadow:0 0 0 2px var(--sinch-color-tropical-500) inset}:host([checked]:not([checked=false])) #icon-checkmark{opacity:1}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial}:host([disabled]:not([disabled=false])) #icon-container::before{box-shadow:0 0 0 2px var(--sinch-color-stormy-100) inset}@media (prefers-reduced-motion){#icon-checkmark,#icon-container::before{transition:none}}</style><div id="wrapper"><div id="icon-container"><svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z"/></svg></div><span id="text"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -48,7 +48,7 @@ defineCustomElement('sinch-dropdown-checkbox-option', (_$text = new WeakMap(), c
 
       case 'checked':
         {
-          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
         }
     }
   }

package/dropdown-checkbox-option/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchDropdownCheckboxOptionElement = HTMLElement & {
+    value: string;
+    text: string;
+    checked: boolean;
+    selected: boolean;
+    disabled: boolean;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchDropdownCheckboxOptionReact = TSinchElementReact<TSinchDropdownCheckboxOptionElement> & {
+    value: string;
+    text: string;
+    disabled?: boolean;
+    'aria-label': string;
+};

package/dropdown-checkbox-option/types.js

@@ -0,0 +1 @@
+export {};

package/dropdown-radio-option/index.d.ts

@@ -1,17 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchDropdownRadioOptionElement = HTMLElement & {
-    value: string;
-    text: string;
-    checked: boolean;
-    selected: boolean;
-    disabled: boolean;
-};
-export declare type TSinchDropdownRadioOptionReact = TSinchElementReact<TSinchDropdownRadioOptionElement> & {
-    value: string;
-    text: string;
-    disabled?: boolean;
-    'aria-label': string;
-};
+import type { TSinchDropdownRadioOptionElement, TSinchDropdownRadioOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/dropdown-radio-option/index.js

@@ -7,7 +7,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 } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:4px 12px 4px 6px;align-items:center;gap:6px;user-select:none;cursor:pointer}#text{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-container{position:relative;width:32px;height:32px}#icon-container::before{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-snow-100);box-shadow:0 0 0 2px var(--sinch-color-stormy-300) 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-tropical-500);pointer-events:none}:host([checked]:not([checked=false])) #icon-container::before{box-shadow:0 0 0 2px var(--sinch-color-tropical-500) inset}:host([checked]:not([checked=false])) #icon-knob{opacity:1}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial}:host([disabled]:not([disabled=false])) #icon-container::before{box-shadow:0 0 0 2px var(--sinch-color-stormy-100) inset}@media (prefers-reduced-motion){#icon-container::before,#icon-knob{transition:none}}</style><div id="wrapper"><div id="icon-container"><div id="icon-knob"></div></div><span id="text"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -48,7 +48,7 @@ defineCustomElement('sinch-dropdown-radio-option', (_$text = new WeakMap(), clas
 
       case 'checked':
         {
-          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
         }
     }
   }

package/dropdown-radio-option/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchDropdownRadioOptionElement = HTMLElement & {
+    value: string;
+    text: string;
+    checked: boolean;
+    selected: boolean;
+    disabled: boolean;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchDropdownRadioOptionReact = TSinchElementReact<TSinchDropdownRadioOptionElement> & {
+    value: string;
+    text: string;
+    disabled?: boolean;
+    'aria-label': string;
+};

package/dropdown-radio-option/types.js

@@ -0,0 +1 @@
+export {};