@nectary/components 3.0.1 → 3.2.0

package/lib/cjs/button/index.js

@@ -3,7 +3,7 @@
 var _utils = require('../utils');
 var _size = require('../utils/size');
 var _utils2 = require('./utils');
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer;user-select:none}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);user-select:none;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:16px;--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s)}:host([data-size=xs])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:8px;--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-xs);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs)}:host(:is([text=""],:not([text])))>#button{--sinch-local-padding:8px}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outline-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host(:not([type]))>#button,:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial)}:host([type=subtle-primary])>#button,:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host(:not([type]):is([text=""],:not([text])))>#button,:host([type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host(:not([type]):focus-visible)>#button,:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible)>#button,:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host(:not([type]):is([text=""],:not([text])):focus-visible)>#button,:host([type=subtle-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([toggled]:not([disabled])[type=subtle-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-toggled-background-initial)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])))>#button,:host([toggled]:not([disabled])[type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-toggled-background-initial)}:host([type=primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host(:not([type]):hover)>#button,:host([type=secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([type]):active)>#button,:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-active)}:host([type=subtle-primary]:hover)>#button,:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-primary]:active)>#button,:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host(:not([type]):is([text=""],:not([text])):hover)>#button,:host([type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host(:not([type]):is([text=""],:not([text])):active)>#button,:host([type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([toggled]:not([disabled])[type=subtle-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled])[type=subtle-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):hover)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):active)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial)}:host(:not([type])[disabled])>#button,:host([type=secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial)}:host([type=subtle-primary][disabled])>#button,:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-primary-disabled-icon-initial)}:host(:not([type]):is([text=""],:not([text]))[disabled])>#button,:host([type=subtle-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 var(--sinch-local-padding);box-sizing:border-box;pointer-events:none;overflow:hidden}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="button" inert><div id="content"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="text"></span><slot id="right-icon" name="right-icon"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer;user-select:none;--sinch-button-shape-radius-base:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-button-border:1px solid;--sinch-button-border-top:var(--sinch-button-border);--sinch-button-border-bottom:var(--sinch-button-border);--sinch-button-border-left:var(--sinch-button-border);--sinch-button-border-right:var(--sinch-button-border);--sinch-button-shape-radius-top-right:unset;--sinch-button-shape-radius-top-left:unset;--sinch-button-shape-radius-bottom-right:unset;--sinch-button-shape-radius-bottom-left:unset}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);user-select:none;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:16px;--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s)}:host([data-size=xs])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:8px;--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-xs);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs)}:host(:is([text=""],:not([text])))>#button{--sinch-local-padding:8px}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outline-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host(:not([type]))>#button,:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial)}:host([type=subtle-primary])>#button,:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host(:not([type]):is([text=""],:not([text])))>#button,:host([type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host(:not([type]):focus-visible)>#button,:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible)>#button,:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host(:not([type]):is([text=""],:not([text])):focus-visible)>#button,:host([type=subtle-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([toggled]:not([disabled])[type=subtle-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-toggled-background-initial)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])))>#button,:host([toggled]:not([disabled])[type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-toggled-background-initial)}:host([type=primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host(:not([type]):hover)>#button,:host([type=secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([type]):active)>#button,:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover)>#button,:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-primary]:active)>#button,:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host(:not([type]):is([text=""],:not([text])):hover)>#button,:host([type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host(:not([type]):is([text=""],:not([text])):active)>#button,:host([type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([toggled]:not([disabled])[type=subtle-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled])[type=subtle-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):hover)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):active)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial)}:host(:not([type])[disabled])>#button,:host([type=secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial)}:host([type=subtle-primary][disabled])>#button,:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-primary-disabled-icon-initial)}:host(:not([type]):is([text=""],:not([text]))[disabled])>#button,:host([type=subtle-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border-top:var(--sinch-button-border-top);border-bottom:var(--sinch-button-border-bottom);border-right:var(--sinch-button-border-right);border-left:var(--sinch-button-border-left);border-color:var(--sinch-local-color-border);border-top-right-radius:var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-top-left-radius:var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-right-radius:var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-left-radius:var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-top-right-radius:calc(var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-top-left-radius:calc(var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-right-radius:calc(var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-left-radius:calc(var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 var(--sinch-local-padding);box-sizing:border-box;pointer-events:none;overflow:hidden}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="button" inert><div id="content"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="text"></span><slot id="right-icon" name="right-icon"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 (0, _utils.defineCustomElement)('sinch-button', class extends _utils.NectaryElement {

