@nectary/components 1.4.0 → 2.1.0

package/button/index.js

@@ -1,7 +1,7 @@
 import { defineCustomElement, getBooleanAttribute, getAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getLiteralAttribute, updateLiteralAttribute, Context, subscribeContext } from '../utils';
-import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m);--sinch-button-font:var(--sinch-button-font-m)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l);--sinch-button-font:var(--sinch-button-font-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m);--sinch-button-font:var(--sinch-button-font-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s);--sinch-button-font:var(--sinch-button-font-s)}:host([type=primary]){--sinch-button-color-background:var(--sinch-button-primary-color-background);--sinch-button-color-background-hover:var(--sinch-button-primary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-primary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-primary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-primary-color-border);--sinch-button-color-border-hover:var(--sinch-button-primary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-primary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-primary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-primary-color-text);--sinch-button-color-text-hover:var(--sinch-button-primary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-primary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-primary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-primary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-primary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-primary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-primary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-primary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=secondary]){--sinch-button-color-background:var(--sinch-button-secondary-color-background);--sinch-button-color-background-hover:var(--sinch-button-secondary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-secondary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-secondary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-secondary-color-border);--sinch-button-color-border-hover:var(--sinch-button-secondary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-secondary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-secondary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-secondary-color-text);--sinch-button-color-text-hover:var(--sinch-button-secondary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-secondary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-secondary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-secondary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-secondary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-secondary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-secondary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-secondary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=tertiary]){--sinch-button-color-background:var(--sinch-button-tertiary-color-background);--sinch-button-color-background-hover:var(--sinch-button-tertiary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-tertiary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-tertiary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-tertiary-color-border);--sinch-button-color-border-hover:var(--sinch-button-tertiary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-tertiary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-tertiary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-tertiary-color-text);--sinch-button-color-text-hover:var(--sinch-button-tertiary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-tertiary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-tertiary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-tertiary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-tertiary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-tertiary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-tertiary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-tertiary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-0)}:host([type=cta-primary]){--sinch-button-color-background:var(--sinch-button-cta-primary-color-background);--sinch-button-color-background-hover:var(--sinch-button-cta-primary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-cta-primary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-cta-primary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-cta-primary-color-border);--sinch-button-color-border-hover:var(--sinch-button-cta-primary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-cta-primary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-cta-primary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-cta-primary-color-text);--sinch-button-color-text-hover:var(--sinch-button-cta-primary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-cta-primary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-cta-primary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-cta-primary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-cta-primary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-cta-primary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-cta-primary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-cta-primary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=cta-secondary]){--sinch-button-color-background:var(--sinch-button-cta-secondary-color-background);--sinch-button-color-background-hover:var(--sinch-button-cta-secondary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-cta-secondary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-cta-secondary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-cta-secondary-color-border);--sinch-button-color-border-hover:var(--sinch-button-cta-secondary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-cta-secondary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-cta-secondary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-cta-secondary-color-text);--sinch-button-color-text-hover:var(--sinch-button-cta-secondary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-cta-secondary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-cta-secondary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-cta-secondary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-cta-secondary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-cta-secondary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-cta-secondary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-cta-secondary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=destructive]){--sinch-button-color-background:var(--sinch-button-destructive-color-background);--sinch-button-color-background-hover:var(--sinch-button-destructive-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-destructive-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-destructive-color-background-disabled);--sinch-button-color-border:var(--sinch-button-destructive-color-border);--sinch-button-color-border-hover:var(--sinch-button-destructive-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-destructive-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-destructive-color-border-disabled);--sinch-button-color-text:var(--sinch-button-destructive-color-text);--sinch-button-color-text-hover:var(--sinch-button-destructive-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-destructive-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-destructive-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-destructive-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-destructive-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-destructive-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-destructive-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-destructive-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-size);font:var(--sinch-button-font);color:var(--sinch-button-color-text);cursor:pointer;--sinch-color-icon:var(--sinch-button-color-icon)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-button-color-background);border:1px solid var(--sinch-button-color-border);border-radius:var(--sinch-shape-radius);box-shadow:var(--sinch-elevation-level);pointer-events:none;mix-blend-mode:var(--sinch-button-mix-blend-mode)}#button:focus-visible::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius) + 3px);pointer-events:none}#button:disabled{color:var(--sinch-button-color-text-disabled);cursor:initial;--sinch-color-icon:var(--sinch-button-color-icon-disabled)}#button:disabled::before{background-color:var(--sinch-button-color-background-disabled);border-color:var(--sinch-button-color-border-disabled);box-shadow:var(--sinch-elevation-level-0)}#button:enabled:hover{--sinch-color-icon:var(--sinch-button-color-icon-hover)}#button:enabled:hover::before{background-color:var(--sinch-button-color-background-hover);border-color:var(--sinch-button-color-border-hover)}#button:enabled:active{--sinch-color-icon:var(--sinch-button-color-icon-active)}#button:enabled:active::before{background-color:var(--sinch-button-color-background-active);border-color:var(--sinch-button-color-border-active);border-width:2px;box-shadow:var(--sinch-elevation-level-0)}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:.75em;width:100%;height:100%;padding:0 1em;box-sizing:border-box;pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><button id="button"><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></button>';
-import { assertType, typeValues } from './utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);cursor:pointer;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--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-color-icon:var(--sinch-local-color-icon)}#button:disabled{cursor:initial}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text)}: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-outilne-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}: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=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-tertiary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-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-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-destructive-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-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-destructive-focus)}: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([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([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=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-hover)}:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-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([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-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled)}: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-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-disabled)}: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-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled)}: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-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled)}: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);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-disabled)}#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:.75em;width:100%;height:100%;padding:0 1em;box-sizing:border-box;pointer-events:none}#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}</style><div id="button" inert><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></div>';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-button', class extends NectaryElement {
@@ -12,7 +12,7 @@ defineCustomElement('sinch-button', class extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      delegatesFocus: true
+      delegatesFocus: false
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
@@ -25,14 +25,18 @@ defineCustomElement('sinch-button', class extends NectaryElement {
     const {
       signal
     } = this.#controller;
-    this.setAttribute('role', 'button');
-    this.#$button.addEventListener('click', this.#onButtonClick, {
+    this.role = 'button';
+    this.tabIndex = 0;
+    this.addEventListener('click', this.#onButtonClick, {
       signal
     });
-    this.#$button.addEventListener('focus', this.#onButtonFocus, {
+    this.addEventListener('focus', this.#onButtonFocus, {
       signal
     });
-    this.#$button.addEventListener('blur', this.#onButtonBlur, {
+    this.addEventListener('blur', this.#onButtonBlur, {
+      signal
+    });
+    this.addEventListener('keydown', this.#onButtonKeydown, {
       signal
     });
     this.addEventListener('-click', this.#onClickReactHandler, {
@@ -53,7 +57,7 @@ defineCustomElement('sinch-button', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['text', 'disabled', 'size', 'type', 'data-size'];
+    return ['text', 'disabled', 'size', 'data-size'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -65,17 +69,9 @@ defineCustomElement('sinch-button', class extends NectaryElement {
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          this.#$button.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'size':
         {
           updateAttribute(this, 'data-size', newVal);
@@ -83,9 +79,6 @@ defineCustomElement('sinch-button', class extends NectaryElement {
         }
       case 'data-size':
         {
-          if ('production' !== 'production') {
-            assertSize(newVal, 'sinch-button');
-          }
           this.#onSizeUpdate();
           break;
         }
@@ -118,12 +111,6 @@ defineCustomElement('sinch-button', class extends NectaryElement {
   get focusable() {
     return true;
   }
-  focus() {
-    this.#$button.focus();
-  }
-  blur() {
-    this.#$button.blur();
-  }
   #onSizeUpdate() {
     if (!this.isConnected) {
       return;
@@ -147,8 +134,19 @@ defineCustomElement('sinch-button', class extends NectaryElement {
         }
     }
   };
+  #onButtonKeydown = e => {
+    switch (e.code) {
+      case 'Space':
+      case 'Enter':
+        {
+          this.click();
+        }
+    }
+  };
   #onButtonClick = () => {
-    this.dispatchEvent(new CustomEvent('-click'));
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('-click'));
+    }
   };
   #onButtonFocus = () => {
     this.dispatchEvent(new CustomEvent('-focus'));

package/button/types.d.ts

@@ -2,7 +2,7 @@ import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchButtonType = 'primary' | 'secondary' | 'tertiary' | 'cta-primary' | 'cta-secondary' | 'destructive';
 export type TSinchButtonElement = HTMLElement & {
-    /** Type, `primary` by default */
+    /** Button Type */
     type: TSinchButtonType;
     /** Size, `m` by default */
     size: TSinchSize;
@@ -26,7 +26,7 @@ export type TSinchButtonElement = HTMLElement & {
     setAttribute(attr: 'disabled', value: ''): void;
 };
 export type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
-    /** Type, `primary` by default */
+    /** Button Type */
     type?: TSinchButtonType;
     /** Size, `m` by default */
     size?: TSinchSize;

package/button/utils.d.ts

@@ -1,5 +1,2 @@
 import type { TSinchButtonType } from './types';
 export declare const typeValues: readonly TSinchButtonType[];
-type TAssertType = (value: string | null) => asserts value is TSinchButtonType;
-export declare const assertType: TAssertType;
-export {};

package/button/utils.js

@@ -1,9 +1 @@
-export const typeValues = ['primary', 'secondary', 'tertiary', 'cta-primary', 'cta-secondary', 'destructive'];
-export const assertType = value => {
-  if (value === null || value.length === 0) {
-    return;
-  }
-  if (!typeValues.includes(value)) {
-    throw new Error(`sinch-button: invalid type attribute: ${value}`);
-  }
-};
+export const typeValues = ['primary', 'secondary', 'tertiary', 'cta-primary', 'cta-secondary', 'destructive'];

package/card/index.js

@@ -1,7 +1,7 @@
 import '../title';
 import '../text';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass, NectaryElement, isAttrTrue, getRect } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{color:var(--sinch-color-stormy-300)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#description{color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}:host([draggable=true]) #header{cursor:grab}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateAttribute, setClass, NectaryElement, isAttrTrue, getRect } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-white-default-border-initial);background-color:var(--sinch-comp-card-color-white-default-background-initial);box-shadow:var(--sinch-comp-card-shadow-initial);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-comp-card-shadow-hover)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{--sinch-comp-text-font:var(--sinch-comp-card-font-label);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-text-title)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-global-size-icon:var(--sinch-comp-card-size-icon)}#caption{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-card-font-title);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-text-title)}#description{flex:1;min-height:0;max-height:120px;overflow-y:auto;--sinch-comp-text-font:var(--sinch-comp-card-font-description);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-text-description)}#description:empty{display:none}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}:host([draggable=true]) #header{cursor:grab}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card', class extends NectaryElement {
@@ -47,10 +47,10 @@ defineCustomElement('sinch-card', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['text', 'label', 'caption', 'disabled', 'draggable'];
+    return ['text', 'label', 'caption', 'draggable'];
   }
-  attributeChangedCallback(name, prevVal, newVal) {
-    if (prevVal === newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
       return;
     }
     switch (name) {
@@ -69,11 +69,6 @@ defineCustomElement('sinch-card', class extends NectaryElement {
           updateAttribute(this.#$caption, 'text', newVal);
           break;
         }
-      case 'disabled':
-        {
-          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
-          break;
-        }
       case 'draggable':
         {
           const isDraggingEnabled = isAttrTrue(newVal);
@@ -105,12 +100,6 @@ defineCustomElement('sinch-card', class extends NectaryElement {
   get label() {
     return getAttribute(this, 'label', '');
   }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
   get dragRect() {
     return this.#isDraggingSubscribed ? getRect(this.#$header) : null;
   }

package/card/types.d.ts

@@ -6,8 +6,6 @@ export type TSinchCardElement = HTMLElement & {
     caption: string;
     /** Label */
     label: string | null;
-    /** Disabled */
-    disabled: boolean;
     readonly dragRect: TRect | null;
     /** Text */
     setAttribute(name: 'text', value: string): void;
@@ -15,8 +13,6 @@ export type TSinchCardElement = HTMLElement & {
     setAttribute(name: 'caption', value: string): void;
     /** Label */
     setAttribute(name: 'label', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
     /** Draggable */
     setAttribute(name: 'draggable', value: ''): void;
 };
@@ -27,8 +23,6 @@ export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
     caption: string;
     /** Label */
     label?: string;
-    /** Disabled */
-    disabled?: boolean;
     /** Draggable */
     draggable?: boolean;
 };

package/card-container/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);font:var(--sinch-font-text-m)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-comp-card-color-white-default-background-initial);border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-white-default-border-initial)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card-container', class extends NectaryElement {

package/chat-block/index.js

@@ -1,6 +1,6 @@
 import { typeValues } from '../chat-bubble/utils';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-400)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-sys-font-body-xs);color:var(--sinch-sys-color-text-default)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-block', class extends NectaryElement {

package/chat-bubble/index.d.ts

@@ -1,4 +1,3 @@
-import '../icon';
 import type { TSinchChatBubbleElement, TSinchChatBubbleReact } from './types';
 declare global {
     namespace JSX {

package/chat-bubble/index.js

@@ -1,28 +1,18 @@
-import '../icon';
-import { defineCustomElement, getAttribute, getCssVar, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;padding:12px 16px;border-radius:16px;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#wrapper{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}#text{font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}#icon{display:none;position:absolute;right:16px;bottom:12px;--sinch-size-icon:16px;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-icon-font-variation-settings:var(--sinch-chat-icon-font-variation-settings)}:host([status=error]) #icon,:host([status=received]) #icon,:host([status=seen]) #icon,:host([status=sending]) #icon,:host([status=sent]) #icon{display:block}:host([status=seen]) #icon{--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([status=error]) #icon{--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><span id="text"></span><sinch-icon id="icon"></sinch-icon></div>';
+import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;padding:12px 16px;border-radius:16px;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#wrapper{background-color:var(--sinch-sys-color-container-contrast-primary-default);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-sys-color-container-contrast-primary-active);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-sys-color-container-complement-primary-hover);border-top-right-radius:0}#text{--sinch-global-color-text:var(--sinch-sys-color-text-default)}#icon-error,#icon-received,#icon-seen,#icon-sending,#icon-sent{display:none;position:absolute;right:16px;bottom:12px;height:16px}#icon-sending{fill:var(--sinch-sys-color-text-default)}#icon-sent{fill:var(--sinch-sys-color-text-default)}#icon-received{fill:var(--sinch-sys-color-text-default)}#icon-seen{fill:var(--sinch-sys-color-feedback-success-contrast)}#icon-error{fill:var(--sinch-sys-color-feedback-invalid-contrast)}:host([status=error]) #icon-error,:host([status=received]) #icon-received,:host([status=seen]) #icon-seen,:host([status=sending]) #icon-sending,:host([status=sent]) #icon-sent{display:block}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><svg id="icon-sending" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24a.71.71 0 0 0-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72Z"/></svg><svg id="icon-sent" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg><svg id="icon-received" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.3 6.3a.996.996 0 0 0-1.41 0l-5.64 5.64 1.41 1.41L17.3 7.7c.38-.38.38-1.02 0-1.4Zm4.24-.01-9.88 9.88-3.48-3.47a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L22.95 7.71a.996.996 0 0 0 0-1.41h-.01a.975.975 0 0 0-1.4-.01ZM1.12 14.12 5.3 18.3c.39.39 1.02.39 1.41 0l.7-.7-4.88-4.9a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42Z"/></svg><svg id="icon-seen" id="icon-received" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.3 6.3a.996.996 0 0 0-1.41 0l-5.64 5.64 1.41 1.41L17.3 7.7c.38-.38.38-1.02 0-1.4Zm4.24-.01-9.88 9.88-3.48-3.47a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L22.95 7.71a.996.996 0 0 0 0-1.41h-.01a.975.975 0 0 0-1.4-.01ZM1.12 14.12 5.3 18.3c.39.39 1.02.39 1.41 0l.7-.7-4.88-4.9a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42Z"/></svg><svg id="icon-error" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 7c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1Zm-.01-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm1-3h-2v-2h2v2Z"/></svg></div>';
 import { statusValues, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
   #$text;
-  #$icon;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
-    this.#$icon = shadowRoot.querySelector('#icon');
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#updateIcon();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ['text', 'status'];
+    return ['text'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -31,11 +21,6 @@ defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
           this.#$text.textContent = newVal;
           break;
         }
-      case 'status':
-        {
-          this.#updateIcon();
-          break;
-        }
     }
   }
   set text(value) {
@@ -53,11 +38,4 @@ defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
   get status() {
     return getLiteralAttribute(this, statusValues, 'status', null);
   }
-  #updateIcon() {
-    if (!this.isConnected) {
-      return;
-    }
-    const status = this.status;
-    updateAttribute(this.#$icon, 'name', status !== null ? getCssVar(this, `--sinch-chat-icon-${status}`) : null);
-  }
 });

package/checkbox/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-700);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-text-disabled);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-checkbox-background);border:2px solid var(--sinch-color-checkbox-border);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-text-m);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);border-color:var(--sinch-color-checkbox-border-checked)}#checkbox:focus-visible::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus-visible::after{background-color:var(--sinch-color-checkbox-background-focus);border-color:var(--sinch-color-checkbox-border-focus)}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);border-color:var(--sinch-color-checkbox-border-hover)}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);border-color:var(--sinch-color-checkbox-border-active)}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);border-color:var(--sinch-color-checkbox-border-disabled)}#checkbox:focus-visible:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus-visible:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);border-color:var(--sinch-color-checkbox-border-focus-checked)}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);border-color:var(--sinch-color-checkbox-border-hover-checked)}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);border-color:var(--sinch-color-checkbox-border-active-checked)}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);border-color:var(--sinch-color-checkbox-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/><svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg><svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;--sinch-local-size:24px;--sinch-local-color-background:var(--sinch-comp-checkbox-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-default-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-default-text-initial)}:host([invalid])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-invalid-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-invalid-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-invalid-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-invalid-text-initial)}:host([checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-checked-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-checked-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-checkbox-color-disabled-text-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-disabled-border-initial)}#checkbox{all:initial;display:block;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);align-self:flex-start}#checkbox::before{content:"";position:absolute;top:0;left:0;width:var(--sinch-local-size);height:var(--sinch-local-size);border:2px solid var(--sinch-comp-checkbox-color-default-outline-focus);border-radius:calc(var(--sinch-comp-checkbox-shape-radius) + 3px);transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}#checkbox:focus-visible::before{opacity:1}#checkbox::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-comp-checkbox-shape-radius);transition:background-color .1s linear;box-sizing:border-box;pointer-events:none}#checkbox:enabled:hover::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}#checkbox:enabled:active::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#icon-checkmark,#icon-indeterminate{position:absolute;left:4px;top:4px;width:16px;height:16px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-sys-color-container-main-default)}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;padding-left:7px;font:var(--sinch-comp-checkbox-font-label);color:var(--sinch-local-color-text);cursor:pointer}:host([disabled]) #label{cursor:initial}:host([text]:not([text=""])) #label{display:block}:host(:not([indeterminate])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]) #checkbox:checked~#icon-indeterminate{opacity:1}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/><svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg><svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg></div><label for="checkbox" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-checkbox', class extends NectaryElement {
@@ -7,9 +7,7 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
   #$label;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$input = shadowRoot.querySelector('input');
     this.#$label = shadowRoot.querySelector('label');
@@ -32,13 +30,37 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
   static get observedAttributes() {
-    return ['checked', 'disabled', 'text'];
+    return ['checked', 'disabled', 'text', 'invalid', 'indeterminate'];
   }
-  get type() {
-    return 'text';
-  }
-  get nodeName() {
-    return 'input';
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#$label.textContent = newVal;
+          break;
+        }
+      case 'checked':
+        {
+          const isChecked = isAttrTrue(newVal);
+          this.#$input.checked = isChecked;
+          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
+          updateBooleanAttribute(this, 'checked', isChecked);
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#$input.disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
+          break;
+        }
+      case 'invalid':
+      case 'indeterminate':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
   }
   set checked(isChecked) {
     updateBooleanAttribute(this, 'checked', isChecked);
@@ -70,29 +92,6 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
   get text() {
     return getAttribute(this, 'text');
   }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$label.textContent = newVal;
-          break;
-        }
-      case 'checked':
-        {
-          const isChecked = isAttrTrue(newVal);
-          this.#$input.checked = isChecked;
-          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = isAttrTrue(newVal);
-          this.#$input.disabled = isDisabled;
-          updateBooleanAttribute(this, 'disabled', isDisabled);
-          break;
-        }
-    }
-  }
   get focusable() {
     return true;
   }

package/checkbox/types.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchCheckboxElement = HTMLElement & {
     /** Value */
     checked: boolean;
@@ -41,8 +40,6 @@ export type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
     text?: string;
     /** Label that is used for a11y – might be different from `label` */
     'aria-label': string;
-    /** @deprecated */
-    onChange?: (event: SyntheticEvent<TSinchCheckboxElement, CustomEvent<boolean>>) => void;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<boolean>) => void;
     /** Focus handler */