@nectary/components 0.48.1 → 0.49.0

package/pagination/index.js

@@ -95,11 +95,9 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     e.stopPropagation();
     const value = getIntegerAttribute(this, 'value', 0) - 1;
     const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
-
     if (e.target === this.#$left) {
       return this.#dispatchChangeEvent(value - 1);
     }
-
     if (e.target === this.#$right) {
       return this.#dispatchChangeEvent(value + 1);
     }
@@ -108,19 +106,15 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
       if (btnIndex === FIRST_BTN_INDEX) {
         return this.#dispatchChangeEvent(0);
       }
-
       if (btnIndex === this.#$buttons.length - 1) {
         return this.#dispatchChangeEvent(max - 1);
       }
-
       if (btnIndex === DOTS_LEFT_INDEX && max > NUM_BUTTONS && value > MIDDLE_BTN_INDEX) {
         return this.#dispatchChangeEvent(Math.floor(value / 2));
       }
-
       if (btnIndex === DOTS_RIGHT_INDEX && max > NUM_BUTTONS && value <= max - DOTS_RIGHT_INDEX) {
         return this.#dispatchChangeEvent(Math.floor((max - value) / 2 + value));
       }
-
       return this.#dispatchChangeEvent(btnIndex + Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS)));
     }
   };

package/pagination/types.d.ts

@@ -1,6 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchPaginationElement = HTMLElement & {
+export type TSinchPaginationElement = HTMLElement & {
     value: number;
     max: number;
     readonly prevButtonRect: TRect;
@@ -11,7 +11,7 @@ export declare type TSinchPaginationElement = HTMLElement & {
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'max', value: string): void;
 };
-export declare type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
+export type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
     value: number;
     max: number;
     /** @deprecated */

package/pop/index.js

@@ -146,7 +146,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     if (!this.isConnected || this.#isOpen()) {
       return;
     }
-
     this.#$targetSlot.addEventListener('blur', this.#stopEventPropagation, true);
     this.#$focus.style.setProperty('display', 'block');
     this.#$focus.addEventListener('focus', this.#captureRelatedActiveElement);
@@ -154,7 +153,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.#$focus.removeEventListener('focus', this.#captureRelatedActiveElement);
     this.#$focus.style.removeProperty('display');
     this.#$targetSlot.removeEventListener('blur', this.#stopEventPropagation, true);
-
     this.#$dialog.showModal();
     this.#$target.setAttribute('aria-expanded', 'true');
     this.#updateOrientation();
@@ -180,15 +178,12 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         const matrix = new DOMMatrixReadOnly(targetElComputedStyle.transform);
         $targetEl.style.setProperty('transform', matrix.translate(-matrix.e, -matrix.f).toString());
       }