package/lib/cjs/button-group/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchButtonGroupElement, TSinchButtonGroupReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button-group': TSinchButtonGroupReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button-group': TSinchButtonGroupElement;
+    }
+}

package/lib/cjs/button-group/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _utils = require('../button/utils');
+var _utils2 = require('../utils');
+var _size = require('../utils/size');
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils2.defineCustomElement)('sinch-button-group', class extends _utils2.NectaryElement {
+  #$slot;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$slot = shadowRoot.querySelector('slot');
+  }
+  static get observedAttributes() {
+    return ['size', 'type'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'size':
+        for (const $option of this.#$slot.assignedElements()) {
+          (0, _utils2.updateLiteralAttribute)($option, _size.sizeExValues, name, newVal);
+        }
+        break;
+      case 'type':
+        for (const $option of this.#$slot.assignedElements()) {
+          (0, _utils2.updateLiteralAttribute)($option, _utils.typeValues, name, newVal);
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  set type(value) {
+    (0, _utils2.updateLiteralAttribute)(this, _utils.typeValues, 'type', value);
+  }
+  get type() {
+    return (0, _utils2.getLiteralAttribute)(this, _utils.typeValues, 'type', 'primary');
+  }
+  set size(size) {
+    (0, _utils2.updateLiteralAttribute)(this, _size.sizeExValues, 'size', size);
+  }
+  get size() {
+    return (0, _utils2.getLiteralAttribute)(this, _size.sizeExValues, 'size', _size.DEFAULT_SIZE);
+  }
+  connectedCallback() {
+    this.role = 'group';
+  }
+});

package/lib/cjs/button-group/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchButtonElement, TSinchButtonReact } from '../button/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchButtonGroupElement = HTMLElement & {
+    size: TSinchButtonElement['size'];
+    type: TSinchButtonElement['type'];
+};
+export type TSinchButtonGroupReact = TSinchElementReact<TSinchButtonGroupElement> & {
+    size?: TSinchButtonReact['size'];
+    type?: TSinchButtonReact['type'];
+    'aria-label': TSinchButtonReact['aria-label'];
+};

package/lib/cjs/button-group/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/button-group-item/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchButtonGroupItemElement, TSinchButtonGroupItemReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button-group-item': TSinchButtonGroupItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button-group-item': TSinchButtonGroupItemElement;
+    }
+}

