@nectary/components 0.41.1 → 0.42.1

package/theme/tag.css

@@ -0,0 +1,53 @@
+:root,
+:host {
+  --sinch-tag-color-default-bg: var(--sinch-color-snow-500);
+  --sinch-tag-color-default-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-light-blue-bg: var(--sinch-color-night-200);
+  --sinch-tag-color-light-blue-fg: var(--sinch-color-night-700);
+  --sinch-tag-color-light-brown-bg: var(--sinch-color-mud-200);
+  --sinch-tag-color-light-brown-fg: var(--sinch-color-mud-700);
+  --sinch-tag-color-light-gray-bg: var(--sinch-color-dirt-200);
+  --sinch-tag-color-light-gray-fg: var(--sinch-color-dirt-700);
+  --sinch-tag-color-light-green-bg: var(--sinch-color-grass-200);
+  --sinch-tag-color-light-green-fg: var(--sinch-color-grass-700);
+  --sinch-tag-color-light-orange-bg: var(--sinch-color-orange-200);
+  --sinch-tag-color-light-orange-fg: var(--sinch-color-orange-700);
+  --sinch-tag-color-light-pink-bg: var(--sinch-color-candy-200);
+  --sinch-tag-color-light-pink-fg: var(--sinch-color-candy-700);
+  --sinch-tag-color-light-violet-bg: var(--sinch-color-violet-200);
+  --sinch-tag-color-light-violet-fg: var(--sinch-color-violet-700);
+  --sinch-tag-color-light-yellow-bg: var(--sinch-color-bolt-200);
+  --sinch-tag-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-tag-color-dark-blue-bg: var(--sinch-color-night-700);
+  --sinch-tag-color-dark-blue-fg: var(--sinch-color-night-200);
+  --sinch-tag-color-dark-brown-bg: var(--sinch-color-mud-700);
+  --sinch-tag-color-dark-brown-fg: var(--sinch-color-mud-200);
+  --sinch-tag-color-dark-gray-bg: var(--sinch-color-dirt-700);
+  --sinch-tag-color-dark-gray-fg: var(--sinch-color-dirt-200);
+  --sinch-tag-color-dark-green-bg: var(--sinch-color-grass-700);
+  --sinch-tag-color-dark-green-fg: var(--sinch-color-grass-200);
+  --sinch-tag-color-dark-orange-bg: var(--sinch-color-orange-700);
+  --sinch-tag-color-dark-orange-fg: var(--sinch-color-orange-200);
+  --sinch-tag-color-dark-pink-bg: var(--sinch-color-candy-700);
+  --sinch-tag-color-dark-pink-fg: var(--sinch-color-candy-200);
+  --sinch-tag-color-dark-violet-bg: var(--sinch-color-violet-700);
+  --sinch-tag-color-dark-violet-fg: var(--sinch-color-violet-200);
+  --sinch-tag-color-dark-yellow-bg: var(--sinch-color-bolt-700);
+  --sinch-tag-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-tag-color-blue-bg: var(--sinch-color-night-400);
+  --sinch-tag-color-blue-fg: var(--sinch-color-snow-100);
+  --sinch-tag-color-brown-bg: var(--sinch-color-mud-400);
+  --sinch-tag-color-brown-fg: var(--sinch-color-snow-100);
+  --sinch-tag-color-gray-bg: var(--sinch-color-dirt-400);
+  --sinch-tag-color-gray-fg: var(--sinch-color-snow-100);
+  --sinch-tag-color-green-bg: var(--sinch-color-grass-400);
+  --sinch-tag-color-green-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-orange-bg: var(--sinch-color-orange-400);
+  --sinch-tag-color-orange-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-pink-bg: var(--sinch-color-candy-400);
+  --sinch-tag-color-pink-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-violet-bg: var(--sinch-color-violet-400);
+  --sinch-tag-color-violet-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-yellow-bg: var(--sinch-color-bolt-400);
+  --sinch-tag-color-yellow-fg: var(--sinch-color-stormy-500);
+}

package/theme/typography.css