-
       getFirstSlotElement(this.#$targetSlot)?.setAttribute('slot', 'target-open');
-
       this.#$targetOpenSlot.addEventListener('keydown', this.#onTargetKeydown);
       if (this.#targetActiveElement !== null) {
         this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
         this.#targetActiveElement.focus();
         this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
-
         if (!isElementFocused(this.#targetActiveElement)) {
           requestAnimationFrame(() => {
             this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
@@ -198,10 +193,8 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         }
       }
     }
-
     disableScroll();
     window.addEventListener('resize', this.#onResize);
-
     this.#dispatchContentVisibility(true);
   }
   #onCollapse() {
@@ -209,23 +202,17 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
       return;
     }
     const isNonModal = !this.modal;
-
     this.#dispatchContentVisibility(false);
-
     this.#$targetOpenSlot.removeEventListener('keydown', this.#onTargetKeydown);
-
     if (isNonModal) {
       this.#targetActiveElement = null;
       this.#$targetOpenSlot.addEventListener('blur', this.#captureActiveElement, true);
     }
-
     this.#$dialog.close();
     this.#$target.setAttribute('aria-expanded', 'false');
-
     if (isNonModal) {
       this.#$targetOpenSlot.removeEventListener('blur', this.#captureActiveElement, true);
     }
-
     const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
     targetEl.style.removeProperty('margin');
     targetEl.style.removeProperty('position');
@@ -238,13 +225,11 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.#$target.style.removeProperty('display');
     this.#$target.style.removeProperty('width');
     this.#$target.style.removeProperty('height');
-
     if (this.#targetActiveElement !== null) {
       if (!isElementFocused(this.#targetActiveElement)) {
         this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
         this.#targetActiveElement.focus();
         this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
-
         if (!isElementFocused(this.#targetActiveElement)) {
           const $targetEl = this.#targetActiveElement;
           requestAnimationFrame(() => {
@@ -256,7 +241,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         this.#targetActiveElement = null;
       }
     }
-
     enableScroll();
     this.#resizeThrottle.cancel();
     window.removeEventListener('resize', this.#onResize);

package/pop/types.d.ts

@@ -1,6 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
-export declare type TSinchPopOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'bottom-stretch' | 'top-center' | 'top-stretch' | 'center-right' | 'center-left';
-export declare type TSinchPopElement = HTMLElement & {
+export type TSinchPopOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'bottom-stretch' | 'top-center' | 'top-stretch' | 'center-right' | 'center-left';
+export type TSinchPopElement = HTMLElement & {
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */
@@ -20,7 +20,7 @@ export declare type TSinchPopElement = HTMLElement & {
     setAttribute(name: 'modal', value: boolean): void;
     setAttribute(name: 'inset', value: string): void;
 };
-export declare type TSinchPopReact = TSinchElementReact<TSinchPopElement> & {
+export type TSinchPopReact = TSinchElementReact<TSinchPopElement> & {
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */

package/pop/utils.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchPopOrientation } from './types';
 export declare const orientationValues: readonly TSinchPopOrientation[];
-declare type TAssertOrientation = (value: string | null) => asserts value is TSinchPopOrientation;
+type TAssertOrientation = (value: string | null) => asserts value is TSinchPopOrientation;
 export declare const assertOrientation: TAssertOrientation;
 export declare const disableScroll: () => void;
 export declare const enableScroll: () => void;

package/popover/types.d.ts

@@ -1,6 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
-export declare type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
-export declare type TSinchPopoverElement = HTMLElement & {
+export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
+export type TSinchPopoverElement = HTMLElement & {
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */
@@ -22,7 +22,7 @@ export declare type TSinchPopoverElement = HTMLElement & {
     /** Show tip */
     setAttribute(name: 'tip', value: ''): void;
 };
-export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
+export type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */

package/popover/utils.d.ts

@@ -1,7 +1,7 @@
-import type { TSinchPopOrientation } from '../pop/types';
 import type { TSinchPopoverOrientation } from './types';
+import type { TSinchPopOrientation } from '../pop/types';
 export declare const orientationValues: readonly TSinchPopoverOrientation[];
 export declare const getPopOrientation: (orientation: TSinchPopoverOrientation) => TSinchPopOrientation;
-declare type TAssertOrientation = (value: string | null) => asserts value is TSinchPopoverOrientation;
+type TAssertOrientation = (value: string | null) => asserts value is TSinchPopoverOrientation;
 export declare const assertOrientation: TAssertOrientation;
 export {};

package/progress/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchProgressElement = HTMLElement & {
+export type TSinchProgressElement = HTMLElement & {
     value: number;
     detailed: boolean;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'detailed', value: ''): void;
 };
-export declare type TSinchProgressReact = TSinchElementReact<TSinchProgressElement> & {
+export type TSinchProgressReact = TSinchElementReact<TSinchProgressElement> & {
     value: number;
     detailed?: boolean;
     'aria-label': string;

package/radio/types.d.ts

@@ -1,12 +1,12 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchRadioElement = HTMLElement & {
+export type TSinchRadioElement = HTMLElement & {
     value: string;
     addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
     addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'value', value: string): void;
 };
-export declare type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
+export type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
     value: string;
     'aria-label': string;
     /** @deprecated */

package/radio-option/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchRadioOptionElement = HTMLElement & {
+export type TSinchRadioOptionElement = HTMLElement & {
     value: string;
     checked: boolean;
     disabled: boolean;
@@ -9,7 +9,7 @@ export declare type TSinchRadioOptionElement = HTMLElement & {
     setAttribute(name: 'disabled', value: ''): void;
     setAttribute(name: 'text', value: string): void;
 };
-export declare type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptionElement> & {
+export type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptionElement> & {
     value: string;
     disabled?: boolean;
     text: string;

package/rich-text/index.d.ts

@@ -0,0 +1,12 @@
+import '../icons/cancel';
+import type { TSinchRichTextElement, TSinchRichTextReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-rich-text': TSinchRichTextReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-rich-text': TSinchRichTextElement;
+    }
+}

package/rich-text/index.js

@@ -0,0 +1,56 @@
+import '../icons/cancel';
+import { defineCustomElement, NectaryElement, getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, parseMarkdown } from '../utils';
+const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([size="s"]){font:var(--sinch-font-text-s)}:host([size=xs]){font:var(--sinch-font-text-xs)}:host([size=xxs]){font:var(--sinch-font-text-xxs)}.em1{font-style:italic}.em2{font-weight:700}.em3{font-style:italic;font-weight:700}.strikethrough{text-decoration:line-through}.link{color:var(--sinch-color-tropical-500)}.code{border:1px solid var(--sinch-color-border-light);background-color:var(--sinch-color-bg-primary-contrast);padding:0 .25em;border-radius:var(--sinch-shape-radius-xs)}.paragraph{margin:0}.paragraph+.paragraph{margin-top:12px}</style><div id="wrapper"></div>';
+import { assertSize, sizeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-rich-text', class extends NectaryElement {
+  #wrapper;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#wrapper = shadowRoot.querySelector('#wrapper');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'paragraph');
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', 'm');
+  }
+  set size(value) {
+    updateLiteralAttribute(this, sizeValues, 'size', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  static get observedAttributes() {
+    return ['size', 'text'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'size':
+        {
+          if ('production' !== 'production') {
+            assertSize(newVal);
+          }
+          break;
+        }
+      case 'text':
+        {
+          this.#updateText(newVal);
+          break;
+        }
+    }
+  }
+  #updateText(text) {
+    if (text === null) {
+      this.#wrapper.innerHTML = '';
+      return;
+    }
+    this.#wrapper.innerHTML = parseMarkdown(text);
+  }
+});

package/rich-text/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchTextType } from '../text/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchRichTextElement = HTMLElement & {
+    size: TSinchTextType;
+    text: string;
+    setAttribute(name: 'size', value: TSinchTextType): void;
+    setAttribute(name: 'text', value: string): void;
+};
+export type TSinchRichTextReact = TSinchElementReact<TSinchRichTextElement> & {
+    size?: TSinchTextType;
+    text: string;
+};

package/rich-text/types.js

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

package/rich-text/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TSinchTextType } from '../text/types';
+export declare const sizeValues: readonly TSinchTextType[];
+type TAssertSize = (value: string | null) => asserts value is TSinchTextType;
+export declare const assertSize: TAssertSize;
+export {};

package/rich-text/utils.js

@@ -0,0 +1,6 @@
+export const sizeValues = ['m', 's', 'xs', 'xxs'];
+export const assertSize = value => {
+  if (value === null || !sizeValues.includes(value)) {
+    throw new Error(`sinch-rich-text: invalid "size" attribute: "${value}"`);
+  }
+};

package/segment/types.d.ts

@@ -1,6 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-export declare type TSinchSegmentElement = HTMLElement & {
+export type TSinchSegmentElement = HTMLElement & {
     caption: string;
     collapsed: boolean;
     size: TSinchSize;
@@ -9,7 +9,7 @@ export declare type TSinchSegmentElement = HTMLElement & {
     setAttribute(name: 'collapsed', value: ''): void;
     setAttribute(name: 'size', value: TSinchSize): void;
 };
-export declare type TSinchSegmentReact = TSinchElementReact<TSinchSegmentElement> & {
+export type TSinchSegmentReact = TSinchElementReact<TSinchSegmentElement> & {
     caption: string;
     collapsed?: boolean;
     size?: TSinchSize;

package/segment-collapse/types.d.ts

@@ -1,12 +1,12 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchSegmentExpandElement = HTMLElement & {
+export type TSinchSegmentExpandElement = HTMLElement & {
     value: boolean;
     addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
     addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'value', value: string): void;
 };
-export declare type TSinchSegmentExpandReact = TSinchElementReact<TSinchSegmentExpandElement> & {
+export type TSinchSegmentExpandReact = TSinchElementReact<TSinchSegmentExpandElement> & {
     value: boolean;
     'aria-label': string;
     /** @deprecated */

package/segmented-control/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchSegmentedControlElement = HTMLElement & {
+export type TSinchSegmentedControlElement = HTMLElement & {
     value: string;
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     setAttribute(name: 'value', value: string): void;
 };
-export declare type TSinchSegmentedControlReact = TSinchElementReact<TSinchSegmentedControlElement> & {
+export type TSinchSegmentedControlReact = TSinchElementReact<TSinchSegmentedControlElement> & {
     value: string;
     'aria-label': string;
     /** @deprecated */

package/segmented-control-option/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchSegmentedControlOptionElement = HTMLElement & {
+export type TSinchSegmentedControlOptionElement = HTMLElement & {
     value: string;
     disabled: boolean;
     text: string;
@@ -9,7 +9,7 @@ export declare type TSinchSegmentedControlOptionElement = HTMLElement & {
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchSegmentedControlOptionReact = TSinchElementReact<TSinchSegmentedControlOptionElement> & {
+export type TSinchSegmentedControlOptionReact = TSinchElementReact<TSinchSegmentedControlOptionElement> & {
     value: string;
     text: string;
     disabled?: boolean;

package/segmented-icon-control/types.d.ts

@@ -1,13 +1,13 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchSegmentedIconControlElement = HTMLElement & {
+export type TSinchSegmentedIconControlElement = HTMLElement & {
     value: string;
     multiple: boolean;
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'multiple', value: ''): void;
 };
-export declare type TSinchSegmentedIconControlReact = TSinchElementReact<TSinchSegmentedIconControlElement> & {
+export type TSinchSegmentedIconControlReact = TSinchElementReact<TSinchSegmentedIconControlElement> & {
     value: string;
     multiple?: boolean;
     'aria-label': string;

package/segmented-icon-control-option/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchSegmentedIconControlOptionElement = HTMLElement & {
+export type TSinchSegmentedIconControlOptionElement = HTMLElement & {
     value: string;
     disabled: boolean;
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
@@ -7,7 +7,7 @@ export declare type TSinchSegmentedIconControlOptionElement = HTMLElement & {
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchSegmentedIconControlOptionReact = TSinchElementReact<TSinchSegmentedIconControlOptionElement> & {
+export type TSinchSegmentedIconControlOptionReact = TSinchElementReact<TSinchSegmentedIconControlOptionElement> & {
     value: string;
     disabled?: boolean;
     'aria-label': string;

package/select-button/index.js

@@ -2,7 +2,7 @@ import '../text';
 import '../icons/keyboard-arrow-down';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context } from '../utils';
 import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-select-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-select-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-size);padding:0 8px 0 12px;background-color:var(--sinch-color-bg-primary-light);border-radius:var(--sinch-shape-radius);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([disabled]:not([disabled=false])) #wrapper{--sinch-color-icon:var(--sinch-color-text-disabled)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}#button{all:initial;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}#text{flex:1;min-width:0;color:var(--sinch-color-text-muted)}:host([text]:not([text=""])) #text{color:var(--sinch-color-text-default)}#button:disabled{cursor:initial}#button:disabled+#border{border-color:var(--sinch-color-border-disabled)}#button:focus-visible+#border{border-color:var(--sinch-color-border-focus);border-width:2px}:host([invalid]) #button:enabled+#border{border-color:var(--sinch-color-text-invalid)}#button:disabled~#text{color:var(--sinch-color-text-disabled)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper"><button id="button"></button><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-select-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-select-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-size);padding:0 8px 0 12px;background-color:var(--sinch-color-bg-primary-light);border-radius:var(--sinch-shape-radius);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]:not([disabled=false])) #wrapper{--sinch-color-icon:var(--sinch-color-text-disabled)}#button{all:initial;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}#text{flex:1;min-width:0;color:var(--sinch-color-text-muted)}:host([text]:not([text=""])) #text{color:var(--sinch-color-text-default)}#button:disabled{cursor:initial}#button:disabled+#border{border-color:var(--sinch-color-border-disabled)}#button:focus-visible+#border{border-color:var(--sinch-color-border-focus);border-width:2px}:host([invalid]) #button:enabled+#border{border-color:var(--sinch-color-text-invalid)}#button:disabled~#text{color:var(--sinch-color-text-disabled)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper"><button id="button"></button><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-button', class extends NectaryElement {

package/select-button/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-export declare type TSinchSelectButtonElement = HTMLElement & {
+export type TSinchSelectButtonElement = HTMLElement & {
     /** Text */
     text: string;
     /** Text that appears in the text field when it has no text set */
@@ -28,7 +28,7 @@ export declare type TSinchSelectButtonElement = HTMLElement & {
     /** Size, `m` by default */
     setAttribute(name: 'size', value: TSinchSize): void;
 };
-export declare type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectButtonElement> & {
+export type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectButtonElement> & {
     /** Text */
     text: string;
     /** Label that is used for a11y` */

package/select-menu/index.js

@@ -251,7 +251,6 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     const hasRows = this.hasAttribute('rows');
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-
       updateBooleanAttribute($op, 'data-selected', isSelected);
       if (isSelected && hasRows) {
         $op.scrollIntoView?.({

package/select-menu/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchSelectMenuElement = HTMLElement & {
+export type TSinchSelectMenuElement = HTMLElement & {
     /** Selected value, CSV when multiple */
     value: string;
     /** How many rows to show and scroll the rest */
@@ -15,7 +15,7 @@ export declare type TSinchSelectMenuElement = HTMLElement & {
     /** Allows multiple selection */
     setAttribute(name: 'multiple', value: ''): void;
 };
-export declare type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement> & {
+export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement> & {
     /** Selected value, CSV when multiple */
     value: string;
     /** How many rows to show and scroll the rest */

package/select-menu-option/index.js

@@ -1,7 +1,7 @@
 import '../icons/check';
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex:1}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled])>#wrapper{cursor:initial;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon-check id="check"></sinch-icon-check></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex:1}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled])>#wrapper{cursor:initial;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon-check id="check"></sinch-icon-check></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 export class SelectMenuOption extends NectaryElement {

package/select-menu-option/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchSelectMenuOptionElement = HTMLElement & {
+export type TSinchSelectMenuOptionElement = HTMLElement & {
     /** Value */
     value: string;
     /** Display text */
@@ -14,7 +14,7 @@ export declare type TSinchSelectMenuOptionElement = HTMLElement & {
     /** Disabled state */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchSelectMenuOptionReact = TSinchElementReact<TSinchSelectMenuOptionElement> & {
+export type TSinchSelectMenuOptionReact = TSinchElementReact<TSinchSelectMenuOptionElement> & {
     /** Value */
     value: string;
     /** Display text */

package/spinner/types.d.ts

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

package/table/types.d.ts

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

package/table-body/types.d.ts

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

package/table-cell/types.d.ts

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

package/table-head/types.d.ts

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

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

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

package/table-row/types.d.ts

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