@nectary/components 0.44.1 → 0.45.0

package/pop/index.js

@@ -1,5 +1,4 @@
-import dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext } from '../utils';
 const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" aria-haspopup="dialog" aria-expanded="false" name="target"></slot><div id="focus" tabindex="-1"></div><dialog id="dialog"><div id="content"><slot name="content"></slot></div><div id="target-open"><slot name="target-open"></slot></div></dialog>';
 import { assertOrientation, disableScroll, enableScroll, orientationValues } from './utils';
 const template = document.createElement('template');
@@ -8,7 +7,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #$target;
   #$focus;
   #$dialog;
-  #isConnected;
   #resizeThrottle;
   #$targetSlot;
   #$targetOpenSlot;
@@ -30,21 +28,18 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.#$targetOpenSlot = shadowRoot.querySelector('slot[name="target-open"]');
     this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
     this.#$targetOpenWrapper = shadowRoot.querySelector('#target-open');
-    this.#isConnected = false;
     this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
     this.#keydownContext = new Context(this.#$contentSlot, 'keydown');
     this.#visibilityContext = new Context(this.#$contentSlot, 'visibility');
-    dialogPolyfill.registerDialog(this.#$dialog);
-
-    dialogPolyfill.dm.handleFocus_ = function () {};
   }
   connectedCallback() {
+    super.connectedCallback();
     this.#controller = new AbortController();
     const {
       signal
     } = this.#controller;
-    this.#keydownContext.subscribe();
-    this.#visibilityContext.subscribe();
+    this.#keydownContext.listen(signal);
+    this.#visibilityContext.listen(signal);
     this.setAttribute('role', 'dialog');
     this.#$dialog.addEventListener('cancel', this.#onCancel, {
       signal
@@ -55,22 +50,15 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.addEventListener('-close', this.#onCloseReactHandler, {
       signal
     });
-    this.addEventListener('-visibility', this.#onContextVisibility, {
-      signal
-    });
-    dispatchContextConnectEvent(this, 'visibility');
-    this.#isConnected = true;
+    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
     if (getBooleanAttribute(this, 'open')) {
       this.#onExpand();
     }
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.#controller.abort();
-    this.#keydownContext.unsubscribe();
-    this.#visibilityContext.unsubscribe();
-    dispatchContextDisconnectEvent(this, 'visibility');
     this.#onCollapse();
-    this.#isConnected = false;
   }
   static get observedAttributes() {
     return ['orientation', 'open'];
@@ -124,7 +112,9 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         }
       case 'orientation':
         {
-          assertOrientation(newVal);
+          if ('production' !== 'production') {
+            assertOrientation(newVal);
+          }
           if (this.#isOpen()) {
             this.#updateOrientation();
           }
@@ -153,7 +143,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     return item;
   }
   #onExpand() {
-    if (!this.#isConnected || this.#isOpen()) {
+    if (!this.isConnected || this.#isOpen()) {
       return;
     }
 
@@ -356,27 +346,15 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     e.stopPropagation();
   };
   #dispatchContentVisibility(isVisible) {
-    for (const $el of this.#visibilityContext.elements) {
-      $el.dispatchEvent(new CustomEvent('-visibility', {
-        detail: isVisible
-      }));
-    }
+    this.#visibilityContext.dispatch(isVisible);
   }
   #onTargetKeydown = e => {
-    for (const $el of this.#keydownContext.elements) {
-      let isPrevented = false;
-      $el.dispatchEvent(new CustomEvent('-keydown', {
-        detail: {
-          code: e.code,
-          preventDefault: () => {
-            isPrevented = true;
-          }
-        }
-      }));
-      if (isPrevented) {
+    this.#keydownContext.dispatch({
+      code: e.code,
+      preventDefault: () => {
         e.preventDefault();
       }
-    }
+    });
   };
   #onContextVisibility = e => {
     if (!e.detail) {

package/popover/index.js

@@ -1,6 +1,6 @@
 import '../pop';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils';
-const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}#content{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-m);box-shadow:var(--sinch-elevation-level-2);overflow:hidden}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-color-snow-100);stroke:var(--sinch-color-snow-500);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}:host([tip]) #content{box-shadow:none}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-elevation-level-2))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, subscribeContext } from '../utils';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}#content{font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-m);box-shadow:var(--sinch-elevation-level-2);overflow:hidden}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-color-snow-100);stroke:var(--sinch-color-snow-500);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}:host([tip]) #content{box-shadow:none}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-elevation-level-2))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 import { assertOrientation, getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 16;
 const template = document.createElement('template');