@@ -0,0 +1,16 @@
+:root,
+:host {
+  --sinch-font-family: "Gilroy", "Arial", "sans-serif";
+  --sinch-font-weight-emphasized: 600;
+  --sinch-font-title-xl: 600 40px/48px var(--sinch-font-family);
+  --sinch-font-title-l: 600 24px/32px var(--sinch-font-family);
+  --sinch-font-title-m: 600 20px/24px var(--sinch-font-family);
+  --sinch-font-title-s: 600 16px/24px var(--sinch-font-family);
+  --sinch-font-title-xs: 600 14px/22px var(--sinch-font-family);
+  --sinch-font-text-m: 400 16px/24px var(--sinch-font-family);
+  --sinch-font-text-s: 400 14px/22px var(--sinch-font-family);
+  --sinch-font-text-xs: 400 12px/20px var(--sinch-font-family);
+  --sinch-font-text-xxs: 400 10px/16px var(--sinch-font-family);
+  --sinch-font-mono-family: "DM Mono", "monospace";
+  --sinch-font-mono-text-s: 400 16px/24px var(--sinch-font-mono-family);
+}

package/theme.css

@@ -1,96 +1,20 @@
+@import "theme/palette.css";
+@import "theme/fonts.css";
+@import "theme/typography.css";
+@import "theme/shapes.css";
+@import "theme/elevation.css";
+
+/* Components */
+@import "theme/avatar.css";
+@import "theme/badge.css";
+@import "theme/chip.css";
+@import "theme/color-swatch.css";
+@import "theme/tag.css";
+
 :root,
 :host {
   --sinch-theme: 1;
 
-  /* Colors */
-  --sinch-color-honey-700: #CC8800;
-  --sinch-color-honey-600: #FFAA00;
-  --sinch-color-honey-500: #FFBE3C;
-  --sinch-color-honey-400: #FFCC66;
-  --sinch-color-honey-300: #FFDF9E;
-  --sinch-color-honey-200: #FCECCB;
-  --sinch-color-honey-100: #FFF7E6;
-  --sinch-color-tropical-700: #003D3D;
-  --sinch-color-tropical-600: #005757;
-  --sinch-color-tropical-500: #007171;
-  --sinch-color-tropical-400: #059688;
-  --sinch-color-tropical-300: #66AAAA;
-  --sinch-color-tropical-200: #A7D5C2;
-  --sinch-color-tropical-100: #DCEDE1;
-  --sinch-color-tropical-50: #E5F1F1;
-  --sinch-color-stormy-700: #000000;
-  --sinch-color-stormy-600: #171717;
-  --sinch-color-stormy-500: #242424;
-  --sinch-color-stormy-400: #595959;
-  --sinch-color-stormy-300: #767676;
-  --sinch-color-stormy-200: #8C8C8C;
-  --sinch-color-stormy-100: #A6A6A6;
-  --sinch-color-ocean-700: #1B3E65;
-  --sinch-color-ocean-600: #1686CB;
-  --sinch-color-ocean-500: #3AA7EA;
-  --sinch-color-ocean-400: #6EBBEE;
-  --sinch-color-ocean-300: #A1D5F5;
-  --sinch-color-ocean-200: #C8E6F9;
-  --sinch-color-ocean-100: #DEF2FF;
-  --sinch-color-ocean-50: #F3FAFE;
-  --sinch-color-snow-700: #CCCCCC;
-  --sinch-color-snow-600: #D9D9D9;
-  --sinch-color-snow-500: #E0E0E0;
-  --sinch-color-snow-400: #F2F2F2;
-  --sinch-color-snow-200: #F8F8F8;
-  --sinch-color-snow-100: #FFFFFF;
-  --sinch-color-raspberry-700: #882024;
-  --sinch-color-raspberry-600: #D13D42;
-  --sinch-color-raspberry-500: #EF5858;
-  --sinch-color-raspberry-400: #F38686;
-  --sinch-color-raspberry-300: #FFB8B8;
-  --sinch-color-raspberry-200: #FBD5D5;
-  --sinch-color-raspberry-100: #FFE8E4;
-  --sinch-color-raspberry-50: #FFF6F5;
-  --sinch-color-night-700: #1223a1;
-  --sinch-color-night-400: #3247E9;
-  --sinch-color-night-200: #D1D6FA;
-  --sinch-color-grass-700: #006602;
-  --sinch-color-grass-400: #39B93D;
-  --sinch-color-grass-200: #B4E4B5;
-  --sinch-color-dirt-700: #363230;
-  --sinch-color-dirt-400: #828282;
-  --sinch-color-dirt-200: #E0DDDC;
-  --sinch-color-candy-700: #981b77;
-  --sinch-color-candy-400: #E467C3;
-  --sinch-color-candy-200: #F6CBEA;
-  --sinch-color-mud-700: #6d4e46;
-  --sinch-color-mud-400: #8B6559;
-  --sinch-color-mud-200: #D7C6C1;
-  --sinch-color-orange-700: #974302;
-  --sinch-color-orange-400: #FF8C34;
-  --sinch-color-orange-200: #FFD4B3;
-  --sinch-color-bolt-700: #805500;
-  --sinch-color-bolt-400: #FFBE3C;
-  --sinch-color-bolt-200: #FFE6B3;
-  --sinch-color-violet-700: #4F1B98;
-  --sinch-color-violet-400: #9E67E4;
-  --sinch-color-violet-200: #DECBF6;
-  --sinch-color-error-700: #882024;
-  --sinch-color-error-500: #D13D42;
-  --sinch-color-error-200: #FBD5D5;
-  --sinch-color-success-700: #275D33;
-  --sinch-color-success-500: #46A65A;
-  --sinch-color-success-200: #D7F1D8;
-  --sinch-color-informative-700: #003B7E;
-  --sinch-color-informative-500: #2071CE;
-  --sinch-color-informative-200: #D5E5F8;
-  --sinch-color-warning-700: #9C2E00;
-  --sinch-color-warning-500: #F35B1C;
-  --sinch-color-warning-200: #FFE8D6;
-  --sinch-color-skin-tone-0: #FFCC4D;
-  --sinch-color-skin-tone-10: #F7DECE;
-  --sinch-color-skin-tone-20: #F3D2A2;
-  --sinch-color-skin-tone-30: #D4AB88;
-  --sinch-color-skin-tone-40: #AF7E57;
-  --sinch-color-skin-tone-50: #7C533E;
-  --sinch-color-transparent: transparent;
-
   /* Contextual */
   --sinch-color-bg-primary-light: var(--sinch-color-snow-100);
   --sinch-color-bg-primary-contrast: var(--sinch-color-snow-200);
@@ -114,93 +38,6 @@
   --sinch-color-border-focus: var(--sinch-color-ocean-500);
   --sinch-color-border-invalid: var(--sinch-color-raspberry-600);
 
-  /* Color Map */
-  --sinch-color-map-light-blue-bg: var(--sinch-color-night-200);
-  --sinch-color-map-light-blue-fg: var(--sinch-color-night-700);
-  --sinch-color-map-light-brown-bg: var(--sinch-color-mud-200);
-  --sinch-color-map-light-brown-fg: var(--sinch-color-mud-700);
-  --sinch-color-map-light-gray-bg: var(--sinch-color-dirt-200);
-  --sinch-color-map-light-gray-fg: var(--sinch-color-dirt-700);
-  --sinch-color-map-light-green-bg: var(--sinch-color-grass-200);
-  --sinch-color-map-light-green-fg: var(--sinch-color-grass-700);
-  --sinch-color-map-light-orange-bg: var(--sinch-color-orange-200);
-  --sinch-color-map-light-orange-fg: var(--sinch-color-orange-700);
-  --sinch-color-map-light-pink-bg: var(--sinch-color-candy-200);
-  --sinch-color-map-light-pink-fg: var(--sinch-color-candy-700);
-  --sinch-color-map-light-violet-bg: var(--sinch-color-violet-200);
-  --sinch-color-map-light-violet-fg: var(--sinch-color-violet-700);
-  --sinch-color-map-light-yellow-bg: var(--sinch-color-bolt-200);
-  --sinch-color-map-light-yellow-fg: var(--sinch-color-bolt-700);
-  --sinch-color-map-dark-blue-bg: var(--sinch-color-night-700);
-  --sinch-color-map-dark-blue-fg: var(--sinch-color-night-200);
-  --sinch-color-map-dark-brown-bg: var(--sinch-color-mud-700);
-  --sinch-color-map-dark-brown-fg: var(--sinch-color-mud-200);
-  --sinch-color-map-dark-gray-bg: var(--sinch-color-dirt-700);
-  --sinch-color-map-dark-gray-fg: var(--sinch-color-dirt-200);
-  --sinch-color-map-dark-green-bg: var(--sinch-color-grass-700);
-  --sinch-color-map-dark-green-fg: var(--sinch-color-grass-200);
-  --sinch-color-map-dark-orange-bg: var(--sinch-color-orange-700);
-  --sinch-color-map-dark-orange-fg: var(--sinch-color-orange-200);
-  --sinch-color-map-dark-pink-bg: var(--sinch-color-candy-700);
-  --sinch-color-map-dark-pink-fg: var(--sinch-color-candy-200);
-  --sinch-color-map-dark-violet-bg: var(--sinch-color-violet-700);
-  --sinch-color-map-dark-violet-fg: var(--sinch-color-violet-200);
-  --sinch-color-map-dark-yellow-bg: var(--sinch-color-bolt-700);
-  --sinch-color-map-dark-yellow-fg: var(--sinch-color-bolt-200);
-  --sinch-color-map-blue-bg: var(--sinch-color-night-400);
-  --sinch-color-map-blue-fg: var(--sinch-color-snow-100);
-  --sinch-color-map-brown-bg: var(--sinch-color-mud-400);
-  --sinch-color-map-brown-fg: var(--sinch-color-snow-100);
-  --sinch-color-map-gray-bg: var(--sinch-color-dirt-400);
-  --sinch-color-map-gray-fg: var(--sinch-color-snow-100);
-  --sinch-color-map-green-bg: var(--sinch-color-grass-400);
-  --sinch-color-map-green-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-orange-bg: var(--sinch-color-orange-400);
-  --sinch-color-map-orange-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-pink-bg: var(--sinch-color-candy-400);
-  --sinch-color-map-pink-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-violet-bg: var(--sinch-color-violet-400);
-  --sinch-color-map-violet-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-yellow-bg: var(--sinch-color-bolt-400);
-  --sinch-color-map-yellow-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-skin-tone-0-bg: var(--sinch-color-skin-tone-0);
-  --sinch-color-map-skin-tone-0-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-skin-tone-10-bg: var(--sinch-color-skin-tone-10);
-  --sinch-color-map-skin-tone-10-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-skin-tone-20-bg: var(--sinch-color-skin-tone-20);
-  --sinch-color-map-skin-tone-20-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-skin-tone-30-bg: var(--sinch-color-skin-tone-30);
-  --sinch-color-map-skin-tone-30-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-skin-tone-40-bg: var(--sinch-color-skin-tone-40);
-  --sinch-color-map-skin-tone-40-fg: var(--sinch-color-stormy-500);
-  --sinch-color-map-skin-tone-50-bg: var(--sinch-color-skin-tone-50);
-  --sinch-color-map-skin-tone-50-fg: var(--sinch-color-snow-100);
-
-  /* Typography */
-  --sinch-font-family: "Gilroy", "Arial", "sans-serif";
-  --sinch-font-weight-emphasized: 600;
-  --sinch-font-title-xl: 600 40px/48px var(--sinch-font-family);
-  --sinch-font-title-l: 600 24px/32px var(--sinch-font-family);
-  --sinch-font-title-m: 600 20px/24px var(--sinch-font-family);
-  --sinch-font-title-s: 600 16px/24px var(--sinch-font-family);
-  --sinch-font-title-xs: 600 14px/22px var(--sinch-font-family);
-  --sinch-font-text-m: 400 16px/24px var(--sinch-font-family);
-  --sinch-font-text-s: 400 14px/22px var(--sinch-font-family);
-  --sinch-font-text-xs: 400 12px/20px var(--sinch-font-family);
-  --sinch-font-text-xxs: 400 10px/16px var(--sinch-font-family);
-
-  /* Shapes */
-  --sinch-shape-radius-xs: 2px;
-  --sinch-shape-radius-s: 4px;
-  --sinch-shape-radius-m: 8px;
-  --sinch-shape-radius-l: 12px;
-
-  /* Elevation */
-  --sinch-elevation-level-0: 0 0 0 0 rgba(10, 39, 61, 0.1);
-  --sinch-elevation-level-1: 1px 2px 6px rgba(10, 39, 61, 0.1);
-  --sinch-elevation-level-2: 1px 4px 8px rgba(10, 39, 61, 0.1);
-  --sinch-elevation-level-3: 1px 6px 12px rgba(10, 39, 61, 0.15);
-
   /* Deprecated */
   --sinch-font-hero: 700 56px/72px var(--sinch-font-family);
   --sinch-font-body: 400 16px/24px var(--sinch-font-family);
@@ -209,36 +46,3 @@
   --sinch-font-extra-small-text: 400 12px/20px var(--sinch-font-family);
   --sinch-font-monospace: 400 16px/24px "monospace";
 }