package/lib/cjs/button-group-item/index.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _utils = require('../utils');
+const templateHTML = '<style>:host{display:block;--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%;position:relative}:host(:is(:not(:first-of-type))) #wrapper::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-divider-color);opacity:.3;pointer-events:none;z-index:2;top:10%;bottom:10%;left:-.5px;width:1px}:host([type=primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-primary-default-text-initial)}:host([type=secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}:host([type=subtle-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-primary-default-text-initial)}:host([type=subtle-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-secondary-default-text-initial)}:host([type=cta-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-primary-default-text-initial)}:host([type=cta-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-secondary-default-text-initial)}:host([type=destructive]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-danger-default-text-initial)}#sinch-button-element{display:flex;box-sizing:border-box;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-button-shape-radius-top-right:0;--sinch-button-shape-radius-top-left:0;--sinch-button-shape-radius-bottom-right:0;--sinch-button-shape-radius-bottom-left:0}:host(:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host(:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="l"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-l)}:host([size="l"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-l)}:host([size="m"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host([size="m"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="s"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-s)}:host([size="s"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-s)}:host([size=xs]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-xs)}:host([size=xs]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-xs)}:host(:is(:not(:first-of-type,:last-of-type))) #sinch-button-element:not(:active){--sinch-button-border-left:none;--sinch-button-border-right:none}:host(:is(:first-of-type)) #sinch-button-element:not(:active){--sinch-button-border-right:none}:host(:is(:last-of-type)) #sinch-button-element:not(:active){--sinch-button-border-left:none}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="wrapper"><sinch-button id="sinch-button-element"><slot id="left-icon" name="left-icon" slot="left-icon"></slot><slot id="icon" name="icon" slot="icon"></slot><slot id="right-icon" name="right-icon" slot="right-icon"></slot></sinch-button></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-button-group-item', class extends _utils.NectaryElement {
+  #$sinchButton;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$sinchButton = shadowRoot.querySelector('#sinch-button-element');
+  }
+  static get observedAttributes() {
+    return ['type', 'size', 'text', 'disabled', 'toggled'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    (0, _utils.updateAttribute)(this.#$sinchButton, name, newVal);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.role = 'button';
+    const forwardEvent = e => this.dispatchEvent(new CustomEvent(e.type, {
+      ...e
+    }));
+    this.addEventListener('-click', e => this.#onClickReactHandler(e), {
+      signal
+    });
+    this.addEventListener('-focus', () => this.#onFocusReactHandler(), {
+      signal
+    });
+    this.addEventListener('-blur', () => this.#onBlurReactHandler(), {
+      signal
+    });
+    this.#$sinchButton.addEventListener('-click', e => forwardEvent(e), {
+      signal
+    });
+    this.#$sinchButton.addEventListener('-focus', e => forwardEvent(e), {
+      signal
+    });
+    this.#$sinchButton.addEventListener('-blur', e => forwardEvent(e), {
+      signal
+    });
+  }
+  set text(value) {
+    (0, _utils.updateAttribute)(this, 'text', value);
+  }
+  get text() {
+    return (0, _utils.getAttribute)(this, 'text', '');
+  }
+  set disabled(isDisabled) {
+    (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return (0, _utils.getBooleanAttribute)(this, 'disabled');
+  }
+  set toggled(isToggled) {
+    (0, _utils.updateBooleanAttribute)(this, 'toggled', isToggled);
+  }
+  get toggled() {
+    return (0, _utils.getBooleanAttribute)(this, 'toggled');
+  }
+  get focusable() {
+    return true;
+  }
+  #onClickReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-click')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    (0, _utils.getReactEventHandler)(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    (0, _utils.getReactEventHandler)(this, 'on-blur')?.();
+  };
+});

package/lib/cjs/button-group-item/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchButtonElement, TSinchButtonReact } from '../button/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchButtonGroupItemElement = HTMLElement & {
+    text: TSinchButtonElement['text'];
+    disabled: TSinchButtonElement['disabled'];
+    toggled: TSinchButtonElement['toggled'];
+    addEventListener: TSinchButtonElement['addEventListener'];
+    setAttribute: TSinchButtonElement['setAttribute'];
+};
+export type TSinchButtonGroupItemReact = TSinchElementReact<TSinchButtonGroupItemElement> & {
+    text?: TSinchButtonReact['text'];
+    disabled?: TSinchButtonReact['disabled'];
+    toggled?: TSinchButtonReact['toggled'];
+    'on-blur'?: TSinchButtonReact['on-blur'];
+    'on-click'?: TSinchButtonReact['on-click'];
+    'on-focus'?: TSinchButtonReact['on-focus'];
+    'aria-label': TSinchButtonReact['aria-label'];
+};

package/lib/cjs/button-group-item/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/dialog/index.js

