@nectary/components 0.40.0 → 0.41.1

package/accordion-item/index.js

@@ -110,6 +110,10 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
     }));
   };
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$button.focus();
   }

package/action-menu/index.js

@@ -1,5 +1,6 @@
 import { isSinchActionMenuOption } from '../action-menu-option/utils';
 import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
@@ -7,7 +8,7 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-action-menu', class extends NectaryElement {
   #$optionSlot;
   #$listbox;
-  #controller = new AbortController();
+  #controller = null;
 
   constructor() {
     super();
@@ -18,6 +19,7 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
   }
 
   connectedCallback() {
+    this.#controller = new AbortController();
     const {
       signal
     } = this.#controller;
@@ -38,21 +40,13 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
     this.#$listbox.addEventListener('click', this.#onListboxClick, {
       signal
     });
-    this.dispatchEvent(new CustomEvent('-context-connect-keydown', {
-      bubbles: true
-    }));
-    this.dispatchEvent(new CustomEvent('-context-connect-visibility', {
-      bubbles: true
-    }));
+    dispatchContextConnectEvent(this, 'keydown');
+    dispatchContextConnectEvent(this, 'visibility');
   }
 
   disconnectedCallback() {
-    this.dispatchEvent(new CustomEvent('-context-disconnect-keydown', {
-      bubbles: true
-    }));
-    this.dispatchEvent(new CustomEvent('-context-disconnect-visibility', {
-      bubbles: true
-    }));
+    dispatchContextDisconnectEvent(this, 'keydown');
+    dispatchContextDisconnectEvent(this, 'visibility');
     this.#controller.abort();
   }
 
@@ -248,4 +242,8 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
     return null;
   }
 
+  get focusable() {
+    return true;
+  }
+
 });

package/action-menu-option/index.js