-
-@font-face {
-  font-family: "Gilroy";
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Gilroy-Regular"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2") format("woff2"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Gilroy";
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Gilroy-SemiBold"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2") format("woff2"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Gilroy";
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Gilroy-Bold"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2") format("woff2"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff") format("woff");
-}

package/tile-control/index.js

@@ -4,92 +4,74 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tile-control', class extends NectaryElement {
   #$slot;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$slot = shadowRoot.querySelector('slot');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'tablist');
     this.#$slot.addEventListener('option-change', this.#onOptionChange);
     this.#$slot.addEventListener('slotchange', this.#onSlotChange);
     this.addEventListener('-change', this.#onChangeReactHandler);
   }
-
   disconnectedCallback() {
     this.#$slot.removeEventListener('option-change', this.#onOptionChange);
     this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
     this.removeEventListener('-change', this.#onChangeReactHandler);
   }
-
   static get observedAttributes() {
     return ['value', 'small', 'multiple'];
   }
-
   get nodeName() {
     return 'select';
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set small(isSmall) {
     updateBooleanAttribute(this, 'small', isSmall);
   }
-
   get small() {
     return getBooleanAttribute(this, 'small');
   }
-
   set multiple(isMultiple) {
     updateBooleanAttribute(this, 'multiple', isMultiple);
   }
-
   get multiple() {
     return getBooleanAttribute(this, 'multiple');
   }
-
   set cols(value) {
     updateIntegerAttribute(this, 'cols', value);
   }
-
   get cols() {
     return getIntegerAttribute(this, 'cols', 1);
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'value':
         {
           this.#onValueChange(newVal ?? '');
           break;
         }
-
       case 'small':
         {
           this.#onSmallChange();
           break;
         }
-
       case 'multiple':
         {
           this.#onValueChange(this.value);
         }
     }
   }
-
   #onSlotChange = () => {
     this.#onValueChange(this.value);
     this.#onSmallChange();
@@ -107,33 +89,27 @@ defineCustomElement('sinch-tile-control', class extends NectaryElement {
       detail
     }));
   };
