@nectary/components 0.37.0 → 0.39.0

package/accordion/types.d.ts

@@ -10,6 +10,7 @@ export declare type TSinchAccordionElement = HTMLElement & {
 export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
     multiple?: boolean;
     value: string;
+    /** @deprecated */
     onChange?: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/alert/index.js

@@ -12,7 +12,7 @@ import '../icons/report';
 import '../icons/info';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:0 16px;box-sizing:border-box;width:100%;height:48px}#text{color:var(--sinch-color-stormy-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}#text{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/card/index.d.ts

@@ -1,3 +1,5 @@
+import '../title';
+import '../text';
 import type { TSinchCardElement, TSinchCardReact } from './types';
 declare global {
     namespace JSX {

package/card/index.js

@@ -1,17 +1,19 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$text, _$label, _$caption, _$illustrationSlot, _$actionSlot, _$illustrationSlotWrapper, _onIllustrationSlotChange, _updateDisabledAttributeInChildren;
+var _$text, _$label, _$caption, _$illustrationSlot, _$illustrationSlotWrapper, _onIllustrationSlotChange;
 
 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 '../title';
+import '../text';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{margin:0;font:var(--sinch-font-title-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="caption"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{color:var(--sinch-color-stormy-300)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#description{color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap(), _$caption = new WeakMap(), _$illustrationSlot = new WeakMap(), _$actionSlot = new WeakMap(), _$illustrationSlotWrapper = new WeakMap(), _onIllustrationSlotChange = new WeakMap(), _updateDisabledAttributeInChildren = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap(), _$caption = new WeakMap(), _$illustrationSlot = new WeakMap(), _$illustrationSlotWrapper = new WeakMap(), _onIllustrationSlotChange = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -35,11 +37,6 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$actionSlot, {
-      writable: true,
-      value: void 0
-    });
-
     _classPrivateFieldInitSpec(this, _$illustrationSlotWrapper, {
       writable: true,
       value: void 0
@@ -52,15 +49,6 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
       }
     });
 
-    _classPrivateFieldInitSpec(this, _updateDisabledAttributeInChildren, {
-      writable: true,
-      value: () => {
-        for (const $el of _classPrivateFieldGet(this, _$actionSlot).assignedElements()) {
-          updateAttribute($el, 'disabled', this.getAttribute('disabled'));
-        }
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -72,21 +60,15 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
 
     _classPrivateFieldSet(this, _$illustrationSlot, shadowRoot.querySelector('slot[name="illustration"]'));
 
-    _classPrivateFieldSet(this, _$actionSlot, shadowRoot.querySelector('slot[name="action"]'));
-
     _classPrivateFieldSet(this, _$illustrationSlotWrapper, shadowRoot.querySelector('#illustration-wrapper'));
   }
 
   connectedCallback() {
     _classPrivateFieldGet(this, _$illustrationSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onIllustrationSlotChange));
-
-    _classPrivateFieldGet(this, _$actionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateDisabledAttributeInChildren));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$illustrationSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIllustrationSlotChange));
-
-    _classPrivateFieldGet(this, _$actionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateDisabledAttributeInChildren));
   }
 
   static get observedAttributes() {
@@ -109,14 +91,7 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
 
       case 'caption':
         {
-          _classPrivateFieldGet(this, _$caption).textContent = newVal;
-          break;
-        }
-
-      case 'disabled':
-        {
-          _classPrivateFieldGet(this, _updateDisabledAttributeInChildren).call(this);
-
+          updateAttribute(_classPrivateFieldGet(this, _$caption), 'text', newVal);
           break;
         }
     }

package/date-picker/index.js