@@ -6,7 +6,7 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends NectaryElement {
   #$wrapper;
   #$content;
-  #controller = new AbortController();
+  #controller = null;
 
   constructor() {
     super();
@@ -17,6 +17,7 @@ defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends N
   }
 
   connectedCallback() {
+    this.#controller = new AbortController();
     const {
       signal
     } = this.#controller;

package/button/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{--sinch-button-color-background:var(--sinch-color-tropical-500);--sinch-button-color-background-hover:var(--sinch-color-tropical-400);--sinch-button-color-background-active:var(--sinch-color-tropical-600);--sinch-button-color-background-disabled:var(--sinch-color-tropical-100);--sinch-button-color-border:var(--sinch-color-transparent);--sinch-button-color-border-disabled:var(--sinch-color-transparent);--sinch-button-color-text:var(--sinch-color-snow-100);--sinch-button-color-text-disabled:var(--sinch-color-snow-100);--sinch-button-shape-radius:var(--sinch-shape-radius-l);display:inline-block;vertical-align:middle;outline:0}#button{--sinch-color-icon:var(--sinch-button-color-text);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}#button:disabled{--sinch-color-icon:var(--sinch-button-color-text-disabled);--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([small]:not([small=false])){--sinch-button-shape-radius:var(--sinch-shape-radius-m)}:host([type=secondary]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-tropical-100);--sinch-button-color-background-active:var(--sinch-color-tropical-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-border:var(--sinch-color-tropical-500);--sinch-button-color-border-disabled:var(--sinch-color-tropical-200);--sinch-button-color-text:var(--sinch-color-tropical-500);--sinch-button-color-text-disabled:var(--sinch-color-tropical-200)}:host([type=secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-tropical-500);--sinch-color-spinner-fg:var(--sinch-color-tropical-100)}:host([type=secondary]) #button:enabled:active,:host([type=secondary]) #button:enabled:hover{--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([type=secondary]) #button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200)}:host([type=cta-primary]){--sinch-button-color-background:var(--sinch-color-honey-500);--sinch-button-color-background-hover:var(--sinch-color-honey-400);--sinch-button-color-background-active:var(--sinch-color-honey-600);--sinch-button-color-background-disabled:var(--sinch-color-honey-200);--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-300)}:host([type=cta-primary])>#button{--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-primary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-honey-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-button-color-background:transparent;--sinch-button-color-background-hover:#F1F3F4;--sinch-button-color-background-active:#E3E6E8;--sinch-button-color-background-disabled:transparent;--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-100);--sinch-button-color-border:var(--sinch-color-stormy-500);--sinch-button-color-border-disabled:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-snow-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-secondary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-500);--sinch-color-spinner-fg:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button::before{mix-blend-mode:multiply}:host([type=destructive]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-raspberry-100);--sinch-button-color-background-active:var(--sinch-color-raspberry-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-text:var(--sinch-color-raspberry-500);--sinch-button-color-text-disabled:var(--sinch-color-raspberry-200);--sinch-button-color-border:var(--sinch-color-raspberry-500);--sinch-button-color-border-disabled:var(--sinch-color-raspberry-200)}:host([type=destructive])>#button{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:enabled:active,:host([type=destructive])>#button:enabled:hover{--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-200)}#button{all:initial;display:block;position:relative;width:100%;height:48px;font:var(--sinch-font-title-s);color:var(--sinch-button-color-text);cursor:pointer;--sinch-size-icon:24px}#button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-button-color-border);border-radius:var(--sinch-button-shape-radius);background-color:var(--sinch-button-color-background);box-shadow:var(--sinch-elevation-level-1);pointer-events:none}#button:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}}#button:enabled:hover::before{background-color:var(--sinch-button-color-background-hover)}#button:enabled:active::before{background-color:var(--sinch-button-color-background-active);border-width:2px;box-shadow:var(--sinch-elevation-level-0)}#button:disabled{color:var(--sinch-button-color-text-disabled);cursor:initial}#button:disabled::before{background-color:var(--sinch-button-color-background-disabled);border-color:var(--sinch-button-color-border-disabled)}:host([type=cta-primary])>#button::before,:host([type=primary])>#button::before{border-width:0}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 16px;box-sizing:border-box;pointer-events:none}:host([small]:not([small=false]))>#button{font:var(--sinch-font-title-xs);height:32px;--sinch-size-icon:16px}:host([small]:not([small=false])) #content{padding:0 12px;gap:8px}#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>';
+const templateHTML = '<style>:host{--sinch-button-color-background:var(--sinch-color-tropical-500);--sinch-button-color-background-hover:var(--sinch-color-tropical-400);--sinch-button-color-background-active:var(--sinch-color-tropical-600);--sinch-button-color-background-disabled:var(--sinch-color-tropical-100);--sinch-button-color-border:var(--sinch-color-transparent);--sinch-button-color-border-disabled:var(--sinch-color-transparent);--sinch-button-color-text:var(--sinch-color-snow-100);--sinch-button-color-text-disabled:var(--sinch-color-snow-100);--sinch-button-shape-radius:var(--sinch-shape-radius-l);display:inline-block;vertical-align:middle;outline:0}#button{--sinch-color-icon:var(--sinch-button-color-text);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}#button:disabled{--sinch-color-icon:var(--sinch-button-color-text-disabled);--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([small]:not([small=false])){--sinch-button-shape-radius:var(--sinch-shape-radius-m)}:host([type=secondary]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-tropical-100);--sinch-button-color-background-active:var(--sinch-color-tropical-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-border:var(--sinch-color-tropical-500);--sinch-button-color-border-disabled:var(--sinch-color-tropical-200);--sinch-button-color-text:var(--sinch-color-tropical-500);--sinch-button-color-text-disabled:var(--sinch-color-tropical-200)}:host([type=secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-tropical-500);--sinch-color-spinner-fg:var(--sinch-color-tropical-100)}:host([type=secondary]) #button:enabled:active,:host([type=secondary]) #button:enabled:hover{--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([type=secondary]) #button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200)}:host([type=cta-primary]){--sinch-button-color-background:var(--sinch-color-honey-500);--sinch-button-color-background-hover:var(--sinch-color-honey-400);--sinch-button-color-background-active:var(--sinch-color-honey-600);--sinch-button-color-background-disabled:var(--sinch-color-honey-200);--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-300)}:host([type=cta-primary])>#button{--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-primary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-honey-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-button-color-background:transparent;--sinch-button-color-background-hover:#F1F3F4;--sinch-button-color-background-active:#E3E6E8;--sinch-button-color-background-disabled:transparent;--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-100);--sinch-button-color-border:var(--sinch-color-stormy-500);--sinch-button-color-border-disabled:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-snow-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-secondary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-500);--sinch-color-spinner-fg:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button::before{mix-blend-mode:multiply}:host([type=destructive]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-raspberry-100);--sinch-button-color-background-active:var(--sinch-color-raspberry-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-text:var(--sinch-color-raspberry-500);--sinch-button-color-text-disabled:var(--sinch-color-raspberry-200);--sinch-button-color-border:var(--sinch-color-raspberry-500);--sinch-button-color-border-disabled:var(--sinch-color-raspberry-200)}:host([type=destructive])>#button{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:enabled:active,:host([type=destructive])>#button:enabled:hover{--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-200)}#button{all:initial;display:block;position:relative;width:100%;height:48px;font:var(--sinch-font-title-s);color:var(--sinch-button-color-text);cursor:pointer;--sinch-size-icon:24px}#button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-button-color-border);border-radius:var(--sinch-button-shape-radius);background-color:var(--sinch-button-color-background);box-shadow:var(--sinch-elevation-level-1);pointer-events:none}#button:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}}#button:enabled:hover::before{background-color:var(--sinch-button-color-background-hover)}#button:enabled:active::before{background-color:var(--sinch-button-color-background-active);border-width:2px;box-shadow:var(--sinch-elevation-level-0)}#button:disabled{color:var(--sinch-button-color-text-disabled);cursor:initial}#button:disabled::before{background-color:var(--sinch-button-color-background-disabled);border-color:var(--sinch-button-color-border-disabled)}:host([type=cta-primary])>#button::before,:host([type=primary])>#button::before{border-width:0}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 16px;box-sizing:border-box;pointer-events:none}:host([small]:not([small=false]))>#button{font:var(--sinch-font-title-xs);height:32px;--sinch-size-icon:16px}:host([small]:not([small=false])) #content{padding:0 12px;gap:8px}#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 { buttonTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -88,6 +88,10 @@ defineCustomElement('sinch-button', class extends NectaryElement {
     return getBooleanAttribute(this, 'small');
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$button.focus();
   }

package/button/types.d.ts

@@ -29,7 +29,7 @@ export declare type TSinchButtonReact = TSinchElementReact<TSinchButtonElement>
     type: TSinchButtonType;
     /** Text content */
     text: string;
-    /** Label that is used for a11y – might be different from `label` */
+    /** Label that is used for a11y */
     'aria-label': string;
     /** Disabled */
     disabled?: boolean;

package/checkbox/index.js

@@ -111,6 +111,10 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
     }
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
     this.#$input.focus();
   }