@@ -29,14 +29,10 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     this.#$pop.addEventListener('-close', this.#onPopClose, {
       signal
     });
-    this.#$content.addEventListener('-visibility', this.#onContextVisibility, {
-      signal
-    });
-    dispatchContextConnectEvent(this.#$content, 'visibility');
+    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
     updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
   }
   disconnectedCallback() {
-    dispatchContextDisconnectEvent(this.#$content, 'visibility');
     this.#controller.abort();
   }
   #onPopClose = () => {
@@ -89,8 +85,10 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     switch (name) {
       case 'orientation':
         {
-          assertOrientation(newVal);
-          updateAttribute(this.#$pop, 'orientation', getPopOrientation(newVal));
+          if ('production' !== 'production') {
+            assertOrientation(newVal);
+          }
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
           if (this.#isOpen()) {
             this.#updateTipOrientation();
           }

package/radio-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, 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-700);--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);border:2px solid var(--sinch-color-radio-border);transition:background-color .1s linear;box-sizing:border-box}#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{border-color:var(--sinch-color-radio-border-checked)}#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{border-color:var(--sinch-color-radio-border-focus)}#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{border-color:var(--sinch-color-radio-border-hover)}#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{border-color:var(--sinch-color-radio-border-active)}#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{border-color:var(--sinch-color-radio-border-disabled)}#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{border-color:var(--sinch-color-radio-border-focus-checked)}#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{border-color:var(--sinch-color-radio-border-hover-checked)}#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{border-color:var(--sinch-color-radio-border-active-checked)}#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{border-color:var(--sinch-color-radio-border-disabled-checked)}#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>';
+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-700);--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);border:2px solid var(--sinch-color-radio-border);transition:background-color .1s linear;box-sizing:border-box}#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-text-m);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{border-color:var(--sinch-color-radio-border-checked)}#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{border-color:var(--sinch-color-radio-border-focus)}#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{border-color:var(--sinch-color-radio-border-hover)}#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{border-color:var(--sinch-color-radio-border-active)}#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{border-color:var(--sinch-color-radio-border-disabled)}#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{border-color:var(--sinch-color-radio-border-focus-checked)}#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{border-color:var(--sinch-color-radio-border-hover-checked)}#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{border-color:var(--sinch-color-radio-border-active-checked)}#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{border-color:var(--sinch-color-radio-border-disabled-checked)}#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>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-radio-option', class extends NectaryElement {

package/segment/index.js

@@ -1,8 +1,9 @@
 import '../title';
 import { getTitleLevelFromType } from '../title/utils';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:12px;width:100%;height:100%;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);box-shadow:var(--sinch-elevation-level-2);padding:8px 0 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;padding:0 24px;--sinch-size-icon:32px}#caption{color:var(--sinch-color-text-default);min-width:1em}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:0 24px}#action.empty{display:none}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><sinch-title id="caption" level="3" type="m" ellipsis></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