@@ -20,7 +20,7 @@ import '../icons/delete-outline';
 import '../icons/today';
 import '../text';
 import { defineCustomElement, getAttribute, getReactEventHandler, getRect, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button small id="prev-year"><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button small id="prev-month"><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text type="m" emphasized id="date"></sinch-text><sinch-icon-button small id="next-month"><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button small id="next-year"><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" small><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" small><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" small><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" small><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
 import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -220,7 +220,7 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
   }
 
   static get observedAttributes() {
-    return ['value', 'min', 'max', 'locale'];
+    return ['value', 'min', 'max', 'locale', 'prev-year-aria-label', 'next-year-aria-label', 'prev-month-aria-label', 'next-month-aria-label'];
   }
 
   attributeChangedCallback(name, prevValue, newVal) {
@@ -301,6 +301,30 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
 
           break;
         }
+
+      case 'prev-year-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$prevYear), 'aria-label', newVal);
+          break;
+        }
+
+      case 'next-year-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$nextYear), 'aria-label', newVal);
+          break;
+        }
+
+      case 'prev-month-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$prevMonth), 'aria-label', newVal);
+          break;
+        }
+
+      case 'next-month-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$nextMonth), 'aria-label', newVal);
+          break;
+        }
     }
   }
 
@@ -340,6 +364,22 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
     return getAttribute(this, 'max', '');
   }
 
+  set prevMonthAriaLabel(value) {
+    updateAttribute(this, 'prev-month-aria-label', value);
+  }
+
+  get prevMonthAriaLabel() {
+    return getAttribute(this, 'prev-month-aria-label', '');
+  }
+
+  set nextMonthAriaLabel(value) {
+    updateAttribute(this, 'next-month-aria-label', value);
+  }
+
+  get nextMonthAriaLabel() {
+    return getAttribute(this, 'next-month-aria-label', '');
+  }
+
   get prevYearButtonRect() {
     return getRect(_classPrivateFieldGet(this, _$prevYear));
   }

package/date-picker/types.d.ts

@@ -9,6 +9,14 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     max: string;
     /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     locale: string;
+    /** Label that is used for a11y */
+    prevYearAriaLabel: string;
+    /** Label that is used for a11y */
+    nextYearAriaLabel: string;
+    /** Label that is used for a11y */
+    prevMonthAriaLabel: string;
+    /** Label that is used for a11y */
+    nextMonthAriaLabel: string;
     readonly prevYearButtonRect: TRect;
     readonly nextYearButtonRect: TRect;
     readonly prevMonthButtonRect: TRect;
@@ -24,6 +32,14 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     setAttribute(name: 'max', value: string): void;
     /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     setAttribute(name: 'locale', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'prev-year-aria-label', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'next-year-aria-label', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'prev-month-aria-label', value: string): void;
+    /** Label that is used for a11y */
+    setAttribute(name: 'next-month-aria-label', value: string): void;
 };
 export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
     /** Date value in ISO 8601 format */
@@ -36,7 +52,15 @@ export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerE
     locale: string;
     /** Label that is used for a11y */
     'aria-label': string;
-    /** Change value handler, return date in ISO 8601 format */
+    /** Label that is used for a11y */
+    'prev-year-aria-label': string;
+    /** Label that is used for a11y */
+    'next-year-aria-label': string;
+    /** Label that is used for a11y */
+    'prev-month-aria-label': string;
+    /** Label that is used for a11y */
+    'next-month-aria-label': string;
+    /** @deprecated Change value handler, return date in ISO 8601 format */
     onChange?: (e: SyntheticEvent<TSinchDatePickerElement, CustomEvent<string>>) => void;
     /** Change value handler, return date in ISO 8601 format */
     'on-change'?: (e: CustomEvent<string>) => void;

package/dialog/index.d.ts

@@ -1,6 +1,7 @@
 import '../icon-button';
 import '../icons/close';
 import '../stop-events';