package/chip/index.js

@@ -1,14 +1,14 @@
 import '../text';
 import '../icons/cancel';
-import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, getReactEventHandler } from '../utils';
-import { assertColorNameValue, colorMap, colorNameValues, NO_COLOR } from '../utils/colors';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 12px;border-radius:12px;color:var(--sinch-color-text-default);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}:host([small]:not([small=false])) #button:focus::after{border-radius:14px}}#button.no-color{background-color:var(--sinch-color-snow-500)}#button.inverted{color:var(--sinch-color-text-inverted);--sinch-color-icon:var(--sinch-color-snow-100)}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 8px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}:host([small]:not([small=false])) ::slotted(*){margin-left:-2px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler } from '../utils';
+import { NO_COLOR } from '../utils/colors';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-color-snow-500);color:var(--sinch-color-text-default);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}:host([small]:not([small=false])) #button:focus::after{border-radius:14px}}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chip', class extends NectaryElement {
   #$text;
   #$button;
-  #controller = new AbortController();
+  #controller = null;
 
   constructor() {
     super();
@@ -19,6 +19,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
   }
 
   connectedCallback() {
+    this.#controller = new AbortController();
     const {
       signal
     } = this.#controller;
@@ -49,11 +50,11 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
   }
 
   get color() {
-    return getLiteralAttribute(this, colorNameValues, 'color', null);
+    return getAttribute(this, 'color');
   }
 
   set color(value) {
-    updateLiteralAttribute(this, colorNameValues, 'color', value);
+    updateAttribute(this, 'color', value);
   }
 
   get text() {
@@ -80,7 +81,6 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
     switch (name) {
       case 'color':
         {
-          assertColorNameValue(newVal);
           this.#updateColor();
           break;
         }
@@ -95,17 +95,20 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
 
   #updateColor() {
     const colorName = this.color ?? NO_COLOR;
-    const {
-      value,
-      isInverted
-    } = colorMap[colorName];
 
-    if (value !== NO_COLOR) {
-      this.#$button.style.backgroundColor = `var(--sinch-color-${value})`;
+    if (colorName !== NO_COLOR) {
+      this.#$button.style.setProperty('background-color', `var(--sinch-color-map-${colorName}-bg)`);
+      this.#$button.style.setProperty('color', `var(--sinch-color-map-${colorName}-fg)`);
+      this.#$button.style.setProperty('--sinch-color-icon', `var(--sinch-color-map-${colorName}-fg)`);
+    } else {
+      this.#$button.style.removeProperty('background-color');
+      this.#$button.style.removeProperty('color');
+      this.#$button.style.removeProperty('--sinch-color-icon');
     }
+  }
 
-    setClass(this.#$button, 'no-color', value === NO_COLOR);
-    setClass(this.#$button, 'inverted', isInverted);
+  get focusable() {
+    return true;
   }
 
   focus() {

package/chip/types.d.ts

@@ -1,10 +1,9 @@
 import type { TSinchElementReact } from '../types';
-import type { TSinchColorName } from '../utils/colors';
 export declare type TSinchChipElement = HTMLElement & {
     /** Text */
     text: string;
     /** Color, gray by default */
-    color: TSinchColorName | null;
+    color: string | null;
     /** Small */
     small: boolean;
     /** Click event */
@@ -16,7 +15,7 @@ export declare type TSinchChipElement = HTMLElement & {
     /** Text */
     setAttribute(name: 'text', value: string): void;
     /** Color, gray by default */
-    setAttribute(name: 'color', value: TSinchColorName): void;
+    setAttribute(name: 'color', value: string): void;
     /** Small */
     setAttribute(name: 'small', value: ''): void;
 };
@@ -24,7 +23,7 @@ export declare type TSinchChipReact = TSinchElementReact<TSinchChipElement> & {
     /** Text */
     text: string;
     /** Color, gray by default */
-    color?: TSinchColorName;
+    color?: string;
     /** Small */
     small?: boolean;
     /** Click event handler */

package/color-menu/index.d.ts

@@ -1,4 +1,5 @@
 import '../color-swatch';
+import '../tooltip';
 import '../icons/check';
 import type { TSinchSelectMenuElement, TSinchSelectMenuReact } from './types';
 declare global {

package/color-menu/index.js

@@ -1,9 +1,12 @@
 import '../color-swatch';
+import '../tooltip';
 import '../icons/check';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, getRect, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-import { assertColorNameValue, colorMap, colorNameValues, NO_COLOR } from '../utils/colors';
-const optionTemplateHTML = '<div class="option" role="option"><sinch-color-swatch></sinch-color-swatch></div>';
-const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox:empty{display:none}#check{position:absolute;left:10px;top:16px;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#check.inverted{--sinch-color-icon:var(--sinch-color-snow-100)}.option{position:relative;cursor:pointer;width:32px;height:32px;padding:12px 6px}.option::after{content:"";position:absolute;width:34px;height:34px;inset:9px 3px;border:2px solid transparent;border-radius:50%;pointer-events:none}.option[data-selected]:not([data-checked])::after{border-color:var(--sinch-color-aqua-400)}.option *{pointer-events:none}</style><sinch-icon-check id="check"></sinch-icon-check><div id="listbox" role="presentation"></div>';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { lightColorNames, darkColorNames, vibrantColorNames, NO_COLOR } from '../utils/colors';
+import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+const optionTemplateHTML = '<div class="option" role="option"><sinch-tooltip inverted class="tooltip"><div class="swatch-wrapper"><sinch-color-swatch class="swatch"></sinch-color-swatch><sinch-icon-check class="check"></sinch-icon-check></div></sinch-tooltip></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox:empty{display:none}.option{padding:12px 6px;--sinch-color-icon:var(--sinch-color-stormy-500)}.swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}.swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid transparent;border-radius:50%;pointer-events:none}.option[data-selected]:not([data-checked]) .swatch-wrapper::after{border-color:var(--sinch-color-border-focus)}.check{display:none;position:absolute;left:4px;top:4px;pointer-events:none;--sinch-size-icon:24px}.option[data-checked] .check{display:block}</style><div id="listbox" role="presentation"></div>';
+import { getParentOption } from './utils';
 const NUM_COLS_DEFAULT = 5;
 const ITEM_WIDTH = 44;
 const ITEM_HEIGHT = 56;
@@ -13,8 +16,7 @@ template.innerHTML = templateHTML;
 optionTemplate.innerHTML = optionTemplateHTML;
 defineCustomElement('sinch-color-menu', class extends NectaryElement {
   #$listbox;
-  #$checkIcon;
-  #controller = new AbortController();
+  #controller = null;
   #prevColorsValue = '';
   #isConnected = false;
 
@@ -23,10 +25,10 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$listbox = shadowRoot.querySelector('#listbox');
-    this.#$checkIcon = shadowRoot.querySelector('#check');
   }
 
   connectedCallback() {
+    this.#controller = new AbortController();
     const {
       signal
     } = this.#controller;
@@ -50,25 +52,17 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     this.addEventListener('-visibility', this.#onContextVisibility, {
       signal
     });
-    this.dispatchEvent(new CustomEvent('-context-connect-keydown', {
-      bubbles: true
-    }));
-    this.dispatchEvent(new CustomEvent('-context-connect-visibility', {
-      bubbles: true
-    }));
+    dispatchContextConnectEvent(this, 'visibility');
+    dispatchContextConnectEvent(this, 'keydown');
     requestAnimationFrame(this.#onMount);
   }
 
   disconnectedCallback() {
     this.#isConnected = false;
     this.#prevColorsValue = null;
+    dispatchContextDisconnectEvent(this, 'visibility');
+    dispatchContextDisconnectEvent(this, 'keydown');
     this.#controller.abort();
-    this.dispatchEvent(new CustomEvent('-context-disconnect-keydown', {
-      bubbles: true
-    }));
-    this.dispatchEvent(new CustomEvent('-context-disconnect-visibility', {
-      bubbles: true
-    }));
   }
 
   static get observedAttributes() {
@@ -76,11 +70,11 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   }
 
   set value(value) {
-    updateLiteralAttribute(this, colorNameValues, 'value', value);
+    updateAttribute(this, 'value', value);
   }
 
   get value() {
-    return getLiteralAttribute(this, colorNameValues, 'value', NO_COLOR);
+    return getAttribute(this, 'value', NO_COLOR);
   }
 
   set colors(value) {
@@ -107,11 +101,11 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     return getIntegerAttribute(this, 'cols', null);
   }
 
-  nthItemRect(index) {
-    if (index < 0 || index >= colorNameValues.length) {
-      return null;
-    }
+  get focusable() {
+    return true;
+  }
 
+  nthItemRect(index) {
     const $item = this.#$listbox.children[index];
 
     if ($item != null) {
@@ -130,7 +124,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       case 'value':
         {
           if (this.#isConnected) {
-            assertColorNameValue(newVal);
             this.#onValueChange();
           }
 
@@ -171,20 +164,22 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     }
 
     this.#prevColorsValue = colorsValue;
-    const colorNames = colorsValue !== null ? getCsvSet(colorsValue) : colorNameValues;
+    const colorNames = getCsvSet(colorsValue ?? `${lightColorNames},${vibrantColorNames},${darkColorNames}`);
     const fragment = document.createDocumentFragment();
 
-    for (const col of colorNames) {
-      if (col === NO_COLOR) {
+    for (const color of colorNames) {
+      if (color === NO_COLOR) {
         continue;
       }
 
       const optFrag = optionTemplate.content.cloneNode(true);
-      const $opt = optFrag.querySelector('.option');
-      const $swatch = optFrag.querySelector('sinch-color-swatch');
-      updateAttribute($opt, 'data-value', col);
-      updateAttribute($opt, 'title', col);
-      updateAttribute($swatch, 'name', col);
+      const $option = optFrag.querySelector('.option');
+      const $swatch = optFrag.querySelector('.swatch');
+      const $tooltip = optFrag.querySelector('.tooltip');
+      updateAttribute($option, 'data-value', color);
+      updateAttribute($tooltip, 'text', color);
+      updateAttribute($swatch, 'name', color);
+      $option.style.setProperty('--sinch-color-icon', `var(--sinch-color-map-${color}-fg)`);
       fragment.appendChild(optFrag);
     }
 
@@ -226,8 +221,9 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       return;
     }
 
-    this.#dispatchChangeEvent($elem);
-    this.#selectOption($elem);
+    const $option = getParentOption($elem);
+    this.#dispatchChangeEvent($option);
+    this.#selectOption($option);
   };
   #onContextVisibility = e => {
     if (e.detail) {
@@ -289,22 +285,10 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   }
 
   #onValueChange() {
-    if (!this.hasAttribute('value')) {
-      this.#$checkIcon.remove();
-      return;
-    }
-
     const value = this.value;
-    this.#$checkIcon.remove();
 
     for (const $option of this.#getOptionElements()) {
       const isChecked = value === getAttribute($option, 'data-value', '');
-
-      if (isChecked) {
-        $option.appendChild(this.#$checkIcon);
-        setClass(this.#$checkIcon, 'inverted', colorMap[value].isInverted);
-      }
-
       updateBooleanAttribute($option, 'data-checked', isChecked);
       updateExplicitBooleanAttribute($option, 'aria-selected', isChecked);
     }
@@ -453,9 +437,11 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       return;
     }
 
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: getAttribute($opt, 'data-value')
-    }));
+    if ($opt !== null) {
+      this.dispatchEvent(new CustomEvent('-change', {
+        detail: getAttribute($opt, 'data-value')
+      }));
+    }
   }
 
   #onChangeReactHandler = e => {

package/color-menu/types.d.ts

@@ -1,8 +1,7 @@
 import type { TRect, TSinchElementReact } from '../types';
-import type { TSinchColorName } from '../utils/colors';
 export declare type TSinchSelectMenuElement = HTMLElement & {
     /** Value */
-    value: TSinchColorName;
+    value: string;
     /** How many rows to show and scroll the rest */
     rows: number | null;
     /** How many cols to show and scroll the rest */
@@ -11,11 +10,11 @@ export declare type TSinchSelectMenuElement = HTMLElement & {
     colors: string | null;
     nthItemRect(index: number): TRect | null;
     /** Change event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<TSinchColorName>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Comma-separated color names, all colors by default */
     setAttribute(name: 'colors', value: string): void;
     /** Value */
-    setAttribute(name: 'value', value: TSinchColorName): void;
+    setAttribute(name: 'value', value: string): void;
     /** How many rows to show and scroll the rest */
     setAttribute(name: 'rows', value: string): void;
     /** How many cols to show and scroll the rest */
@@ -23,7 +22,7 @@ export declare type TSinchSelectMenuElement = HTMLElement & {
 };
 export declare type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement> & {
     /** Value */
-    value: TSinchColorName;
+    value: string;
     /** How many rows to show and scroll the rest */
     rows?: number;
     /** How many cols to show and scroll the rest */
@@ -33,5 +32,5 @@ export declare type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuE
     /** Label that is used for a11y */
     'aria-label': string;
     /** Change event handler */
-    'on-change'?: (e: CustomEvent<TSinchColorName>) => void;
+    'on-change'?: (e: CustomEvent<string>) => void;
 };

package/color-menu/utils.d.ts

@@ -0,0 +1 @@
+export declare const getParentOption: ($element: Element) => Element | null;

package/color-menu/utils.js

@@ -0,0 +1,15 @@
+export const getParentOption = $element => {
+  let $el = $element;
+
+  while (!$el.hasAttribute('data-value')) {
+    const parent = $el.parentElement;
+
+    if (parent === null) {
+      return null;
+    }
+
+    $el = parent;
+  }
+
+  return $el;
+};

package/color-swatch/index.js

@@ -1,8 +1,8 @@
 import '../icons/cancel';
 import '../text';
-import { defineCustomElement, getLiteralAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
-import { assertColorNameValue, colorMap, colorNameValues, NO_COLOR } from '../utils/colors';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-size-icon,32px);height:var(--sinch-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-color-berry-200),var(--sinch-color-orange-200),var(--sinch-color-bolt-200),var(--sinch-color-grass-200),var(--sinch-color-aqua-200),var(--sinch-color-night-200),var(--sinch-color-violet-200))}</style><div id="wrapper"></div>';
+import { defineCustomElement, NectaryElement, setClass, getAttribute, updateAttribute } from '../utils';
+import { NO_COLOR } from '../utils/colors';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-size-icon,32px);height:var(--sinch-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-color-map-light-orange-bg),var(--sinch-color-map-light-yellow-bg),var(--sinch-color-map-light-green-bg),var(--sinch-color-map-light-blue-bg),var(--sinch-color-map-light-violet-bg))}</style><div id="wrapper"></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-color-swatch', class extends NectaryElement {
@@ -20,11 +20,11 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
   }
 
   get name() {
-    return getLiteralAttribute(this, colorNameValues, 'name', NO_COLOR);
+    return getAttribute(this, 'name', NO_COLOR);
   }
 
   set name(value) {
-    updateLiteralAttribute(this, colorNameValues, 'name', value);
+    updateAttribute(this, 'name', value);
   }
 
   static get observedAttributes() {
@@ -39,7 +39,6 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
     switch (name) {
       case 'name':
         {
-          assertColorNameValue(newVal);
           this.#updateColor();
           break;
         }
@@ -50,7 +49,9 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
     const colorName = this.name;
 
     if (colorName !== NO_COLOR) {
-      this.#$wrapper.style.backgroundColor = `var(--sinch-color-${colorMap[colorName].value})`;
+      this.#$wrapper.style.setProperty('background-color', `var(--sinch-color-map-${colorName}-bg)`);
+    } else {
+      this.#$wrapper.style.removeProperty('background-color');
     }
 
     setClass(this.#$wrapper, 'no-color', colorName === NO_COLOR);

package/color-swatch/types.d.ts

@@ -1,12 +1,11 @@
 import type { TSinchElementReact } from '../types';
-import type { TSinchColorName } from '../utils/colors';
 export declare type TSinchColorSwatchElement = HTMLElement & {
     /** Color name */
-    name: TSinchColorName;
+    name: string;
     /** Color name */
-    setAttribute(name: 'name', value: TSinchColorName): void;
+    setAttribute(name: 'name', value: string): void;
 };
 export declare type TSinchColorSwatchReact = TSinchElementReact<TSinchColorSwatchElement> & {
     /** Color name */
-    name: TSinchColorName;
+    name: string;
 };

package/colors.json

@@ -43,24 +43,28 @@
   "colorRaspberry200": "#FBD5D5",
   "colorRaspberry100": "#FFE8E4",
   "colorRaspberry50": "#FFF6F5",
+  "colorNight700": "#1223a1",
   "colorNight400": "#3247E9",
   "colorNight200": "#D1D6FA",
-  "colorAqua400": "#3AA7EA",
-  "colorAqua200": "#A1D5F5",
+  "colorGrass700": "#006602",
   "colorGrass400": "#39B93D",
   "colorGrass200": "#B4E4B5",
+  "colorDirt700": "#363230",
   "colorDirt400": "#828282",
   "colorDirt200": "#E0DDDC",
-  "colorBerry400": "#EF5858",
-  "colorBerry200": "#FFB8B8",
+  "colorCandy700": "#981b77",
   "colorCandy400": "#E467C3",
   "colorCandy200": "#F6CBEA",
+  "colorMud700": "#6d4e46",
   "colorMud400": "#8B6559",
   "colorMud200": "#D7C6C1",
+  "colorOrange700": "#974302",
   "colorOrange400": "#FF8C34",
   "colorOrange200": "#FFD4B3",
+  "colorBolt700": "#805500",
   "colorBolt400": "#FFBE3C",
   "colorBolt200": "#FFE6B3",
+  "colorViolet700": "#4F1B98",
   "colorViolet400": "#9E67E4",
   "colorViolet200": "#DECBF6",
   "colorError700": "#882024",
@@ -75,10 +79,10 @@
   "colorWarning700": "#9C2E00",
   "colorWarning500": "#F35B1C",
   "colorWarning200": "#FFE8D6",
-  "colorColorSkinTone10": "#FFCC4D",
-  "colorColorSkinTone20": "#F7DECE",
-  "colorColorSkinTone30": "#F3D2A2",
-  "colorColorSkinTone40": "#D4AB88",
-  "colorColorSkinTone50": "#AF7E57",
-  "colorColorSkinTone60": "#7C533E"
+  "colorColorSkinTone0": "#FFCC4D",
+  "colorColorSkinTone10": "#F7DECE",
+  "colorColorSkinTone20": "#F3D2A2",
+  "colorColorSkinTone30": "#D4AB88",
+  "colorColorSkinTone40": "#AF7E57",
+  "colorColorSkinTone50": "#7C533E"
 }