@@ -10,6 +10,7 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 (0, _utils.defineCustomElement)('sinch-dialog', class extends _utils.NectaryElement {
   #$dialog;
+  #$dialogContent;
   #$closeButton;
   #$caption;
   #$actionWrapper;
@@ -20,6 +21,7 @@ template.innerHTML = templateHTML;
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$dialog = shadowRoot.querySelector('#dialog');
+    this.#$dialogContent = shadowRoot.querySelector('#content');
     this.#$closeButton = shadowRoot.querySelector('#close');
     this.#$caption = shadowRoot.querySelector('#caption');
     this.#$actionWrapper = shadowRoot.querySelector('#action');
@@ -141,6 +143,7 @@ template.innerHTML = templateHTML;
     if (!this.#$dialog.open) {
       return;
     }
+    this.#$dialogContent.scrollTo(0, 0);
     this.#$dialog.close?.();
     (0, _utils2.enableScroll)();
   }

package/lib/cjs/select-menu/index.js

@@ -17,6 +17,7 @@ template.innerHTML = templateHTML;
   #$notFound;
   #controller = null;
   #searchDebounce;
+  #userManagedSearch = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -26,7 +27,7 @@ template.innerHTML = templateHTML;
     this.#$search = shadowRoot.querySelector('#search');
     this.#$searchClear = shadowRoot.querySelector('#search-clear');
     this.#$notFound = shadowRoot.querySelector('#not-found');
-    this.#searchDebounce = (0, _utils.debounceTimeout)(200)(this.#updateSearch);
+    this.#searchDebounce = (0, _utils.debounceTimeout)(200)(this.#updateSearchValue);
   }
   connectedCallback() {
     this.#controller = new AbortController();
@@ -54,7 +55,7 @@ template.innerHTML = templateHTML;
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['value', 'rows', 'multiple', 'search-placeholder'];
+    return ['value', 'rows', 'multiple', 'search-value', 'search-placeholder'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -82,6 +83,13 @@ template.innerHTML = templateHTML;
           (0, _utils.updateAttribute)(this.#$search, 'placeholder', newVal);
           break;
         }
+      case 'search-value':
+        {
+          (0, _utils.updateAttribute)(this.#$search, 'value', newVal);
+          this.#userManagedSearch = true;
+          this.#updateSearchList(newVal !== null ? newVal : '');
+          break;
+        }
     }
   }
   set value(value) {
@@ -115,6 +123,13 @@ template.innerHTML = templateHTML;
   get 'search-placeholder'() {
     return (0, _utils.getAttribute)(this.#$search, 'placeholder', '');
   }
+  set 'search-value'(value) {
+    (0, _utils.updateAttribute)(this, 'search-value', value);
+    this.#userManagedSearch = true;
+  }
+  get 'search-value'() {
+    return (0, _utils.getAttribute)(this, 'search-value', '');
+  }
   get focusable() {
     return true;
   }
@@ -136,35 +151,46 @@ template.innerHTML = templateHTML;
     }
   };
   #onSearchChange = e => {
-    this.#$search.value = e.detail;
-    this.#searchDebounce.fn();
+    if (!this.#userManagedSearch) {
+      this.#$search.value = e.detail;
+      this.#searchDebounce.fn();
+    } else {
+      this.#updateSearchValue(e.detail);
+    }
     (0, _utils.setClass)(this.#$searchClear, 'active', e.detail.length > 0);
   };
   #onSearchClearClick = () => {
-    this.#$search.value = '';
+    if (!this.#userManagedSearch) {
+      this.#$search.value = '';
+      this.#searchDebounce.fn();
+    } else {
+      this.#updateSearchValue('');
+    }
     this.#$search.focus();
-    this.#searchDebounce.fn();
     (0, _utils.setClass)(this.#$searchClear, 'active', false);
   };
-  #updateSearch = () => {
-    const searchValue = this.#$search.value.toLowerCase();
+  #updateSearchValue = newValue => {
+    const searchValue = newValue === undefined ? this.#$search.value.toLowerCase() : newValue;
     const searchChangedEvent = new CustomEvent('-search-change', {
-      detail: searchValue,
+      detail: newValue,
       cancelable: true
     });
     this.dispatchEvent(searchChangedEvent);
     if (!searchChangedEvent.defaultPrevented) {
-      const $options = this.#getOptionElements();
-      let someFound = false;
-      for (const $opt of $options) {
-        const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
-        someFound ||= !isHidden;
-        (0, _utils.setClass)($opt, 'hidden', isHidden);
-      }
-      (0, _utils.setClass)(this.#$notFound, 'active', !someFound);
-      this.#selectOption(null);
+      this.#updateSearchList(searchValue);
     }
   };
+  #updateSearchList = searchValue => {
+    const $options = this.#getOptionElements();
+    let someFound = false;
+    for (const $opt of $options) {
+      const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
+      someFound ||= !isHidden;
+      (0, _utils.setClass)($opt, 'hidden', isHidden);
+    }
+    (0, _utils.setClass)(this.#$notFound, 'active', !someFound);
+    this.#selectOption(null);
+  };
   #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
   };

package/lib/cjs/select-menu/types.d.ts

