@nectary/components 0.42.1 → 0.44.0

package/select-menu/index.js

@@ -1,5 +1,4 @@
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
 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');
@@ -160,9 +159,9 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {

package/stop-events/index.js

@@ -1,17 +1,17 @@
-import { defineCustomElement, getCsvSet } from '../utils';
+import { defineCustomElement, unpackCsv } from '../utils';
 defineCustomElement('sinch-stop-events', class extends HTMLElement {
   constructor() {
     super();
     this.style.display = 'contents';
   }
   connectedCallback() {
-    const events = getCsvSet(this.getAttribute('events'));
+    const events = unpackCsv(this.getAttribute('events'));
     for (const event of events) {
       this.addEventListener(event, this.#stopEvent);
     }
   }
   disconnectedCallback() {
-    const events = getCsvSet(this.getAttribute('events'));
+    const events = unpackCsv(this.getAttribute('events'));
     for (const event of events) {
       this.removeEventListener(event, this.#stopEvent);
     }

package/tabs/index.js

@@ -1,12 +1,10 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;height:44px;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
-const findSelectedOption = elements => {
-  return elements.find(el => el.checked) ?? null;
-};
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;border-bottom:1px solid var(--sinch-color-border-default)}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs', class extends NectaryElement {
   #$slot;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -14,17 +12,23 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
     this.#$slot = shadowRoot.querySelector('slot');
   }
   connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
     this.setAttribute('role', 'tablist');
-    this.#$slot.addEventListener('keydown', this.#onOptionKeyDown);
-    this.#$slot.addEventListener('option-change', this.#onOptionChange);
-    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
-    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.#$slot.addEventListener('option-change', this.#onOptionChange, {
+      signal
+    });
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange, {
+      signal
+    });
+    this.addEventListener('-change', this.#onChangeReactHandler, {
+      signal
+    });
   }
   disconnectedCallback() {
-    this.#$slot.removeEventListener('keydown', this.#onOptionKeyDown);
-    this.#$slot.removeEventListener('option-change', this.#onOptionChange);
-    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.#controller.abort();
   }
   static get observedAttributes() {
     return ['value'];
@@ -47,32 +51,13 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
         }
     }
   }
-  #onOptionKeyDown = e => {
-    switch (e.code) {
-      case 'ArrowUp':
-      case 'ArrowLeft':
-        {
-          e.preventDefault();
-          const $option = this.#getPrevOption();
-          if ($option !== null) {
-            $option.focus();
-            this.#dispatchChangeEvent($option.value);
-          }
-          break;
-        }
-      case 'ArrowDown':
-      case 'ArrowRight':
-        {
-          e.preventDefault();
-          const $option = this.#getNextOption();
-          if ($option !== null) {
-            $option.focus();
-            this.#dispatchChangeEvent($option.value);
-          }
-          break;
-        }
+  nthOptionRect(index) {
+    const $el = this.#$slot.assignedElements()[index];
+    if ($el != null) {
+      return getRect($el);
     }
-  };
+    return null;
+  }
   #onSlotChange = () => {
     this.#onValueChange(this.value);
   };
@@ -83,7 +68,7 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
   #onValueChange(value) {
     for (const $option of this.#$slot.assignedElements()) {
       const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'checked', isChecked);
+      updateBooleanAttribute($option, 'data-checked', isChecked);
     }
   }
   #dispatchChangeEvent(value) {
@@ -95,43 +80,6 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
       detail: value
     }));
   }
-  #getFirstOption() {
-    for (const $option of this.#$slot.assignedElements()) {
-      if ($option.disabled !== true) {
-        return $option;
-      }
-    }
-    return null;
-  }
-  #getLastOption() {
-    for (const $option of this.#$slot.assignedElements().reverse()) {
-      if ($option.disabled !== true) {
-        return $option;
-      }
-    }
-    return null;
-  }
-  #getNextOption() {
-    const $options = this.#getEnabledRadioElements();
-    const $selectedOption = findSelectedOption($options);
-    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-    if (currentIndex < 0) {
-      return this.#getFirstOption();
-    }
-    return $options[(currentIndex + 1) % $options.length];
-  }
-  #getPrevOption() {
-    const $options = this.#getEnabledRadioElements();
-    const $selectedOption = findSelectedOption($options);
-    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-    if (currentIndex < 0) {
-      return this.#getLastOption();
-    }
-    return $options[(currentIndex - 1 + $options.length) % $options.length];
-  }
-  #getEnabledRadioElements() {
-    return this.#$slot.assignedElements().filter(opt => opt.disabled !== true);
-  }
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/tabs/types.d.ts

@@ -1,14 +1,21 @@
-import type { TSinchElementReact } from '../types';
+import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchTabsElement = HTMLElement & {
+    /** Value */
     value: string;
+    nthOptionRect(index: number): TRect | null;
+    /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value */
     setAttribute(name: 'value', value: string): void;
 };
 export declare type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
+    /** Value */
     value: string;
+    /** Label that is used for a11y */
     'aria-label': string;
-    /** @deprecated */
+    /** @deprecated Change value handler */
     onChange?: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
+    /** Change value event */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/tabs-icon-option/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTabsIconOptionElement, TSinchTabsIconOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-icon-option': TSinchTabsIconOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs-icon-option': TSinchTabsIconOptionElement;
+    }
+}