+import '../title';
 import type { TSinchDialogElement, TSinchDialogReact } from './types';
 declare global {
     namespace JSX {

package/dialog/index.js

@@ -15,8 +15,9 @@ import dialogPolyfill from 'dialog-polyfill';
 import '../icon-button';
 import '../icons/close';
 import '../stop-events';
+import '../title';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _prevOverflowValue = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends NectaryElement {
@@ -142,7 +143,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     switch (name) {
       case 'caption':
         {
-          _classPrivateFieldGet(this, _$caption).textContent = newVal;
+          updateAttribute(_classPrivateFieldGet(this, _$caption), 'text', newVal);
           break;
         }
 

package/dropdown/types.d.ts

@@ -23,8 +23,10 @@ export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownEleme
     value: string;
     maxVisibleItems?: number;
     'aria-label': string;
+    /** @deprecated */
     onClose?: () => void;
     'on-close'?: (e: CustomEvent<void>) => void;
+    /** @deprecated */
     onChange?: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/file-drop/index.d.ts

@@ -0,0 +1,13 @@
+import '../text';
+import '../file-picker';
+import type { TSinchFileDropElement, TSinchFileDropReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-drop': TSinchFileDropReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-drop': TSinchFileDropElement;
+    }
+}

package/file-drop/index.js

@@ -0,0 +1,320 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$filePicker, _$dropArea, _$placeholder, _setDragEffect, _onDragEnter, _onDragLeave, _onDragOver, _onDrop, _onFilePickerChange, _onFilePickerInvalid, _onChangeReactHandler, _onInvalidReactHandler, _dispatchChangeEvent, _dispatchInvalidEvent;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import '../text';
+import '../file-picker';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-shape-radius-m);background-color:var(--sinch-color-background-grey)}#wrapper.drop.valid{background-color:var(--sinch-color-background-blue)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-color-stormy-100);border-radius:var(--sinch-shape-radius-m);pointer-events:none}#placeholder{align-self:center;text-align:center}:host([invalid]) #wrapper::after{border-color:var(--sinch-color-text-invalid);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid::after{border-color:var(--sinch-color-aqua-400);border-width:2px}#wrapper.drop #placeholder{color:var(--sinch-color-text-muted)}:host([disabled]) #wrapper #placeholder{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{background-color:var(--sinch-color-snow-100)}:host([disabled]) #wrapper::after{border-color:var(--sinch-color-stormy-100);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
+import { areFilesAccepted, doFilesSatisfySize } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-file-drop', (_$filePicker = new WeakMap(), _$dropArea = new WeakMap(), _$placeholder = new WeakMap(), _setDragEffect = new WeakSet(), _onDragEnter = new WeakMap(), _onDragLeave = new WeakMap(), _onDragOver = new WeakMap(), _onDrop = new WeakMap(), _onFilePickerChange = new WeakMap(), _onFilePickerInvalid = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onInvalidReactHandler = new WeakMap(), _dispatchChangeEvent = new WeakSet(), _dispatchInvalidEvent = new WeakSet(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _dispatchInvalidEvent);
+
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
+
+    _classPrivateMethodInitSpec(this, _setDragEffect);
+
+    _classPrivateFieldInitSpec(this, _$filePicker, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$dropArea, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$placeholder, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onDragEnter, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+        const hasTypes = e.dataTransfer?.types?.includes('Files') === true;
+        const hasItems = e.dataTransfer?.items != null && e.dataTransfer.items.length > 0;
+
+        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, true, hasTypes || hasItems);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDragLeave, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDragOver, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDrop, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
+
+        if (this.disabled) {
+          return;
+        }
+
+        const dt = e.dataTransfer;
+
+        if (dt === null) {
+          return;
+        }
+
+        if (dt.files.length === 0) {
+          return;
+        }
+
+        if (!this.multiple && dt.files.length > 1) {
+          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'multiple');
+
+          return;
+        }
+
+        const files = Array.from(dt.files);
+
+        if (!areFilesAccepted(files, this.accept)) {
+          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'accept');
+
+          return;
+        }
+
+        if (!doFilesSatisfySize(files, this.size)) {
+          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'size');
+
+          return;
+        }
+
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, files);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFilePickerChange, {
+      writable: true,
+      value: e => {
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFilePickerInvalid, {
+      writable: true,
+      value: e => {
+        _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, e.detail);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInvalidReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-invalid')?.(e);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$dropArea, shadowRoot.querySelector('#wrapper'));
+
+    _classPrivateFieldSet(this, _$placeholder, shadowRoot.querySelector('#placeholder'));
+
+    _classPrivateFieldSet(this, _$filePicker, shadowRoot.querySelector('#file-picker'));
+  }
+
+  connectedCallback() {
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+    this.addEventListener('dragenter', _classPrivateFieldGet(this, _onDragEnter));
+    this.addEventListener('dragleave', _classPrivateFieldGet(this, _onDragLeave));
+    this.addEventListener('dragover', _classPrivateFieldGet(this, _onDragOver));
+    this.addEventListener('drop', _classPrivateFieldGet(this, _onDrop));
+
+    _classPrivateFieldGet(this, _$filePicker).addEventListener('-change', _classPrivateFieldGet(this, _onFilePickerChange));
+
+    _classPrivateFieldGet(this, _$filePicker).addEventListener('-invalid', _classPrivateFieldGet(this, _onFilePickerInvalid));
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+    this.removeEventListener('dragenter', _classPrivateFieldGet(this, _onDragEnter));
+    this.removeEventListener('dragleave', _classPrivateFieldGet(this, _onDragLeave));
+    this.removeEventListener('dragover', _classPrivateFieldGet(this, _onDragOver));
+    this.removeEventListener('drop', _classPrivateFieldGet(this, _onDrop));
+
+    _classPrivateFieldGet(this, _$filePicker).removeEventListener('-change', _classPrivateFieldGet(this, _onFilePickerChange));
+
+    _classPrivateFieldGet(this, _$filePicker).removeEventListener('-invalid', _classPrivateFieldGet(this, _onFilePickerInvalid));
+  }
+
+  static get observedAttributes() {
+    return ['accept', 'multiple', 'placeholder', 'disabled', 'invalid', 'size'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (newVal === oldVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'multiple':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'multiple', newVal);
+          break;
+        }
+
+      case 'accept':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'accept', newVal);
+          break;
+        }
+
+      case 'placeholder':
+        {
+          _classPrivateFieldGet(this, _$placeholder).textContent = newVal;
+          break;
+        }
+
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+
+          _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
+
+          break;
+        }
+
+      case 'invalid':
+        {
+          updateBooleanAttribute(this, 'invalid', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'size':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'size', newVal);
+          break;
+        }
+    }
+  }
+
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+
+  set accept(value) {
+    updateAttribute(this, 'accept', value);
+  }
+
+  get accept() {
+    return getAttribute(this, 'accept', null);
+  }
+
+  get size() {
+    return getIntegerAttribute(this, 'size', null);
+  }
+
+  set size(value) {
+    updateAttribute(this, 'size', value);
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+
+  get placeholder() {
+    return getAttribute(this, 'placeholder', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+
+}));
+
+function _setDragEffect2(shouldEnable) {
+  let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const isElementEnabled = !this.disabled;
+
+  if (shouldEnable) {
+    if (isElementEnabled) {
+      setClass(_classPrivateFieldGet(this, _$dropArea), 'drop', true);
+      setClass(_classPrivateFieldGet(this, _$dropArea), 'valid', isValid);
+    }
+  } else {
+    setClass(_classPrivateFieldGet(this, _$dropArea), 'drop', false);
+    setClass(_classPrivateFieldGet(this, _$dropArea), 'valid', false);
+  }
+}
+
+function _dispatchChangeEvent2(files) {
+  this.dispatchEvent(new CustomEvent('-change', {
+    detail: files
+  }));
+}
+
+function _dispatchInvalidEvent2(type) {
+  this.dispatchEvent(new CustomEvent('-invalid', {
+    detail: type
+  }));
+}