@@ -10,6 +10,8 @@ export type TSinchSelectMenuElement = HTMLElement & {
     searchable: boolean | null;
     /** Text for search bar's placeholder */
     'search-placeholder': string;
+    /** Optionally control search value manually */
+    'search-value': string;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Change value event */
@@ -36,6 +38,8 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
     'aria-label': string;
     /** Change value handler */
     'on-search-change'?: (e: CustomEvent<string>) => void;
+    /** Optionally control search value manually */
+    'search-value'?: string;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/lib/cjs/select-menu-option/index.js

@@ -65,7 +65,7 @@ class SelectMenuOption extends _utils.NectaryElement {
     return (0, _utils.getBooleanAttribute)(this, 'disabled');
   }
   matchesSearch(searchValue) {
-    return this.text.toLowerCase().includes(searchValue);
+    return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }
 }
 exports.SelectMenuOption = SelectMenuOption;

package/lib/esm/button/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getBooleanAttribute, getAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getLiteralAttribute, updateLiteralAttribute, Context, subscribeContext, isAttrEqual } from '../utils';
 import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer;user-select:none}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);user-select:none;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:16px;--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s)}:host([data-size=xs])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:8px;--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-xs);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs)}:host(:is([text=""],:not([text])))>#button{--sinch-local-padding:8px}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outline-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host(:not([type]))>#button,:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial)}:host([type=subtle-primary])>#button,:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host(:not([type]):is([text=""],:not([text])))>#button,:host([type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host(:not([type]):focus-visible)>#button,:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible)>#button,:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host(:not([type]):is([text=""],:not([text])):focus-visible)>#button,:host([type=subtle-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([toggled]:not([disabled])[type=subtle-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-toggled-background-initial)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])))>#button,:host([toggled]:not([disabled])[type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-toggled-background-initial)}:host([type=primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host(:not([type]):hover)>#button,:host([type=secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([type]):active)>#button,:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-active)}:host([type=subtle-primary]:hover)>#button,:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-primary]:active)>#button,:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host(:not([type]):is([text=""],:not([text])):hover)>#button,:host([type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host(:not([type]):is([text=""],:not([text])):active)>#button,:host([type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([toggled]:not([disabled])[type=subtle-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled])[type=subtle-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):hover)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):active)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial)}:host(:not([type])[disabled])>#button,:host([type=secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial)}:host([type=subtle-primary][disabled])>#button,:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-primary-disabled-icon-initial)}:host(:not([type]):is([text=""],:not([text]))[disabled])>#button,:host([type=subtle-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 var(--sinch-local-padding);box-sizing:border-box;pointer-events:none;overflow:hidden}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="button" inert><div id="content"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="text"></span><slot id="right-icon" name="right-icon"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer;user-select:none;--sinch-button-shape-radius-base:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-button-border:1px solid;--sinch-button-border-top:var(--sinch-button-border);--sinch-button-border-bottom:var(--sinch-button-border);--sinch-button-border-left:var(--sinch-button-border);--sinch-button-border-right:var(--sinch-button-border);--sinch-button-shape-radius-top-right:unset;--sinch-button-shape-radius-top-left:unset;--sinch-button-shape-radius-bottom-right:unset;--sinch-button-shape-radius-bottom-left:unset}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);user-select:none;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:16px;--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s)}:host([data-size=xs])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:8px;--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-xs);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs)}:host(:is([text=""],:not([text])))>#button{--sinch-local-padding:8px}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outline-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host(:not([type]))>#button,:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial)}:host([type=subtle-primary])>#button,:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host(:not([type]):is([text=""],:not([text])))>#button,:host([type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host(:not([type]):focus-visible)>#button,:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible)>#button,:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host(:not([type]):is([text=""],:not([text])):focus-visible)>#button,:host([type=subtle-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([toggled]:not([disabled])[type=subtle-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-toggled-background-initial)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])))>#button,:host([toggled]:not([disabled])[type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-toggled-background-initial)}:host([type=primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host(:not([type]):hover)>#button,:host([type=secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([type]):active)>#button,:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover)>#button,:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-primary]:active)>#button,:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host(:not([type]):is([text=""],:not([text])):hover)>#button,:host([type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host(:not([type]):is([text=""],:not([text])):active)>#button,:host([type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([toggled]:not([disabled])[type=subtle-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled])[type=subtle-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):hover)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):active)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial)}:host(:not([type])[disabled])>#button,:host([type=secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial)}:host([type=subtle-primary][disabled])>#button,:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-primary-disabled-icon-initial)}:host(:not([type]):is([text=""],:not([text]))[disabled])>#button,:host([type=subtle-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border-top:var(--sinch-button-border-top);border-bottom:var(--sinch-button-border-bottom);border-right:var(--sinch-button-border-right);border-left:var(--sinch-button-border-left);border-color:var(--sinch-local-color-border);border-top-right-radius:var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-top-left-radius:var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-right-radius:var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-left-radius:var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-top-right-radius:calc(var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-top-left-radius:calc(var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-right-radius:calc(var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-left-radius:calc(var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 var(--sinch-local-padding);box-sizing:border-box;pointer-events:none;overflow:hidden}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="button" inert><div id="content"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="text"></span><slot id="right-icon" name="right-icon"></slot></div></div>';
 import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/lib/esm/button-group/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchButtonGroupElement, TSinchButtonGroupReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button-group': TSinchButtonGroupReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button-group': TSinchButtonGroupElement;