package/tabs-icon-option/index.js

@@ -0,0 +1,75 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:40px;--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-checked]) #button{--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#button:disabled{cursor:unset;pointer-events:none;--sinch-color-icon:var(--sinch-color-border-default)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip" inverted><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
+  #$button;
+  #$tooltip;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'tab');
+    this.#$button.addEventListener('click', this.#onClick);
+  }
+  disconnectedCallback() {
+    this.#$button.removeEventListener('click', this.#onClick);
+  }
+  static get observedAttributes() {
+    return ['data-checked', 'disabled', 'aria-label'];
+  }
+  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, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          this.#$button.disabled = isAttrTrue(newVal);
+          break;
+        }
+      case 'aria-label':
+        {
+          updateAttribute(this.#$tooltip, 'text', newVal);
+          break;
+        }
+    }
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$button.focus();
+  }
+  blur() {
+    this.#$button.blur();
+  }
+  #onClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      bubbles: true,
+      detail: this.value
+    }));
+  };
+});

package/tabs-icon-option/types.d.ts

@@ -0,0 +1,19 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTabsIconOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionElement> & {
+    /** Value */
+    value: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/tabs-icon-option/types.js

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

package/tabs-option/index.d.ts

@@ -1,3 +1,4 @@
+import '../text';
 import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
 declare global {
     namespace JSX {

package/tabs-option/index.js

@@ -1,16 +1,17 @@
+import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);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}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]:not([checked=false])) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}#button:disabled{cursor:unset}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content"></label><button id="button" type="radio"/></div>';
+const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:40px;color:var(--sinch-color-stormy-300);--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-checked]) #button{color:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#button:disabled{cursor:unset;pointer-events:none;color:var(--sinch-color-border-default);--sinch-color-icon:var(--sinch-color-border-default)}#text{flex-shrink:1;flex-basis:auto;min-width:0}::slotted(*){display:block}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', class extends NectaryElement {
   #$button;
-  #$label;
+  #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
-    this.#$label = shadowRoot.querySelector('#content');
+    this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
     this.setAttribute('role', 'tab');
@@ -20,13 +21,7 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
     this.#$button.removeEventListener('click', this.#onClick);
   }
   static get observedAttributes() {
-    return ['checked', 'disabled', 'text', 'value'];
-  }
-  set checked(isChecked) {
-    updateBooleanAttribute(this, 'checked', isChecked);
-  }
-  get checked() {
-    return getBooleanAttribute(this, 'checked');
+    return ['data-checked', 'disabled', 'text'];
   }
   set value(value) {
     updateAttribute(this, 'value', value);
@@ -50,19 +45,17 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
     switch (name) {
       case 'text':
         {
-          this.#$label.textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
-      case 'checked':
+      case 'data-checked':
         {
           updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
       case 'disabled':
         {
-          const isDisabled = isAttrTrue(newVal);
-          this.#$button.disabled = isDisabled;
-          updateBooleanAttribute(this, 'disabled', isDisabled);
+          this.#$button.disabled = isAttrTrue(newVal);
           break;
         }
     }

package/tabs-option/types.d.ts

@@ -1,17 +1,25 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchTabsOptionElement = HTMLElement & {
+    /** Value */
     value: string;
-    disabled: boolean;
-    checked: boolean;
+    /** Text */
     text: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
     setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'disabled', value: ''): void;
-    setAttribute(name: 'checked', value: ''): void;
+    /** Text */
     setAttribute(name: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+    /** Value */
     value: string;
-    disabled?: boolean;
+    /** Text */
     text: string;
+    /** Label that is used for a11y */
     'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
 };

package/theme/emoji.css

@@ -0,0 +1,6 @@
+:root,
+:host {
+  --sinch-emoji-src-url: "https://twemoji.maxcdn.com/v/latest/svg/%s.svg";
+
+  /* --sinch-emoji-src-url: "https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/%s.svg"; */
+}

package/theme/fonts.css

@@ -74,3 +74,12 @@
     url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2") format("woff2"),
     url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff") format("woff");
 }
+
+@font-face {
+  font-family: "Material Icons Outlined";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2") format("woff2"),
+    url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOelbd5zrDAt.woff") format("woff");
+}

package/theme/fonts.json

@@ -75,5 +75,14 @@
       "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2",
       "woff": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff"
     }
+  },
+  {
+    "family": "Material Icons Outlined",
+    "weight": 400,
+    "style": "normal",
+    "src": {
+      "woff2": "https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2",
+      "woff": "https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOelbd5zrDAt.woff"
+    }
   }
 ]

package/theme/icon.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-icon-font-family: "Material Icons Outlined";
+  --sinch-icon-font-variation-settings: "FILL" 1;
+  --sinch-icon-font-feature-settings: "liga";
+  --sinch-icon-font-weight: 400;
+}

package/theme.css

@@ -10,6 +10,8 @@
 @import "theme/chip.css";
 @import "theme/color-swatch.css";
 @import "theme/tag.css";
+@import "theme/emoji.css";
+@import "theme/icon.css";
 
 :root,
 :host {

package/tile-control/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]:not([small=false])) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -91,9 +91,9 @@ defineCustomElement('sinch-tile-control', class extends NectaryElement {
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#$slot.assignedElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {