@nectary/components 2.12.1 → 2.12.3

package/lib/cjs/skeleton/index.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _utils = require('../utils');
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-sys-color-container-main-default);border-radius:var(--sinch-sys-shape-radius-l);border:1px solid var(--sinch-sys-color-border-light)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-sys-color-container-contrast-primary-default) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+const ANIMATION_DURATION = 2000;
+const BORDER_WIDTH = 1;
+(0, _utils.defineCustomElement)('sinch-skeleton', class extends _utils.NectaryElement {
+  #animation = null;
+  #shimmer;
+  #wrapper;
+  #slot;
+  #controller = null;
+  #clip;
+  #borderWidth = 0;
+  #bb = null;
+  #observer = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#shimmer = shadowRoot.querySelector('#shimmer');
+    this.#slot = shadowRoot.querySelector('slot');
+    this.#wrapper = shadowRoot.querySelector('#wrapper');
+    this.#clip = shadowRoot.querySelector('#clip');
+  }
+  connectedCallback() {
+    const id = (0, _utils.getUid)();
+    this.#shimmer.style.setProperty('clip-path', `url(#${id})`);
+    this.#clip.setAttribute('id', id);
+    this.#controller = new AbortController();
+    if (!(0, _utils.shouldReduceMotion)()) {
+      this.#slot.addEventListener('slotchange', this.#onSlotChange, {
+        signal: this.#controller.signal
+      });
+      this.#observer = new IntersectionObserver(entries => {
+        this.#bb = entries[0].boundingClientRect;
+        if (this.#bb.width === 0) {
+          return;
+        }
+        this.#updateAnimation();
+        for (const child of this.#slot.assignedElements()) {
+          this.#handleSkeletonItemData(child);
+        }
+        this.#observer.disconnect();
+        this.#observer = null;
+      }, {
+        threshold: 1
+      });
+      this.#observer.observe(this.#wrapper);
+    }
+  }
+  disconnectedCallback() {
+    this.#animation?.cancel();
+    this.#animation = null;
+    this.#controller.abort();
+    this.#controller = null;
+    this.#observer?.disconnect();
+    this.#observer = null;
+  }
+  static get observedAttributes() {
+    return ['card'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'card':
+        {
+          this.#borderWidth = (0, _utils.isAttrTrue)(newVal) ? BORDER_WIDTH : 0;
+          break;
+        }
+    }
+  }
+  #updateAnimation() {
+    const bb = this.#bb;
+    const bgWidth = bb.width * 4;
+    this.#shimmer.style.setProperty('background-size', `${bgWidth}px`);
+    this.#animation = this.#shimmer.animate({
+      backgroundPosition: [`0px`, `${bgWidth}px`]
+    }, {
+      duration: ANIMATION_DURATION,
+      iterations: Infinity
+    });
+  }
+  #onSlotChange = () => {
+    this.#clip.innerHTML = '';
+    if (this.#bb === null) {
+      return;
+    }
+    for (const child of this.#slot.assignedElements()) {
+      this.#handleSkeletonItemData(child);
+    }
+  };
+  #handleSkeletonItemData(child) {
+    const data = child.getBoundingClientRect();
+    const radiusStr = (0, _utils.getCssVar)(child, '--sinch-local-shape-radius') ?? '0';
+    const radius = (0, _utils.attrValueToInteger)(radiusStr, {
+      min: 0,
+      defaultValue: 0
+    });
+    const bb = this.#bb;
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('x', (data.x - bb.x - this.#borderWidth).toString());
+    rect.setAttribute('y', (data.y - bb.y - this.#borderWidth).toString());
+    rect.setAttribute('width', data.width.toString());
+    rect.setAttribute('height', data.height.toString());
+    rect.setAttribute('rx', radius.toString());
+    this.#clip.appendChild(rect);
+  }
+});

package/lib/cjs/skeleton/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/skeleton-item/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _utils = require('../utils');
+const templateHTML = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-light);border-radius:var(--sinch-local-shape-radius)}</style><div id="content"></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-skeleton-item', class extends _utils.NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+});

