@nectary/components 1.4.0 → 2.1.0

package/rich-text/utils.js

@@ -1,6 +1 @@
-export const sizeValues = ['m', 's', 'xs', 'xxs'];
-export const assertSize = value => {
-  if (value === null || !sizeValues.includes(value)) {
-    throw new Error(`sinch-rich-text: invalid "size" attribute: "${value}"`);
-  }
-};
+export const sizeValues = ['m', 's', 'xs', 'xxs'];

package/segment/index.js

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

package/segment-collapse/index.js

@@ -1,24 +1,21 @@
 import '../icon';
 import '../icon-button';
-import { defineCustomElement, getBooleanAttribute, getCssVar, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;--sinch-size-icon:32px}#icon-dropdown{display:block;will-change:transform;transform:rotate(180deg)}:host([value]:not([value=false])) #icon-dropdown{transform:rotate(0)}</style><sinch-icon-button id="button" size="s"><sinch-icon id="icon-dropdown" slot="icon"></sinch-icon></sinch-icon-button>';
+import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;--sinch-global-size-icon:32px}#icon-dropdown{display:block;will-change:transform;transform:rotate(180deg)}:host([value]:not([value=false])) #icon-dropdown{transform:rotate(0)}</style><sinch-icon-button id="button" size="s"><sinch-icon id="icon-dropdown" slot="icon" name="keyboard_arrow_down"></sinch-icon></sinch-icon-button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segment-collapse', class extends NectaryElement {
   #$button;
-  #$iconDropdown;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
-    this.#$iconDropdown = shadowRoot.querySelector('#icon-dropdown');
   }
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
     this.#$button.addEventListener('click', this.#onClick);
     this.addEventListener('-change', this.#onChangeReactHandler);
-    updateAttribute(this.#$iconDropdown, 'name', getCssVar(this, '--sinch-segment-icon-dropdown'));
   }
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onClick);
@@ -36,12 +33,6 @@ defineCustomElement('sinch-segment-collapse', class extends NectaryElement {
         }
     }
   }
-  get type() {
-    return 'text';
-  }
-  get nodeName() {
-    return 'input';
-  }
   set value(isChecked) {
     updateBooleanAttribute(this, 'value', isChecked);
   }

package/segment-collapse/types.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchSegmentExpandElement = HTMLElement & {
     value: boolean;
     addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
@@ -9,7 +8,5 @@ export type TSinchSegmentExpandElement = HTMLElement & {
 export type TSinchSegmentExpandReact = TSinchElementReact<TSinchSegmentExpandElement> & {
     value: boolean;
     'aria-label': string;
-    /** @deprecated */
-    onChange?: (e: SyntheticEvent<TSinchSegmentExpandElement, CustomEvent<boolean>>) => void;
     'on-change'?: (e: CustomEvent<boolean>) => void;
 };

package/segmented-control/index.js

@@ -24,9 +24,6 @@ defineCustomElement('sinch-segmented-control', class extends NectaryElement {
   static get observedAttributes() {
     return ['value'];
   }
-  get nodeName() {
-    return 'select';
-  }
   set value(value) {
     updateAttribute(this, 'value', value);
   }

package/segmented-control/types.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchSegmentedControlElement = HTMLElement & {
     value: string;
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
@@ -8,7 +7,5 @@ export type TSinchSegmentedControlElement = HTMLElement & {
 export type TSinchSegmentedControlReact = TSinchElementReact<TSinchSegmentedControlElement> & {
     value: string;
     'aria-label': string;
-    /** @deprecated */
-    onChange?: (event: SyntheticEvent<TSinchSegmentedControlElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/segmented-control-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;position:relative;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:0;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-3px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-border-focus);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="button" id="content"></label><button id="button"></button></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;color:var(--sinch-local-color-text);background-color:var(--sinch-local-color-background);--sinch-local-color-text:var(--sinch-comp-segmented-control-color-default-text-initial);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon)}#wrapper:hover{--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);border-right-width:0;pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-right-width:1px;border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{left:-1px}:host(:not(:last-child)) #border{right:-1px}:host([data-checked]) #border{border-width:2px;z-index:1}#button{all:initial;position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus-visible::before{content:"";position:absolute;inset:-4px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus)}:host(:first-child) #button:focus-visible::before{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #button:focus-visible::before{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host([disabled]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial)}#content{font:var(--sinch-comp-segmented-control-font-label);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><label for="button" id="content"></label><div id="border"></div><button id="button"></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-control-option', class extends NectaryElement {
@@ -30,24 +30,6 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
   static get observedAttributes() {
     return ['data-checked', 'disabled', 'text'];
   }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
@@ -66,10 +48,29 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
       case 'disabled':
         {
           this.#$button.disabled = isAttrTrue(newVal);
+          updateBooleanAttribute(this, name, this.#$button.disabled);
           break;
         }
     }
   }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
   get focusable() {
     return true;
   }

package/segmented-icon-control/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row}</style><div id="wrapper"><slot></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement {
@@ -24,9 +24,6 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
   static get observedAttributes() {
     return ['value'];
   }
-  get nodeName() {
-    return 'select';
-  }
   set value(value) {
     updateAttribute(this, 'value', value);
   }

package/segmented-icon-control/types.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchSegmentedIconControlElement = HTMLElement & {
     value: string;
     multiple: boolean;
@@ -11,7 +10,5 @@ export type TSinchSegmentedIconControlReact = TSinchElementReact<TSinchSegmented
     value: string;
     multiple?: boolean;
     'aria-label': string;
-    /** @deprecated */
-    onChange?: (event: SyntheticEvent<TSinchSegmentedIconControlElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

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

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-400)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-border-focus);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;background-color:var(--sinch-local-color-background);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial)}#wrapper:hover{--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);border-right-width:0;pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-right-width:1px;border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{left:-1px}:host(:not(:last-child)) #border{right:-1px}:host([data-checked]) #border{border-width:2px;z-index:1}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus-visible::before{content:"";position:absolute;inset:-4px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus)}:host(:first-child) #button:focus-visible::before{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #button:focus-visible::before{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><div id="border"></div><button id="button"></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-icon-control-option', class extends NectaryElement {
@@ -28,19 +28,10 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
   static get observedAttributes() {
     return ['data-checked', 'disabled'];
   }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'data-checked':
         {
@@ -50,10 +41,23 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
       case 'disabled':
         {
           this.#$button.disabled = isAttrTrue(newVal);
+          updateBooleanAttribute(this, name, this.#$button.disabled);
           break;
         }
     }
   }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
   get focusable() {
     return true;
   }

package/select-button/index.js

@@ -1,14 +1,13 @@
 import '../text';
 import '../icon';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context, getCssVar } from '../utils';
-import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-select-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-select-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-size);padding:0 8px 0 12px;background-color:var(--sinch-color-bg-primary-light);border-radius:var(--sinch-shape-radius);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]:not([disabled=false])) #wrapper{--sinch-color-icon:var(--sinch-color-text-disabled)}#button{all:initial;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}#text{flex:1;min-width:0;color:var(--sinch-color-text-muted)}:host([text]:not([text=""])) #text{color:var(--sinch-color-text-default)}#button:disabled{cursor:initial}#button:disabled+#border{border-color:var(--sinch-color-border-disabled)}#button:focus-visible+#border{border-color:var(--sinch-color-border-focus);border-width:2px}:host([invalid]) #button:enabled+#border{border-color:var(--sinch-color-text-invalid)}#button:disabled~#text{color:var(--sinch-color-text-disabled)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper"><button id="button"></button><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-icon id="dropdown-icon"></sinch-icon></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context } from '../utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);cursor:pointer;--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial);cursor:initial}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-button', class extends NectaryElement {
-  #$button;
-  #$icon;
   #$text;