+    }
+}

package/lib/esm/button-group/index.js

@@ -0,0 +1,49 @@
+import { typeValues } from '../button/utils';
+import { NectaryElement, defineCustomElement, getLiteralAttribute, updateLiteralAttribute } from '../utils';
+import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-button-group', class extends NectaryElement {
+  #$slot;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$slot = shadowRoot.querySelector('slot');
+  }
+  static get observedAttributes() {
+    return ['size', 'type'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'size':
+        for (const $option of this.#$slot.assignedElements()) {
+          updateLiteralAttribute($option, sizeExValues, name, newVal);
+        }
+        break;
+      case 'type':
+        for (const $option of this.#$slot.assignedElements()) {
+          updateLiteralAttribute($option, typeValues, name, newVal);
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type', 'primary');
+  }
+  set size(size) {
+    updateLiteralAttribute(this, sizeExValues, 'size', size);
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
+  }
+  connectedCallback() {
+    this.role = 'group';
+  }
+});

package/lib/esm/button-group/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchButtonElement, TSinchButtonReact } from '../button/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchButtonGroupElement = HTMLElement & {
+    size: TSinchButtonElement['size'];
+    type: TSinchButtonElement['type'];
+};
+export type TSinchButtonGroupReact = TSinchElementReact<TSinchButtonGroupElement> & {
+    size?: TSinchButtonReact['size'];
+    type?: TSinchButtonReact['type'];
+    'aria-label': TSinchButtonReact['aria-label'];
+};

package/lib/esm/button-group/types.js

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

package/lib/esm/button-group-item/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchButtonGroupItemElement, TSinchButtonGroupItemReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button-group-item': TSinchButtonGroupItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button-group-item': TSinchButtonGroupItemElement;
+    }
+}

package/lib/esm/button-group-item/index.js