-import { assertSize, sizeValues } from './utils';
+import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:12px;width:100%;height:100%;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);padding:8px 0 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;padding:0 24px;--sinch-size-icon:32px}#caption{color:var(--sinch-color-text-default);min-width:1em}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:0 24px}#action.empty{display:none}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><sinch-title id="caption" level="3" type="m" ellipsis></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+import { getTitleTypeFromSize } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segment', class extends NectaryElement {
@@ -62,9 +63,12 @@ defineCustomElement('sinch-segment', class extends NectaryElement {
         }
       case 'size':
         {
-          assertSize(newVal);
-          updateAttribute(this.#$caption, 'type', newVal);
-          updateAttribute(this.#$caption, 'level', getTitleLevelFromType(newVal));
+          if ('production' !== 'production') {
+            assertSize(newVal, 'sinch-segment');
+          }
+          const titleType = getTitleTypeFromSize(this.size);
+          updateAttribute(this.#$caption, 'type', titleType);
+          updateAttribute(this.#$caption, 'level', getTitleLevelFromType(titleType));
           break;
         }
     }
@@ -82,7 +86,7 @@ defineCustomElement('sinch-segment', class extends NectaryElement {
     return getBooleanAttribute(this, 'collapsed');
   }
   get size() {
-    return getLiteralAttribute(this, sizeValues, 'size', 'm');
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
   }
   set size(value) {
     updateLiteralAttribute(this, sizeValues, 'size', value);

package/segment/types.d.ts

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

package/segment/utils.d.ts

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

package/segment/utils.js

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

package/segment-collapse/index.js

@@ -2,7 +2,7 @@ import '../icons/expand-less';
 import '../icons/expand-more';
 import '../icon-button';
 import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;--sinch-size-icon:32px}#up{display:block}#down{display:none}:host([value]:not([value=false])) #up{display:none}:host([value]:not([value=false])) #down{display:block}</style><sinch-icon-button id="button" small><sinch-icon-expand-less id="up" slot="icon"></sinch-icon-expand-less><sinch-icon-expand-more id="down" slot="icon"></sinch-icon-expand-more></sinch-icon-button>';
+const templateHTML = '<style>:host{display:block;--sinch-size-icon:32px}#up{display:block}#down{display:none}:host([value]:not([value=false])) #up{display:none}:host([value]:not([value=false])) #down{display:block}</style><sinch-icon-button id="button" size="s"><sinch-icon-expand-less id="up" slot="icon"></sinch-icon-expand-less><sinch-icon-expand-more id="down" slot="icon"></sinch-icon-expand-more></sinch-icon-button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segment-collapse', class extends NectaryElement {

package/segmented-control-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;position:relative;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:0;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-3px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-border-focus);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="button" id="content"></label><button id="button"></button></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;position:relative;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:0;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-3px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-border-focus);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="button" id="content"></label><button id="button"></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-control-option', class extends NectaryElement {

package/segmented-icon-control-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-border-focus);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-border-focus);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-icon-control-option', class extends NectaryElement {

package/select-button/index.js

@@ -1,21 +1,33 @@
 import '../text';
 import '../icons/keyboard-arrow-down';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:0 12px;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-s);--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-color-stormy-500)}#button{all:initial;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;border-radius:var(--sinch-shape-radius-s);border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box}#text{flex:1;min-width:0;color:var(--sinch-color-text-muted)}:host([text]:not([text=""])) #text{color:var(--sinch-color-text-default)}#button:disabled{border-color:var(--sinch-color-snow-500);cursor:initial}#button:focus-visible{border-color:var(--sinch-color-stormy-600)}@supports not selector(:focus-visible){#button:focus{border-color:var(--sinch-color-stormy-600)}}:host([invalid]) #button:enabled{border-color:var(--sinch-color-text-invalid)}#button:disabled~#text{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><button id="button"></button><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-icon-keyboard-arrow-down></sinch-icon-keyboard-arrow-down></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context } from '../utils';
+import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-select-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-select-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-size);padding:0 8px 0 12px;background-color:var(--sinch-color-bg-primary-light);border-radius:var(--sinch-shape-radius);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([disabled]:not([disabled=false])) #wrapper{--sinch-color-icon:var(--sinch-color-text-disabled)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}#button{all:initial;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}#text{flex:1;min-width:0;color:var(--sinch-color-text-muted)}:host([text]:not([text=""])) #text{color:var(--sinch-color-text-default)}#button:disabled{cursor:initial}#button:disabled+#border{border-color:var(--sinch-color-border-disabled)}#button:focus-visible+#border{border-color:var(--sinch-color-border-focus);border-width:2px}:host([invalid]) #button:enabled+#border{border-color:var(--sinch-color-text-invalid)}#button:disabled~#text{color:var(--sinch-color-text-disabled)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper"><button id="button"></button><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-button', class extends NectaryElement {
   #$button;
   #$text;