+  #$placeholder;
   #$leftSlot;
   #$leftWrapper;
   #$wrapper;
@@ -17,12 +16,11 @@ defineCustomElement('sinch-select-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');
-    this.#$icon = shadowRoot.querySelector('#dropdown-icon');
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$placeholder = shadowRoot.querySelector('#placeholder');
     this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
     this.#$leftWrapper = shadowRoot.querySelector('#left');
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
@@ -34,14 +32,18 @@ defineCustomElement('sinch-select-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, {
@@ -56,7 +58,6 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
     this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, {
       signal
     });
-    updateAttribute(this.#$icon, 'name', getCssVar(this, '--sinch-select-button-icon-dropdown'));
     this.#sizeContext.listen(this.#controller.signal);
     subscribeContext(this, 'size', this.#onContextSize, signal);
     this.#onLeftSlotChange();
@@ -76,29 +77,24 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
     switch (name) {
       case 'text':
         {
-          const value = newVal ?? '';
-          this.#$text.textContent = value.length > 0 ? value : this.placeholder;
+          this.#$text.textContent = newVal;
           break;
         }
       case 'placeholder':
         {
-          const value = this.text;
-          if (value.length === 0) {
-            this.#$text.textContent = newVal ?? '';
-          }
+          this.#$placeholder.textContent = newVal;
           break;
         }
       case 'invalid':
         {
           const isInvalid = isAttrTrue(newVal);
-          updateBooleanAttribute(this, 'invalid', isInvalid);
           updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateBooleanAttribute(this, 'invalid', isInvalid);
           break;
         }
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          this.#$button.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
@@ -109,9 +105,6 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
         }
       case 'data-size':
         {
-          if ('production' !== 'production') {
-            assertSize(newVal, 'sinch-select-button');
-          }
           this.#onSizeUpdate();
           break;
         }
@@ -150,12 +143,6 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   get focusable() {
     return true;
   }
-  focus() {
-    this.#$button.focus();
-  }
-  blur() {
-    this.#$button.blur();
-  }
   #onContextSize = e => {
     if (this.hasAttribute('size')) {
       return;
@@ -188,8 +175,19 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   #onButtonBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
   };
+  #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'));
+    }
   };
   #onClickReactHandler = e => {
     getReactEventHandler(this, 'on-click')?.(e);