@@ -0,0 +1,79 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%;position:relative}:host(:is(:not(:first-of-type))) #wrapper::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-divider-color);opacity:.3;pointer-events:none;z-index:2;top:10%;bottom:10%;left:-.5px;width:1px}:host([type=primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-primary-default-text-initial)}:host([type=secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}:host([type=subtle-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-primary-default-text-initial)}:host([type=subtle-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-secondary-default-text-initial)}:host([type=cta-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-primary-default-text-initial)}:host([type=cta-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-secondary-default-text-initial)}:host([type=destructive]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-danger-default-text-initial)}#sinch-button-element{display:flex;box-sizing:border-box;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-button-shape-radius-top-right:0;--sinch-button-shape-radius-top-left:0;--sinch-button-shape-radius-bottom-right:0;--sinch-button-shape-radius-bottom-left:0}:host(:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host(:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="l"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-l)}:host([size="l"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-l)}:host([size="m"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host([size="m"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="s"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-s)}:host([size="s"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-s)}:host([size=xs]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-xs)}:host([size=xs]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-xs)}:host(:is(:not(:first-of-type,:last-of-type))) #sinch-button-element:not(:active){--sinch-button-border-left:none;--sinch-button-border-right:none}:host(:is(:first-of-type)) #sinch-button-element:not(:active){--sinch-button-border-right:none}:host(:is(:last-of-type)) #sinch-button-element:not(:active){--sinch-button-border-left:none}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="wrapper"><sinch-button id="sinch-button-element"><slot id="left-icon" name="left-icon" slot="left-icon"></slot><slot id="icon" name="icon" slot="icon"></slot><slot id="right-icon" name="right-icon" slot="right-icon"></slot></sinch-button></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-button-group-item', class extends NectaryElement {
+  #$sinchButton;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$sinchButton = shadowRoot.querySelector('#sinch-button-element');
+  }
+  static get observedAttributes() {
+    return ['type', 'size', 'text', 'disabled', 'toggled'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    updateAttribute(this.#$sinchButton, name, newVal);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.role = 'button';
+    const forwardEvent = e => this.dispatchEvent(new CustomEvent(e.type, {
+      ...e
+    }));
+    this.addEventListener('-click', e => this.#onClickReactHandler(e), {
+      signal
+    });
+    this.addEventListener('-focus', () => this.#onFocusReactHandler(), {
+      signal
+    });
+    this.addEventListener('-blur', () => this.#onBlurReactHandler(), {
+      signal
+    });
+    this.#$sinchButton.addEventListener('-click', e => forwardEvent(e), {
+      signal
+    });
+    this.#$sinchButton.addEventListener('-focus', e => forwardEvent(e), {
+      signal
+    });
+    this.#$sinchButton.addEventListener('-blur', e => forwardEvent(e), {
+      signal
+    });
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set toggled(isToggled) {
+    updateBooleanAttribute(this, 'toggled', isToggled);
+  }
+  get toggled() {
+    return getBooleanAttribute(this, 'toggled');
+  }
+  get focusable() {
+    return true;
+  }
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});

package/lib/esm/button-group-item/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchButtonElement, TSinchButtonReact } from '../button/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchButtonGroupItemElement = HTMLElement & {
+    text: TSinchButtonElement['text'];
+    disabled: TSinchButtonElement['disabled'];
+    toggled: TSinchButtonElement['toggled'];
+    addEventListener: TSinchButtonElement['addEventListener'];
+    setAttribute: TSinchButtonElement['setAttribute'];
+};
+export type TSinchButtonGroupItemReact = TSinchElementReact<TSinchButtonGroupItemElement> & {
+    text?: TSinchButtonReact['text'];
+    disabled?: TSinchButtonReact['disabled'];
+    toggled?: TSinchButtonReact['toggled'];
+    'on-blur'?: TSinchButtonReact['on-blur'];
+    'on-click'?: TSinchButtonReact['on-click'];
+    'on-focus'?: TSinchButtonReact['on-focus'];
+    'aria-label': TSinchButtonReact['aria-label'];
+};

package/lib/esm/button-group-item/types.js

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

package/lib/esm/dialog/index.js

@@ -8,6 +8,7 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', class extends NectaryElement {
   #$dialog;
+  #$dialogContent;
   #$closeButton;
   #$caption;
   #$actionWrapper;
@@ -18,6 +19,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$dialog = shadowRoot.querySelector('#dialog');
+    this.#$dialogContent = shadowRoot.querySelector('#content');
     this.#$closeButton = shadowRoot.querySelector('#close');
     this.#$caption = shadowRoot.querySelector('#caption');
     this.#$actionWrapper = shadowRoot.querySelector('#action');
@@ -139,6 +141,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     if (!this.#$dialog.open) {
       return;
     }
+    this.#$dialogContent.scrollTo(0, 0);
     this.#$dialog.close?.();
     enableScroll();
   }

package/lib/esm/select-menu/index.js

@@ -15,6 +15,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #$notFound;
   #controller = null;
   #searchDebounce;
+  #userManagedSearch = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -24,7 +25,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#$search = shadowRoot.querySelector('#search');
     this.#$searchClear = shadowRoot.querySelector('#search-clear');
     this.#$notFound = shadowRoot.querySelector('#not-found');