package/lib/cjs/skeleton-item/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/spinner/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _utils = require('../utils');
+var _size = require('../utils/size');
+const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}:host([data-size="l"]){width:50px;height:50px;contain:strict}:host([data-size="m"]){width:24px;height:24px;contain:strict}:host([data-size="s"]){width:16px;height:16px;contain:strict}#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;
+(0, _utils.defineCustomElement)('sinch-spinner', class extends _utils.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');
+    (0, _utils.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':
+        {
+          (0, _utils.updateAttribute)(this, 'data-size', newVal);
+          break;
+        }
+    }
+  }
+  set size(size) {
+    (0, _utils.updateLiteralAttribute)(this, _size.sizeValues, 'size', size);
+  }
+  get size() {
+    return (0, _utils.getLiteralAttribute)(this, _size.sizeValues, 'size', _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/lib/cjs/spinner/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/standalone.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _utils = require('./utils');
+require('./accordion-item/index.js');
+require('./accordion/index.js');
+require('./action-menu-option/index.js');
+require('./action-menu/index.js');
+require('./alert/index.js');
+require('./avatar/index.js');
+require('./badge/index.js');
+require('./button/index.js');
+require('./card-container/index.js');
+require('./card/index.js');
+require('./chat-block/index.js');
+require('./chat-bubble/index.js');
+require('./chat/index.js');
+require('./checkbox/index.js');
+require('./chip/index.js');
+require('./code-tag/index.js');
+require('./color-menu-option/index.js');
+require('./color-menu/index.js');
+require('./color-swatch/index.js');
+require('./date-picker/index.js');
+require('./dialog/index.js');
+require('./emoji-picker/index.js');
+require('./emoji/index.js');
+require('./field/index.js');
+require('./file-drop/index.js');
+require('./file-picker/index.js');
+require('./file-status/index.js');
+require('./flag/index.js');
+require('./grid-item/index.js');
+require('./grid/index.js');
+require('./help-tooltip/index.js');
+require('./horizontal-stepper-item/index.js');
+require('./horizontal-stepper/index.js');
+require('./icon-button/index.js');
+require('./icon/index.js');
+require('./inline-alert/index.js');
+require('./input/index.js');
+require('./link/index.js');
+require('./list-item/index.js');
+require('./list/index.js');
+require('./pagination/index.js');
+require('./pop/index.js');
+require('./popover/index.js');
+require('./progress-stepper-item/index.js');
+require('./progress-stepper/index.js');
+require('./progress/index.js');
+require('./radio-option/index.js');
+require('./radio/index.js');
+require('./rich-text/index.js');
+require('./rich-textarea/index.js');
+require('./segment-collapse/index.js');
+require('./segment/index.js');
+require('./segmented-control-option/index.js');
+require('./segmented-control/index.js');
+require('./segmented-icon-control-option/index.js');
+require('./segmented-icon-control/index.js');
+require('./select-button/index.js');
+require('./select-menu-option/index.js');
+require('./select-menu/index.js');
+require('./skeleton-item/index.js');
+require('./skeleton/index.js');
+require('./spinner/index.js');
+require('./stop-events/index.js');
+require('./table-body/index.js');
+require('./table-cell/index.js');
+require('./table-head-cell/index.js');
+require('./table-head/index.js');
+require('./table-row/index.js');
+require('./table/index.js');
+require('./tabs-icon-option/index.js');
+require('./tabs-option/index.js');
+require('./tabs/index.js');
+require('./tag/index.js');
+require('./text/index.js');
+require('./textarea/index.js');
+require('./tile-control-option/index.js');
+require('./tile-control/index.js');
+require('./time-picker/index.js');
+require('./title/index.js');
+require('./toast-manager/index.js');
+require('./toast/index.js');
+require('./toggle/index.js');
+require('./tooltip/index.js');
+require('./vertical-stepper-item/index.js');
+require('./vertical-stepper/index.js');
+(0, _utils.setNectaryRegistry)(window.customElements);

package/lib/cjs/stop-events/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _utils = require('../utils');
+(0, _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 = (0, _utils.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/lib/cjs/table/index.js

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

package/lib/cjs/table/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/table-body/index.js

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

package/lib/cjs/table-body/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/table-cell/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _utils = require('../utils');
+var _utils2 = require('./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>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-table-cell', class extends _utils.NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'cell');
+  }
+  set align(value) {
+    (0, _utils.updateLiteralAttribute)(this, _utils2.alignValues, 'align', value);
+  }
+  get align() {
+    return (0, _utils.getLiteralAttribute)(this, _utils2.alignValues, 'align', 'start');
+  }
+});

package/lib/cjs/table-cell/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/table-cell/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.alignValues = void 0;
+const alignValues = exports.alignValues = ['start', 'center', 'end'];

package/lib/cjs/table-head/index.js

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

package/lib/cjs/table-head/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/table-head-cell/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+require('../text');
+var _utils = require('../table-cell/utils');
+var _utils2 = require('../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;
+(0, _utils2.defineCustomElement)('sinch-table-head-cell', class extends _utils2.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 ((0, _utils2.isAttrEqual)(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'fit':
+        {
+          (0, _utils2.updateBooleanAttribute)(this, name, (0, _utils2.isAttrTrue)(newVal));
+          break;
+        }
+    }
+  }
+  set text(value) {
+    (0, _utils2.updateAttribute)(this, 'text', value);
+  }
+  get text() {
+    return (0, _utils2.getAttribute)(this, 'text');
+  }
+  set align(value) {
+    (0, _utils2.updateLiteralAttribute)(this, _utils.alignValues, 'align', value);
+  }
+  get align() {
+    return (0, _utils2.getLiteralAttribute)(this, _utils.alignValues, 'align', 'start');
+  }
+  set fit(isFit) {
+    (0, _utils2.updateBooleanAttribute)(this, 'fit', isFit);
+  }
+  get fit() {
+    return (0, _utils2.getBooleanAttribute)(this, 'fit');
+  }
+});

package/lib/cjs/table-head-cell/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/table-row/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _utils = require('../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;
+(0, _utils.defineCustomElement)('sinch-table-row', class extends _utils.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 ((0, _utils.isAttrEqual)(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'sticky':
+      case 'selected':
+        {
+          (0, _utils.updateBooleanAttribute)(this, name, (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+    }
+  }
+  set sticky(isSticky) {
+    (0, _utils.updateBooleanAttribute)(this, 'sticky', isSticky);
+  }
+  get sticky() {
+    return (0, _utils.getBooleanAttribute)(this, 'sticky');
+  }
+  set selected(isSelected) {
+    (0, _utils.updateBooleanAttribute)(this, 'selected', isSelected);
+  }
+  get selected() {
+    return (0, _utils.getBooleanAttribute)(this, 'selected');
+  }
+});

package/lib/cjs/table-row/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/tabs/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _utils = require('../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;
+(0, _utils.defineCustomElement)('sinch-tabs', class extends _utils.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) {
+    (0, _utils.updateAttribute)(this, 'value', value);
+  }
+  get value() {
+    return (0, _utils.getAttribute)(this, 'value', '');
+  }
+  nthOptionRect(index) {
+    const $el = this.#$slot.assignedElements()[index];
+    if ($el != null) {
+      return (0, _utils.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 = !(0, _utils.getBooleanAttribute)($option, 'disabled') && value === (0, _utils.getAttribute)($option, 'value', '');
+      (0, _utils.updateBooleanAttribute)($option, 'data-checked', isChecked);
+    }
+  }
+  #dispatchChangeEvent(value) {
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  }
+  #onChangeReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-change')?.(e);
+  };
+});

package/lib/cjs/tabs/types.js

@@ -0,0 +1 @@
+"use strict";