@nectary/components 2.9.0 → 2.10.0

package/input/types.d.ts

@@ -0,0 +1,86 @@
+import type { TSinchElementReact } from '../types';
+import type { TSinchSize } from '../utils/size';
+export type TSinchInputType = 'text' | 'password' | 'number';
+export type TSinchInputClipboardEvent = CustomEvent<{
+    value: string;
+    replaceWith: (value: string) => void;
+}>;
+export type TSinchInputElement = HTMLElement & {
+    /** Text field type, `text` by default */
+    type: TSinchInputType;
+    /** Value */
+    value: string;
+    /** Mask */
+    mask: string | null;
+    /** Text that appears in the text field when it has no value set */
+    placeholder: string | null;
+    /** The HTML autocomplete attribute */
+    autocomplete: string;
+    /** Invalid state */
+    invalid: boolean;
+    /** Disabled */
+    disabled: boolean;
+    /** Whether the input should be autocofused */
+    autofocus: boolean;
+    /** Size, `m` by default */
+    size: TSinchSize;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: 'forward' | 'backward' | 'none' | null;
+    setSelectionRange(selectionStart: number, selectionEnd: number): void;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Text field type, `text` by default */
+    setAttribute(name: 'type', value: TSinchInputType): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Mask */
+    setAttribute(name: 'mask', value: string): void;
+    /** Text that appears in the text field when it has no value set */
+    setAttribute(name: 'placeholder', value: string): void;
+    /** The HTML autocomplete attribute */
+    setAttribute(name: 'autocomplete', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+    /** Autofocus */
+    setAttribute(name: 'autofocus', value: ''): void;
+    /** Size, `m` by default */
+    setAttribute(name: 'size', value: TSinchSize): void;
+};
+export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
+    /** Controlled value, doesn't change on its own and requres an onChange-value state loop */
+    value: string;
+    /** Mask */
+    mask?: string;
+    /** Label that is used for a11y – might be different from `label` */
+    'aria-label': string;
+    /** Text field type, `text` by default */
+    type?: TSinchInputType;
+    /** The HTML autocomplete attribute */
+    autocomplete?: string;
+    /** Text that appears in the text field when it has no value set */
+    placeholder?: string;
+    /** Invalid state */
+    invalid?: boolean;
+    /** Disabled */
+    disabled?: boolean;
+    /** Autofocus */
+    autofocus?: boolean;
+    /** Size, `m` by default */
+    size?: TSinchSize;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+    'on-cut'?: (e: TSinchInputClipboardEvent) => void;
+    'on-copy'?: (e: TSinchInputClipboardEvent) => void;
+    'on-paste'?: (e: TSinchInputClipboardEvent) => void;
+};

package/input/types.js

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

package/input/utils.d.ts

