@nectary/components 2.4.0

package/spinner/index.js

@@ -0,0 +1,58 @@
+import { defineCustomElement, getLiteralAttribute, NectaryElement, subscribeContext, updateAttribute, updateLiteralAttribute } from '../utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg><svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg><svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-spinner', class extends NectaryElement {
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    this.setAttribute('aria-live', 'polite');
+    this.setAttribute('aria-busy', 'true');
+    subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['size'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+    }
+  }
+  set size(size) {
+    updateLiteralAttribute(this, sizeValues, 'size', size);
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
+  }
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
+      return;
+    }
+    switch (e.detail) {
+      case 'l':
+      case 'm':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
+    }
+  };
+});

package/spinner/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchElementReact } from '../types';
+import type { TSinchSize } from '../utils/size';
+export type TSinchSpinnerElement = HTMLElement & {
+    /** Spinner size */
+    size: TSinchSize;
+    /** Spinner size */
+    setAttribute(name: 'size', value: TSinchSize): void;
+};
+export type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
+    /** Spinner size */
+    size?: TSinchSize;
+};

package/spinner/types.js

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

package/stop-events/index.d.ts

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

package/stop-events/index.js

@@ -0,0 +1,27 @@
+import { defineCustomElement, unpackCsv } from '../utils';
+defineCustomElement('sinch-stop-events', class extends HTMLElement {
+  #controller = null;
+  constructor() {
+    super();
+    this.style.display = 'contents';
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const events = unpackCsv(this.getAttribute('events'));
+    for (const event of events) {
+      this.addEventListener(event, this.#stopEvent, {
+        signal
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  #stopEvent = e => {
+    e.stopPropagation();
+  };
+});

package/table/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableElement, TSinchTableReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table': TSinchTableReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table': TSinchTableElement;
+    }
+}

package/table/index.js

@@ -0,0 +1,14 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:table}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'table');
+  }
+});

package/table/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableElement = HTMLElement;
+export type TSinchTableReact = TSinchElementReact<TSinchTableElement>;

package/table/types.js

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

package/table-body/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableBodyElement, TSinchTableBodyReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-body': TSinchTableBodyReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-body': TSinchTableBodyElement;
+    }
+}

package/table-body/index.js

@@ -0,0 +1,14 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:table-row-group}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-body', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'rowgroup');
+  }
+});

package/table-body/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableBodyElement = HTMLElement;
+export type TSinchTableBodyReact = TSinchElementReact<TSinchTableBodyElement>;

package/table-body/types.js

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

package/table-cell/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableCellElement, TSinchTableCellReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-cell': TSinchTableCellReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-cell': TSinchTableCellElement;
+    }
+}

package/table-cell/index.js

@@ -0,0 +1,21 @@
+import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-comp-table-color-cell-default-border-initial)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
+import { alignValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-cell', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'cell');
+  }
+  set align(value) {
+    updateLiteralAttribute(this, alignValues, 'align', value);
+  }
+  get align() {
+    return getLiteralAttribute(this, alignValues, 'align', 'start');
+  }
+});

package/table-cell/types.d.ts

@@ -0,0 +1,9 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableAlignType = 'start' | 'center' | 'end';
+export type TSinchTableCellElement = HTMLElement & {
+    align: TSinchTableAlignType;
+    setAttribute(name: 'align', value: TSinchTableAlignType): void;
+};
+export type TSinchTableCellReact = TSinchElementReact<TSinchTableCellElement> & {
+    align?: TSinchTableAlignType;
+};

package/table-cell/types.js

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

package/table-cell/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchTableAlignType } from './types';
+export declare const alignValues: readonly TSinchTableAlignType[];

package/table-cell/utils.js

@@ -0,0 +1 @@
+export const alignValues = ['start', 'center', 'end'];

package/table-head/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableHeadElement, TSinchTableHeadReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head': TSinchTableHeadReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-head': TSinchTableHeadElement;
+    }
+}

package/table-head/index.js

@@ -0,0 +1,14 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:table-header-group}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-head', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'rowgroup');
+  }
+});

package/table-head/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableHeadElement = HTMLElement;
+export type TSinchTableHeadReact = TSinchElementReact<TSinchTableHeadElement>;

package/table-head/types.js

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

package/table-head-cell/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchTableHeaderCellElement, TSinchTableHeaderCellReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head-cell': TSinchTableHeaderCellReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-head-cell': TSinchTableHeaderCellElement;
+    }
+}

package/table-head-cell/index.js