-
   #onValueChange(csv) {
     if (this.multiple) {
       const values = getCsvSet(csv);
-
       for (const $option of this.#$slot.assignedElements()) {
         const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {
       const value = getFirstCsvValue(csv);
-
       for (const $option of this.#$slot.assignedElements()) {
         const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     }
   }
-
   #onSmallChange() {
     const isSmall = this.small;
-
     for (const $opt of this.#$slot.assignedElements()) {
       updateBooleanAttribute($opt, 'data-small', isSmall);
     }
   }
-
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/tile-control-option/index.js

@@ -5,7 +5,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-tile-control-option', class extends NectaryElement {
   #$button;
   #$text;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -13,7 +12,6 @@ defineCustomElement('sinch-tile-control-option', class extends NectaryElement {
     this.#$button = shadowRoot.querySelector('button');
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'tab');
     this.#$button.addEventListener('click', this.#onButtonClick);
@@ -22,7 +20,6 @@ defineCustomElement('sinch-tile-control-option', class extends NectaryElement {
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
   }
-
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onButtonClick);
     this.#$button.removeEventListener('focus', this.#onButtonFocus);
@@ -30,29 +27,24 @@ defineCustomElement('sinch-tile-control-option', class extends NectaryElement {
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
-
   static get observedAttributes() {
     return ['data-checked', 'text', 'disabled'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'text':
         {
           this.#$text.textContent = newVal;
           break;
         }
-
       case 'data-checked':
         {
           updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
-
       case 'disabled':
         {
           this.#$button.disabled = isAttrTrue(newVal);
@@ -60,43 +52,33 @@ defineCustomElement('sinch-tile-control-option', class extends NectaryElement {
         }
     }
   }
-
   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;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
   #onButtonClick = e => {
     e.stopPropagation();
     this.dispatchEvent(new CustomEvent('option-change', {