@@ -0,0 +1,26 @@
+import type { TSinchInputType } from './types';
+type TSInchInputMaskSymbolModeDigit = 0;
+type TSInchInputMaskSymbolModeLetter = 1;
+type TSInchInputMaskSymbolModeExact = 2;
+type TSinchInputMaskSymbol = {
+    value: string;
+    mode: TSInchInputMaskSymbolModeDigit | TSInchInputMaskSymbolModeLetter | TSInchInputMaskSymbolModeExact;
+    placeholder: string;
+};
+type TSinchMaskInputResult = {
+    value: string;
+    placeholder: string;
+    cursorPos: number;
+    mergedValue: string;
+};
+export declare const inputTypes: readonly TSinchInputType[];
+export declare const getMaskSymbols: (maskValue: string) => TSinchInputMaskSymbol[];
+export declare const deleteContentBackward: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => TSinchMaskInputResult | null;
+export declare const deleteContentForward: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => TSinchMaskInputResult | null;
+export declare const beginMaskedComposition: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number) => Pick<TSinchMaskInputResult, 'value' | 'placeholder'>;
+export declare const endMaskedComposition: (inputValue: string, data: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, wasValueInserted: boolean) => TSinchMaskInputResult | null;
+export declare const insertText: (inputValue: string, data: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => TSinchMaskInputResult | null;
+export declare const insertFromPaste: (inputValue: string, data: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => TSinchMaskInputResult | null;
+export declare const splitValueAndMask: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[]) => TSinchMaskInputResult;
+export declare const getMergedValueSliced: (inputValue: string, maskSymbols: readonly TSinchInputMaskSymbol[], selectionStart: number, selectionEnd: number) => string;
+export {};

package/input/utils.js

@@ -0,0 +1,302 @@
+export const inputTypes = ['text', 'password', 'number'];
+const MASK_SYMBOL_LETTER = 'A';
+const MASK_SYMBOL_DIGIT = '0';
+const EMPTY_CHAR = ' ';
+const MASK_MODE_DIGIT = 0;
+const MASK_MODE_LETTER = 1;
+const MASK_MODE_EXACT = 2;
+const MASK_PLACEHOLDER_DELIMITER = '@@';
+const MASK_PLACEHOLDER = '_';
+const testMaskedValue = (maskSymbol, inputChar) => {
+  switch (maskSymbol.mode) {
+    case MASK_MODE_DIGIT:
+      {
+        return /\d/.test(inputChar);
+      }
+    case MASK_MODE_LETTER:
+      {
+        return /\p{Letter}/u.test(inputChar);
+      }
+  }
+  return false;
+};
+const isExactMode = maskSymbol => maskSymbol.mode === MASK_MODE_EXACT;
+const isEmptyChar = char => char === EMPTY_CHAR;
+export const getMaskSymbols = maskValue => {
+  const res = [];
+  const [mask, placeholder] = maskValue.split(MASK_PLACEHOLDER_DELIMITER);
+  const maskSymbols = [...mask];
+  const placeholderChars = placeholder != null ? [...placeholder] : [];
+  for (let maskIndex = 0, placeholderIndex = 0; maskIndex < maskSymbols.length; maskIndex++, placeholderIndex++) {
+    if (maskSymbols[maskIndex] === '\\') {
+      maskIndex += 1;
+      res.push({
+        value: maskSymbols[maskIndex],
+        mode: MASK_MODE_EXACT,
+        placeholder: placeholderChars[placeholderIndex] ?? maskSymbols[maskIndex]
+      });
+      continue;
+    }
+    if (maskSymbols[maskIndex] === MASK_SYMBOL_LETTER || maskSymbols[maskIndex] === MASK_SYMBOL_DIGIT) {
+      res.push({
+        value: maskSymbols[maskIndex],
+        mode: maskSymbols[maskIndex] === MASK_SYMBOL_LETTER ? MASK_MODE_LETTER : MASK_MODE_DIGIT,
+        placeholder: placeholderChars[placeholderIndex] ?? MASK_PLACEHOLDER
+      });
+      continue;
+    }
+    res.push({
+      value: maskSymbols[maskIndex],
+      mode: MASK_MODE_EXACT,
+      placeholder: placeholderChars[placeholderIndex] ?? maskSymbols[maskIndex]
+    });
+  }
+  return res;
+};
+const clearCharsSelection = (chars, selectionStart, selectionEnd) => {
+  for (let i = selectionStart; i < selectionEnd && i < chars.length; i++) {
+    chars[i] = EMPTY_CHAR;
+  }
+};
+const getPlaceholder = (chars, maskSymbols) => {
+  const res = new Array(maskSymbols.length);
+  for (let i = 0; i < maskSymbols.length; i++) {
+    res[i] = i >= chars.length || isEmptyChar(chars[i]) || isExactMode(maskSymbols[i]) ? maskSymbols[i].placeholder : EMPTY_CHAR;
+  }
+  return res.join('');
+};
+const isMaskedInputComplete = (chars, maskSymbols) => {
+  if (chars.length > maskSymbols.length) {
+    throw new Error('chars.length > maskSymbols.length');
+  }
+  if (chars.length < maskSymbols.length) {
+    return false;
+  }
+  for (let i = 0; i < maskSymbols.length; i++) {
+    if (i >= chars.length || !isExactMode(maskSymbols[i]) && !testMaskedValue(maskSymbols[i], chars[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+const getCharsFromInputValue = (inputValue, maskSymbols) => {
+  const chars = new Array(maskSymbols.length);
+  let i = 0;
+  for (const c of inputValue) {
+    chars[i++] = c;
+  }
+  chars.fill(EMPTY_CHAR, i);
+  return chars;
+};
+const isCursorAtTheBeginning = (maskSymbols, selectoinStart) => {
+  if (selectoinStart >= maskSymbols.length) {
+    return false;
+  }
+  for (let i = 0; i < selectoinStart; i++) {
+    if (!isExactMode(maskSymbols[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+const getMergedValue = (chars, maskSymbols) => {
+  if (!isMaskedInputComplete(chars, maskSymbols)) {
+    return '';
+  }
+  const res = new Array(chars.length);
+  for (let i = 0; i < chars.length; i++) {
+    res[i] = isExactMode(maskSymbols[i]) ? maskSymbols[i].value : chars[i];
+  }
+  return res.join('');
+};
+const findLastNonEmptyCharIndex = chars => {
+  for (let i = chars.length - 1; i >= 0; i--) {
+    if (!isEmptyChar(chars[i])) {
+      return i;
+    }
+  }
+  return -1;
+};
+const compileResult = (chars, maskSymbols, cursorPos) => {
+  if (chars.length > maskSymbols.length) {
+    chars.length = maskSymbols.length;
+  }
+  let lastEmptyPos = findLastNonEmptyCharIndex(chars) + 1;
+  while (lastEmptyPos < maskSymbols.length && isExactMode(maskSymbols[lastEmptyPos])) {
+    ++lastEmptyPos;
+  }
+  if (lastEmptyPos < chars.length) {
+    chars.length = lastEmptyPos;
+  }
+  return {
+    value: chars.join(''),
+    placeholder: getPlaceholder(chars, maskSymbols),
+    cursorPos: Math.min(cursorPos, chars.length),
+    mergedValue: getMergedValue(chars, maskSymbols)
+  };
+};
+export const deleteContentBackward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+  if (selectionEnd === 0) {
+    return null;
+  }
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  if (selectionStart !== selectionEnd) {
+    clearCharsSelection(chars, selectionStart, selectionEnd);
+    return compileResult(chars, maskSymbols, selectionStart);
+  }
+  let cusrsorPos = selectionStart;
+  while (cusrsorPos > 0 && isExactMode(maskSymbols[cusrsorPos - 1])) {
+    --cusrsorPos;
+  }
+  if (cusrsorPos > 0) {
+    clearCharsSelection(chars, cusrsorPos - 1, cusrsorPos);
+    do {
+      --cusrsorPos;
+    } while (cusrsorPos > 0 && isExactMode(maskSymbols[cusrsorPos - 1]));
+  }
+  return compileResult(chars, maskSymbols, cusrsorPos);
+};
+export const deleteContentForward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+  if (selectionStart >= maskSymbols.length) {
+    return null;
+  }
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  if (selectionStart !== selectionEnd) {
+    clearCharsSelection(chars, selectionStart, selectionEnd);
+    return compileResult(chars, maskSymbols, selectionEnd);
+  }
+  let cursorPos = selectionStart;
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  if (cursorPos < chars.length) {
+    clearCharsSelection(chars, cursorPos, cursorPos + 1);
+  }
+  return compileResult(chars, maskSymbols, cursorPos + 1);
+};
+export const beginMaskedComposition = (inputValue, maskSymbols, selectionStart) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  const placeholder = new Array(chars.length);
+  for (let i = 0; i < maskSymbols.length; i++) {
+    placeholder[i] = isEmptyChar(chars[i]) || isExactMode(maskSymbols[i]) ? maskSymbols[i].placeholder : EMPTY_CHAR;
+  }
+  placeholder[selectionStart] = EMPTY_CHAR;
+  chars.splice(selectionStart, 1);
+  return {
+    value: chars.join(''),
+    placeholder: placeholder.join('')
+  };
+};
+export const endMaskedComposition = (inputValue, data, maskSymbols, selectionStart, wasValueInserted) => {
+  let cursorPos = selectionStart;
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  const dataChars = [...data];
+  if (!wasValueInserted) {
+    chars.splice(cursorPos, 0, ...dataChars);
+    chars.length = maskSymbols.length;
+    cursorPos += dataChars.length;
+  }
+  cursorPos -= dataChars.length;
+  clearCharsSelection(chars, cursorPos, cursorPos + dataChars.length);
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  if (cursorPos >= maskSymbols.length) {
+    return compileResult(chars, maskSymbols, cursorPos);
+  }
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length; ++dataPos, ++cursorPos) {
+    const data = dataChars[dataPos];
+    if (isEmptyChar(chars[cursorPos]) && testMaskedValue(maskSymbols[cursorPos], data)) {
+      chars[cursorPos] = data;
+    }
+  }
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  return compileResult(chars, maskSymbols, cursorPos);
+};
+export const insertText = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  let cursorPos = selectionStart;
+  clearCharsSelection(chars, selectionStart, selectionEnd);
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  if (cursorPos >= maskSymbols.length) {
+    return compileResult(chars, maskSymbols, cursorPos);
+  }
+  if (testMaskedValue(maskSymbols[cursorPos], data)) {
+    if (cursorPos >= chars.length) {
+      chars.length = cursorPos + 1;
+    }
+    chars[cursorPos] = data;
+    do {
+      cursorPos++;
+    } while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos]));
+  }
+  return compileResult(chars, maskSymbols, cursorPos);
+};
+export const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  let cursorPos = selectionStart;
+  clearCharsSelection(chars, selectionStart, selectionEnd);
+  if (isCursorAtTheBeginning(maskSymbols, cursorPos)) {
+    cursorPos = 0;
+  } else {
+    while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+      cursorPos++;
+    }
+  }
+  if (cursorPos >= maskSymbols.length) {
+    return compileResult(chars, maskSymbols, cursorPos);
+  }
+  const dataChars = [...data];
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
+    const data = dataChars[dataPos];
+    const maskSymbol = maskSymbols[cursorPos];
+    if (isExactMode(maskSymbol)) {
+      if (maskSymbol.value === data) {
+        ++dataPos;
+      }
+      ++cursorPos;
+    } else {
+      if (testMaskedValue(maskSymbol, data)) {
+        chars[cursorPos] = data;
+        ++cursorPos;
+      }
+      ++dataPos;
+    }
+  }
+  return compileResult(chars, maskSymbols, cursorPos);
+};
+export const splitValueAndMask = (inputValue, maskSymbols) => {
+  const chars = getCharsFromInputValue('', maskSymbols);
+  const dataChars = getCharsFromInputValue(inputValue, maskSymbols);
+  let cursorPos = 0;
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
+    const data = dataChars[dataPos];
+    const maskSymbol = maskSymbols[cursorPos];
+    if (isExactMode(maskSymbol)) {
+      if (maskSymbol.value === data) {
+        ++dataPos;
+      }
+      ++cursorPos;
+    } else {
+      if (testMaskedValue(maskSymbol, data)) {
+        chars[cursorPos] = data;
+        ++cursorPos;
+      }
+      ++dataPos;
+    }
+  }
+  return compileResult(chars, maskSymbols, chars.length);
+};
+export const getMergedValueSliced = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  for (let i = selectionStart; i < selectionEnd && i < maskSymbols.length; i++) {
+    if (isExactMode(maskSymbols[i])) {
+      chars[i] = maskSymbols[i].value;
+    }
+  }
+  return chars.slice(selectionStart, selectionEnd).join('');
+};