package/select-menu/index.js

@@ -2,8 +2,8 @@ import '../input';
 import '../icon-button';
 import '../icon';
 import '../text';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, getCssVar, hasClass } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#not-found{display:none;width:100%;height:30px;align-items:center;justify-content:center;margin-bottom:10px;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon id="icon-search" slot="icon"></sinch-icon></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, hasClass } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon id="icon-search" slot="icon" name="search"></sinch-icon><sinch-icon-button id="search-clear" slot="right"><sinch-icon slot="icon" name="close"></sinch-icon></sinch-icon-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 7;
 const template = document.createElement('template');
@@ -12,18 +12,20 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #$search;
-  #$iconSearch;
+  #$searchClear;
   #$notFound;
   #controller = null;
   #searchDebounce;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: false
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$optionSlot = shadowRoot.querySelector('slot');
     this.#$listbox = shadowRoot.querySelector('#listbox');
     this.#$search = shadowRoot.querySelector('#search');
-    this.#$iconSearch = shadowRoot.querySelector('#icon-search');
+    this.#$searchClear = shadowRoot.querySelector('#search-clear');
     this.#$notFound = shadowRoot.querySelector('#not-found');
     this.#searchDebounce = debounceTimeout(200)(this.#updateSearch);
   }
@@ -32,19 +34,19 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute('role', 'listbox');
-    this.setAttribute('tabindex', '0');
+    this.role = 'listbox';
+    this.tabIndex = 0;
     this.addEventListener('keydown', this.#onListboxKeyDown, options);
     this.addEventListener('focus', this.#onFocus, options);
     this.addEventListener('blur', this.#onListboxBlur, options);
     this.#$listbox.addEventListener('mousedown', this.#onListboxMousedown, options);
     this.#$listbox.addEventListener('click', this.#onListboxClick, options);
     this.#$search.addEventListener('-change', this.#onSearchChange, options);
+    this.#$searchClear.addEventListener('-click', this.#onSearchClearClick, options);
     this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, options);
     this.addEventListener('-change', this.#onChangeReactHandler, options);
     subscribeContext(this, 'keydown', this.#onContextKeyDown, this.#controller.signal);
     subscribeContext(this, 'visibility', this.#onContextVisibility, this.#controller.signal);
-    updateAttribute(this.#$iconSearch, 'name', getCssVar(this, '--sinch-select-menu-icon-search'));
     this.#onOptionSlotChange();
   }
   disconnectedCallback() {
@@ -118,6 +120,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   };
   #onListboxClick = e => {
     const $elem = e.target;
+    this.focus();
     if (!getBooleanAttribute($elem, 'disabled')) {
       this.#selectOption($elem);
     }
@@ -125,6 +128,13 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #onSearchChange = e => {
     this.#$search.value = e.detail;
     this.#searchDebounce.fn();
+    setClass(this.#$searchClear, 'active', e.detail.length > 0);
+  };
+  #onSearchClearClick = () => {
+    this.#$search.value = '';
+    this.#$search.focus();
+    this.#searchDebounce.fn();
+    setClass(this.#$searchClear, 'active', false);
   };
   #updateSearch = () => {
     const searchValue = this.#$search.value.toLowerCase();

package/select-menu-option/index.js

@@ -1,22 +1,19 @@
 import '../icon';
 import '../text';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex:1}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([disabled])>#wrapper{cursor:initial;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon id="icon-check"></sinch-icon></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon id="icon-check" name="check"></sinch-icon></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 export class SelectMenuOption extends NectaryElement {
-  #$iconCheck;
   #$content;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$content = shadowRoot.querySelector('#content');
-    this.#$iconCheck = shadowRoot.querySelector('#icon-check');
   }
   connectedCallback() {
     this.setAttribute('role', 'option');
-    updateAttribute(this.#$iconCheck, 'name', getCssVar(this, '--sinch-select-menu-icon-check'));
   }
   static get observedAttributes() {
     return ['text', 'data-checked', 'disabled'];

package/skeleton/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getUid, isAttrTrue, NectaryElement, shouldReduceMotion } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-500)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-color-snow-400) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-sys-color-container-main-default);border-radius:var(--sinch-sys-shape-radius-l);border:1px solid var(--sinch-sys-color-border-light)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-sys-color-container-contrast-primary-default) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const ANIMATION_DURATION = 2000;

package/skeleton-item/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getCssVar, NectaryElement, attrValueToInteger, shouldReduceMotion } from '../utils';
-const templateHTML = '<style>:host{display:block;height:var(--sinch-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([size=xs]){height:var(--sinch-size-xs);--sinch-shape-radius:var(--sinch-shape-radius-xs)}:host([size="s"]){height:var(--sinch-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}:host([size="m"]){height:var(--sinch-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([size="l"]){height:var(--sinch-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}#content{height:100%;background-color:var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius)}</style><div id="content"></div>';
+const templateHTML = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-light);border-radius:var(--sinch-local-shape-radius)}</style><div id="content"></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-skeleton-item', class extends NectaryElement {