+  #$leftSlot;
+  #$leftWrapper;
+  #$wrapper;
   #controller = null;
+  #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
+    this.#$leftWrapper = shadowRoot.querySelector('#left');
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#sizeContext = new Context(this.#$wrapper, 'size');
   }
   connectedCallback() {
+    super.connectedCallback();
     this.#controller = new AbortController();
     const {
       signal
@@ -39,36 +51,20 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
     this.addEventListener('-blur', this.#onBlurReactHandler, {
       signal
     });
+    this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, {
+      signal
+    });
+    this.#sizeContext.listen(this.#controller.signal);
+    subscribeContext(this, 'size', this.#onContextSize, signal);
+    this.#onLeftSlotChange();
+    this.#onSizeUpdate();
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['text', 'placeholder', 'invalid', 'disabled'];
-  }
-  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 invalid(isInvalid) {
-    updateBooleanAttribute(this, 'invalid', isInvalid);
-  }
-  get invalid() {
-    return getBooleanAttribute(this, 'invalid');
-  }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return ['text', 'placeholder', 'invalid', 'disabled', 'size', 'data-size'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -103,8 +99,51 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+      case 'data-size':
+        {
+          if ('production' !== 'production') {
+            assertSize(newVal, 'sinch-select-button');
+          }
+          this.#onSizeUpdate();
+          break;
+        }
     }
   }
+  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 invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set size(size) {
+    updateLiteralAttribute(this, sizeValues, 'size', size);
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
+  }
   get focusable() {
     return true;
   }
@@ -114,6 +153,32 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   blur() {
     this.#$button.blur();
   }
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
+      return;
+    }
+    switch (e.detail) {
+      case 'l':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
+    }
+  };
+  #onSizeUpdate() {
+    if (!this.isConnected) {
+      return;
+    }
+    const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
+    this.#sizeContext.dispatch(size);
+  }
+  #onLeftSlotChange = () => {
+    setClass(this.#$leftWrapper, 'empty', this.#$leftSlot.assignedElements().length === 0);
+  };
   #onButtonFocus = () => {
     this.dispatchEvent(new CustomEvent('-focus'));
   };

package/select-button/types.d.ts

@@ -1,4 +1,5 @@
 import type { TSinchElementReact } from '../types';
+import type { TSinchSize } from '../utils/size';
 export declare type TSinchSelectButtonElement = HTMLElement & {
     /** Text */
     text: string;
@@ -8,6 +9,8 @@ export declare type TSinchSelectButtonElement = HTMLElement & {
     invalid: boolean;
     /** Disabled */
     disabled: boolean;
+    /** Size, `m` by default */
+    size: TSinchSize;
     /** Click event */
     addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
     /** Focus event */
@@ -22,6 +25,8 @@ export declare type TSinchSelectButtonElement = HTMLElement & {
     setAttribute(name: 'invalid', value: ''): void;
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Size, `m` by default */
+    setAttribute(name: 'size', value: TSinchSize): void;
 };
 export declare type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectButtonElement> & {
     /** Text */
@@ -34,8 +39,10 @@ export declare type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectBut
     invalid?: boolean;
     /** Disabled */
     disabled?: boolean;
+    /** Size, `m` by default */
+    size?: TSinchSize;
     /** Click handler */
-    'on-click'?: (e: CustomEvent<void>) => void;
+    'on-click': (e: CustomEvent<void>) => void;
     /** Focus handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
     /** Blur handler */

package/select-menu/index.d.ts

@@ -1,3 +1,8 @@
+import '../input';
+import '../icon-button';
+import '../icons/search';
+import '../icons/close';
+import '../text';
 import type { TSinchSelectMenuElement, TSinchSelectMenuReact } from './types';
 declare global {
     namespace JSX {