@@ -0,0 +1,57 @@
+import '../text';
+import { alignValues } from '../table-cell/utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-comp-table-color-head-cell-default-border-initial);vertical-align:middle}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;--sinch-global-color-icon:var(--sinch-comp-table-color-head-cell-default-icon-initial)}#text{flex-shrink:1;min-width:0;--sinch-global-color-text:var(--sinch-comp-table-color-head-cell-default-text-initial)}#text:empty{display:none}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host([fit]){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><sinch-text id="text" type="m"></sinch-text><slot name="tooltip"></slot><slot name="right"></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-head-cell', class extends NectaryElement {
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'columnheader');
+    this.setAttribute('scope', 'col');
+  }
+  static get observedAttributes() {
+    return ['text', 'fit'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'fit':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text');
+  }
+  set align(value) {
+    updateLiteralAttribute(this, alignValues, 'align', value);
+  }
+  get align() {
+    return getLiteralAttribute(this, alignValues, 'align', 'start');
+  }
+  set fit(isFit) {
+    updateBooleanAttribute(this, 'fit', isFit);
+  }
+  get fit() {
+    return getBooleanAttribute(this, 'fit');
+  }
+});

package/table-head-cell/types.d.ts

@@ -0,0 +1,15 @@
+import type { TSinchTableAlignType } from '../table-cell/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchTableHeaderCellElement = HTMLElement & {
+    text: string | null;
+    align: TSinchTableAlignType;
+    fit: boolean;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'align', value: TSinchTableAlignType): void;
+    setAttribute(name: 'fit', value: ''): void;
+};
+export type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCellElement> & {
+    text?: string;
+    fit?: boolean;
+    align?: TSinchTableAlignType;
+};

package/table-head-cell/types.js

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

package/table-row/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableRowElement, TSinchTableRowReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-row': TSinchTableRowReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-row': TSinchTableRowElement;
+    }
+}

package/table-row/index.js

@@ -0,0 +1,42 @@
+import { defineCustomElement, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-row;background-color:var(--sinch-comp-table-color-row-default-background-initial)}:host([selected]){background-color:var(--sinch-comp-table-color-row-checked-background-initial)}:host(:hover){background-color:var(--sinch-comp-table-color-row-default-background-hover)}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-comp-table-color-row-default-background-sticky)}:host(:last-child) ::slotted(sinch-table-cell){border-bottom:none}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-row', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'row');
+  }
+  static get observedAttributes() {
+    return ['sticky', 'selected'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'sticky':
+      case 'selected':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  set sticky(isSticky) {
+    updateBooleanAttribute(this, 'sticky', isSticky);
+  }
+  get sticky() {
+    return getBooleanAttribute(this, 'sticky');
+  }
+  set selected(isSelected) {
+    updateBooleanAttribute(this, 'selected', isSelected);
+  }
+  get selected() {
+    return getBooleanAttribute(this, 'selected');
+  }
+});

package/table-row/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableRowElement = HTMLElement & {
+    sticky: boolean;
+    selected: boolean;
+    setAttribute(name: 'sticky', value: ''): void;
+    setAttribute(name: 'selected', value: ''): void;
+};
+export type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
+    sticky?: boolean;
+    selected?: boolean;
+};

package/table-row/types.js

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

package/tabs/index.d.ts

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

package/tabs/index.js

@@ -0,0 +1,80 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-comp-tab-color-default-border-initial);box-sizing:border-box}</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();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$slot = shadowRoot.querySelector('slot');
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'tablist');
+    this.#$slot.addEventListener('option-change', this.#onOptionChange, {
+      signal
+    });
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange, {
+      signal
+    });
+    this.addEventListener('-change', this.#onChangeReactHandler, {
+      signal
+    });
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['value'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          this.#onValueChange(newVal);
+          break;
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  nthOptionRect(index) {
+    const $el = this.#$slot.assignedElements()[index];
+    if ($el != null) {
+      return getRect($el);
+    }
+    return null;
+  }
+  #onSlotChange = () => {
+    this.#onValueChange(this.value);
+  };
+  #onOptionChange = e => {
+    e.stopPropagation();
+    this.#dispatchChangeEvent(e.detail);
+  };
+  #onValueChange(value) {
+    for (const $option of this.#$slot.assignedElements()) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+      updateBooleanAttribute($option, 'data-checked', isChecked);
+    }
+  }
+  #dispatchChangeEvent(value) {
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  }
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/tabs/types.d.ts

@@ -0,0 +1,18 @@
+import type { TRect, TSinchElementReact } from '../types';
+export 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 type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
+    /** Value */
+    value: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Change value event */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/tabs/types.js

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

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,79 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, 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;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button" tabindex="0"><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({
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
+  }
+  connectedCallback() {
+    this.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 (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#$button.disabled = isDisabled;
+          updateBooleanAttribute(this, name, isDisabled);
+          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
+    }));
+  };
+});