package/link/index.d.ts

@@ -0,0 +1,12 @@
+import '../icon';
+import type { TSinchLinkElement, TSinchLinkReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-link': TSinchLinkReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-link': TSinchLinkElement;
+    }
+}

package/link/index.js

@@ -0,0 +1,150 @@
+import '../icon';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix">&nbsp;</span><sinch-icon id="external-icon" name="open_in_new"></sinch-icon><sinch-icon id="standalone-icon" name="arrow_forward"></sinch-icon></a>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-link', class extends NectaryElement {
+  #$anchor;
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$anchor = shadowRoot.querySelector('a');
+    this.#$text = shadowRoot.querySelector('#content');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'link');
+    this.#$anchor.addEventListener('click', this.#onAnchorClick);
+    this.#$anchor.addEventListener('focus', this.#onAnchorFocus);
+    this.#$anchor.addEventListener('blur', this.#onAnchorBlur);
+    this.addEventListener('-click', this.#onClickReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
+  }
+  disconnectedCallback() {
+    this.#$anchor.removeEventListener('click', this.#onAnchorClick);
+    this.#$anchor.removeEventListener('focus', this.#onAnchorFocus);
+    this.#$anchor.removeEventListener('blur', this.#onAnchorBlur);
+    this.removeEventListener('-click', this.#onClickReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
+  }
+  static get observedAttributes() {
+    return ['text', 'href', 'use-history', 'external', 'standalone', 'disabled'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'href':
+        {
+          updateAttribute(this.#$anchor, 'href', newVal);
+          break;
+        }
+      case 'use-history':
+        {
+          const shouldUseHistory = isAttrTrue(newVal);
+          if (shouldUseHistory) {
+            updateBooleanAttribute(this, 'preventdefault', true);
+          }
+          updateBooleanAttribute(this, name, shouldUseHistory);
+          break;
+        }
+      case 'standalone':
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'external':
+        {
+          const isExternal = isAttrTrue(newVal);
+          updateAttribute(this.#$anchor, 'target', isExternal ? '_blank' : null);
+          updateBooleanAttribute(this, name, isExternal);
+          break;
+        }
+    }
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get href() {
+    return getAttribute(this, 'href', '');
+  }
+  set href(value) {
+    updateAttribute(this, 'href', value);
+  }
+  set 'use-history'(value) {
+    updateBooleanAttribute(this, 'use-history', value);
+  }
+  get 'use-history'() {
+    return getBooleanAttribute(this, 'use-history');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set external(isExternal) {
+    updateBooleanAttribute(this, 'external', isExternal);
+  }
+  get external() {
+    return getBooleanAttribute(this, 'external');
+  }
+  set standalone(isstandalone) {
+    updateBooleanAttribute(this, 'standalone', isstandalone);
+  }
+  get standalone() {
+    return getBooleanAttribute(this, 'standalone');
+  }
+  set preventDefault(isPrevented) {
+    updateBooleanAttribute(this, 'preventdefault', isPrevented);
+  }
+  get preventDefault() {
+    return getBooleanAttribute(this, 'preventdefault');
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$anchor.focus();
+  }
+  blur() {
+    this.#$anchor.blur();
+  }
+  #onAnchorClick = e => {
+    if (this.preventDefault) {
+      e.preventDefault();
+      if (this['use-history']) {
+        history.pushState({}, '', this.href);
+      }
+    }
+    this.dispatchEvent(new CustomEvent('-click'));
+  };
+  #onAnchorFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onAnchorBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+});

package/link/types.d.ts

@@ -0,0 +1,59 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchLinkElement = HTMLElement & {
+    /** Text content of hyperlink */
+    text: string;
+    /** URL that hyperlink point to */
+    href: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Replaces the anchor tag behaviour to use history instead */
+    'use-history': boolean;
+    /** Sets `target="_blank" and a special external icon on the left side */
+    external: boolean;
+    /** Special standalone (`display: block`) mode with an arrow icon on the right side */
+    standalone: boolean;
+    /** Prevents default behaviour on hyperlink click */
+    preventDefault: boolean;
+    /** Click event */
+    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Text content of hyperlink */
+    setAttribute(name: 'text', value: string): void;
+    /** URL that hyperlink point to */
+    setAttribute(name: 'href', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+    /** Sets `target="_blank" and a special external icon on the left side */
+    setAttribute(name: 'external', value: ''): void;
+    /** Special standalone (`display: block`) mode with an arrow icon on the right side */
+    setAttribute(name: 'standalone', value: ''): void;
+    /** Prevents default behaviour on hyperlink click */
+    setAttribute(name: 'preventdefault', value: ''): void;
+};
+export type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
+    /** Text content of hyperlink */
+    text: string;
+    /** URL that hyperlink point to */
+    href: string;
+    /** Replaces the anchor tag behaviour to use history instead */
+    'use-history'?: boolean;
+    /** Disabled */
+    disabled?: boolean;
+    /** Sets `target="_blank" and a special external icon on the left side */
+    external?: boolean;
+    /** Special standalone (`display: block`) mode with an arrow icon on the right side */
+    standalone?: boolean;
+    /** Prevents default behaviour on hyperlink click */
+    preventDefault?: boolean;
+    /** Label that is used for a11y – might be different from `text` */
+    'aria-label': string;
+    /** Click even handler */
+    'on-click'?: (e: CustomEvent<void>) => void;
+    /** Focus even handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur even handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/link/types.js

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

package/list/index.d.ts

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

package/list/index.js

@@ -0,0 +1,14 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:block;height:100%}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow-y:auto}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-list', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'list');
+  }
+});

package/list/types.d.ts

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

package/list/types.js

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