-    this.#searchDebounce = debounceTimeout(200)(this.#updateSearch);
+    this.#searchDebounce = debounceTimeout(200)(this.#updateSearchValue);
   }
   connectedCallback() {
     this.#controller = new AbortController();
@@ -52,7 +53,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['value', 'rows', 'multiple', 'search-placeholder'];
+    return ['value', 'rows', 'multiple', 'search-value', 'search-placeholder'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -80,6 +81,13 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
           updateAttribute(this.#$search, 'placeholder', newVal);
           break;
         }
+      case 'search-value':
+        {
+          updateAttribute(this.#$search, 'value', newVal);
+          this.#userManagedSearch = true;
+          this.#updateSearchList(newVal !== null ? newVal : '');
+          break;
+        }
     }
   }
   set value(value) {
@@ -113,6 +121,13 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   get 'search-placeholder'() {
     return getAttribute(this.#$search, 'placeholder', '');
   }
+  set 'search-value'(value) {
+    updateAttribute(this, 'search-value', value);
+    this.#userManagedSearch = true;
+  }
+  get 'search-value'() {
+    return getAttribute(this, 'search-value', '');
+  }
   get focusable() {
     return true;
   }
@@ -134,35 +149,46 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     }
   };
   #onSearchChange = e => {
-    this.#$search.value = e.detail;
-    this.#searchDebounce.fn();
+    if (!this.#userManagedSearch) {
+      this.#$search.value = e.detail;
+      this.#searchDebounce.fn();
+    } else {
+      this.#updateSearchValue(e.detail);
+    }
     setClass(this.#$searchClear, 'active', e.detail.length > 0);
   };
   #onSearchClearClick = () => {
-    this.#$search.value = '';
+    if (!this.#userManagedSearch) {
+      this.#$search.value = '';
+      this.#searchDebounce.fn();
+    } else {
+      this.#updateSearchValue('');
+    }
     this.#$search.focus();
-    this.#searchDebounce.fn();
     setClass(this.#$searchClear, 'active', false);
   };
-  #updateSearch = () => {
-    const searchValue = this.#$search.value.toLowerCase();
+  #updateSearchValue = newValue => {
+    const searchValue = newValue === undefined ? this.#$search.value.toLowerCase() : newValue;
     const searchChangedEvent = new CustomEvent('-search-change', {
-      detail: searchValue,
+      detail: newValue,
       cancelable: true
     });
     this.dispatchEvent(searchChangedEvent);
     if (!searchChangedEvent.defaultPrevented) {
-      const $options = this.#getOptionElements();
-      let someFound = false;
-      for (const $opt of $options) {
-        const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
-        someFound ||= !isHidden;
-        setClass($opt, 'hidden', isHidden);
-      }
-      setClass(this.#$notFound, 'active', !someFound);
-      this.#selectOption(null);
+      this.#updateSearchList(searchValue);
     }
   };
+  #updateSearchList = searchValue => {
+    const $options = this.#getOptionElements();
+    let someFound = false;
+    for (const $opt of $options) {
+      const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
+      someFound ||= !isHidden;
+      setClass($opt, 'hidden', isHidden);
+    }
+    setClass(this.#$notFound, 'active', !someFound);
+    this.#selectOption(null);
+  };
   #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
   };

package/lib/esm/select-menu/types.d.ts

@@ -10,6 +10,8 @@ export type TSinchSelectMenuElement = HTMLElement & {
     searchable: boolean | null;
     /** Text for search bar's placeholder */
     'search-placeholder': string;
+    /** Optionally control search value manually */
+    'search-value': string;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Change value event */
@@ -36,6 +38,8 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
     'aria-label': string;
     /** Change value handler */
     'on-search-change'?: (e: CustomEvent<string>) => void;
+    /** Optionally control search value manually */
+    'search-value'?: string;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/lib/esm/select-menu-option/index.js

@@ -59,7 +59,7 @@ export class SelectMenuOption extends NectaryElement {
     return getBooleanAttribute(this, 'disabled');
   }
   matchesSearch(searchValue) {
-    return this.text.toLowerCase().includes(searchValue);
+    return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }
 }
 defineCustomElement('sinch-select-menu-option', SelectMenuOption);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "files": [
     "lib"
   ],