@nectary/components 4.11.1 → 4.12.0

package/segment/index.js

@@ -1,110 +0,0 @@
-import '../title';
-import { getTitleLevelFromType } from '../title/utils';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-import { DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:12px;width:100%;height:100%;border:1px solid var(--sinch-comp-segment-color-default-border-initial);border-radius:var(--sinch-comp-segment-shape-radius);box-sizing:border-box;background-color:var(--sinch-comp-segment-color-default-background-initial);padding:8px 0 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;padding:0 24px}#icon{--sinch-global-size-icon:32px}#caption{min-width:1em;--sinch-comp-title-font:var(--sinch-comp-segment-font-size-m-title)}:host([size="l"]) #caption{--sinch-comp-title-font:var(--sinch-comp-segment-font-size-l-title)}:host([size="s"]) #caption{--sinch-comp-title-font:var(--sinch-comp-segment-font-size-s-title)}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:0 24px}#action.empty{display:none}:host([collapsed]) :is(#content-wrapper,#action){display:none}:host([collapsed]) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" level="3" type="m" ellipsis></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
-import { getTitleTypeFromSize } from './utils';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-export class Segment extends NectaryElement {
-  #$caption;
-  #$previewSlot;
-  #$previewWrapper;
-  #$infoSlot;
-  #$infoWrapper;
-  #$collapseSlot;
-  #$collapseWrapper;
-  #$actionSlot;
-  #$actionWrapper;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$caption = shadowRoot.querySelector('#caption');
-    this.#$previewSlot = shadowRoot.querySelector('slot[name="preview"]');
-    this.#$infoSlot = shadowRoot.querySelector('slot[name="info"]');
-    this.#$collapseSlot = shadowRoot.querySelector('slot[name="collapse"]');
-    this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
-    this.#$previewWrapper = shadowRoot.querySelector('#preview');
-    this.#$infoWrapper = shadowRoot.querySelector('#info');
-    this.#$collapseWrapper = shadowRoot.querySelector('#collapse');
-    this.#$actionWrapper = shadowRoot.querySelector('#action');
-  }
-  connectedCallback() {
-    this.#$previewSlot.addEventListener('slotchange', this.#onPreviewSlotChange);
-    this.#$infoSlot.addEventListener('slotchange', this.#onInfoSlotChange);
-    this.#$collapseSlot.addEventListener('slotchange', this.#onCollapseSlotChange);
-    this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange);
-    this.#onPreviewSlotChange();
-    this.#onInfoSlotChange();
-    this.#onCollapseSlotChange();
-    this.#onActionSlotChange();
-  }
-  disconnectedCallback() {
-    this.#$previewSlot.removeEventListener('slotchange', this.#onPreviewSlotChange);
-    this.#$infoSlot.removeEventListener('slotchange', this.#onInfoSlotChange);
-    this.#$collapseSlot.removeEventListener('slotchange', this.#onCollapseSlotChange);
-    this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
-  }
-  static get observedAttributes() {
-    return ['caption', 'collapsed', 'size'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'caption':
-        {
-          updateAttribute(this.#$caption, 'text', newVal);
-          break;
-        }
-      case 'collapsed':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            return;
-          }
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
-          break;
-        }
-      case 'size':
-        {
-          const titleType = getTitleTypeFromSize(this.size);
-          updateAttribute(this.#$caption, 'level', getTitleLevelFromType(titleType));
-          break;
-        }
-    }
-  }
-  set caption(caption) {
-    updateAttribute(this, 'caption', caption);
-  }
-  get caption() {
-    return getAttribute(this, 'caption', '');
-  }
-  set collapsed(isChecked) {
-    updateBooleanAttribute(this, 'collapsed', isChecked);
-  }
-  get collapsed() {
-    return getBooleanAttribute(this, 'collapsed');
-  }
-  get size() {
-    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
-  }
-  set size(value) {
-    updateLiteralAttribute(this, sizeValues, 'size', value);
-  }
-  get collapseButtonRect() {
-    const $collapseButton = this.#$collapseSlot.assignedElements()[0];
-    return $collapseButton != null ? getRect($collapseButton) : null;
-  }
-  #onPreviewSlotChange = () => {
-    setClass(this.#$previewWrapper, 'empty', this.#$previewSlot.assignedElements().length === 0);
-  };
-  #onInfoSlotChange = () => {
-    setClass(this.#$infoWrapper, 'empty', this.#$infoSlot.assignedElements().length === 0);
-  };
-  #onCollapseSlotChange = () => {
-    setClass(this.#$collapseWrapper, 'empty', this.#$collapseSlot.assignedElements().length === 0);
-  };
-  #onActionSlotChange = () => {
-    setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
-  };
-}
-defineCustomElement('sinch-segment', Segment);

package/segment/types.d.ts

@@ -1,23 +0,0 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
-import type { TSinchSize } from '../utils/size';
-export type TSinchSegmentProps = {
-    caption: string;
-    collapsed?: boolean;
-    size?: TSinchSize;
-    readonly collapseButtonRect?: TRect | null;
-};
-export type TSinchSegmentStyle = {
-    '--sinch-comp-segment-shape-radius'?: string;
-    '--sinch-comp-segment-color-default-border-initial'?: string;
-    '--sinch-comp-segment-color-default-background-initial'?: string;
-    '--sinch-comp-segment-font-size-m-title'?: string;
-    '--sinch-comp-segment-font-size-l-title'?: string;
-    '--sinch-comp-segment-font-size-s-title'?: string;
-    '--sinch-global-size-icon'?: string;
-};
-export type TSinchSegment = {
-    props: TSinchSegmentProps;
-    style: TSinchSegmentStyle;
-};
-export type TSinchSegmentElement = NectaryComponentVanillaByType<TSinchSegment>;
-export type TSinchSegmentReact = NectaryComponentReactByType<TSinchSegment>;

package/segment/types.js

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

package/segment/utils.d.ts

@@ -1,3 +0,0 @@
-import type { TSinchTitleType } from '../title/types';
-import type { TSinchSize } from '../utils/size';
-export declare const getTitleTypeFromSize: (size: TSinchSize) => TSinchTitleType;

package/segment/utils.js

@@ -1,16 +0,0 @@
-export const getTitleTypeFromSize = size => {
-  switch (size) {
-    case 'l':
-      {
-        return 'l';
-      }
-    case 's':
-      {
-        return 's';
-      }
-    default:
-      {
-        return 'm';
-      }
-  }
-};

package/tile-control/index.d.ts

@@ -1,39 +0,0 @@
-import { NectaryElement } from '../utils';
-import type { TSinchTileControl } from './types';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
-export declare class TileControl extends NectaryElement {
-    #private;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
-    set value(value: string);
-    get value(): string;
-    set small(isSmall: boolean);
-    get small(): boolean;
-    set multiple(isMultiple: boolean);
-    get multiple(): boolean;
-    set cols(value: number);
-    get cols(): number;
-}
-declare global {
-    interface NectaryComponentMap {
-        'sinch-tile-control': TSinchTileControl;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-tile-control': NectaryComponentVanilla<'sinch-tile-control'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-tile-control': NectaryComponentReact<'sinch-tile-control'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-tile-control': NectaryComponentReact<'sinch-tile-control'>;
-        }
-    }
-}

package/tile-control/index.js

@@ -1,111 +0,0 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, isAttrTrue, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}:host([cols="9"]){--sinch-grid-num-columns:9}:host([cols="10"]){--sinch-grid-num-columns:10}</style><div id="wrapper"><slot></slot></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-export class TileControl extends NectaryElement {
-  #$slot;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$slot = shadowRoot.querySelector('slot');
-  }
-  connectedCallback() {
-    this.setAttribute('role', 'tablist');
-    this.#$slot.addEventListener('option-change', this.#onOptionChange);
-    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
-    this.addEventListener('-change', this.#onChangeReactHandler);
-  }
-  disconnectedCallback() {
-    this.#$slot.removeEventListener('option-change', this.#onOptionChange);
-    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
-  }
-  static get observedAttributes() {
-    return ['value', 'small', 'multiple'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (isAttrEqual(oldVal, newVal)) {
-      return;
-    }
-    switch (name) {
-      case 'value':
-        {
-          this.#onValueChange(newVal ?? '');
-          break;
-        }
-      case 'small':
-        {
-          this.#onSmallChange();
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
-          break;
-        }
-      case 'multiple':
-        {
-          this.#onValueChange(this.value);
-        }
-    }
-  }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  set small(isSmall) {
-    updateBooleanAttribute(this, 'small', isSmall);
-  }
-  get small() {
-    return getBooleanAttribute(this, 'small');
-  }
-  set multiple(isMultiple) {
-    updateBooleanAttribute(this, 'multiple', isMultiple);
-  }
-  get multiple() {
-    return getBooleanAttribute(this, 'multiple');
-  }
-  set cols(value) {
-    updateIntegerAttribute(this, 'cols', value);
-  }
-  get cols() {
-    return getIntegerAttribute(this, 'cols', 1);
-  }
-  #onSlotChange = () => {
-    this.#onValueChange(this.value);
-    this.#onSmallChange();
-  };
-  #onOptionChange = e => {
-    e.stopPropagation();
-    const $elem = e.target;
-    const value = e.detail;
-    const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail
-    }));
-  };
-  #onValueChange(csv) {
-    if (this.multiple) {
-      const values = unpackCsv(csv);
-      for (const $option of this.#$slot.assignedElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
-        updateBooleanAttribute($option, 'data-checked', isChecked);
-      }
-    } else {
-      const value = getFirstCsvValue(csv);
-      for (const $option of this.#$slot.assignedElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-        updateBooleanAttribute($option, 'data-checked', isChecked);
-      }
-    }
-  }
-  #onSmallChange() {
-    const isSmall = this.small;
-    for (const $opt of this.#$slot.assignedElements()) {
-      updateBooleanAttribute($opt, 'data-small', isSmall);
-    }
-  }
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
-  };
-}
-defineCustomElement('sinch-tile-control', TileControl);

package/tile-control/types.d.ts

@@ -1,29 +0,0 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
-/** Number of coumns from 1 to 10 */
-export type TSinchTileControlColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | number;
-export type TSinchTileControlProps = {
-    /** Value */
-    value: string;
-    /** Multiple */
-    multiple?: boolean;
-    /** Small */
-    small?: boolean;
-    /** Number of columns from 1 to 10 */
-    cols: TSinchTileControlColumns;
-    /** Label that is used for a11y */
-    'aria-label': string;
-};
-export type TSinchTileControlEvents = {
-    /** Change value handler */
-    '-change'?: (e: CustomEvent<string>) => void;
-};
-export type TSinchTileControlStyle = {
-    '--sinch-grid-num-columns'?: string;
-};
-export type TSinchTileControl = {
-    props: TSinchTileControlProps;
-    events: TSinchTileControlEvents;
-    style: TSinchTileControlStyle;
-};
-export type TSinchTileControlElement = NectaryComponentVanillaByType<TSinchTileControl>;
-export type TSinchTileControlReact = NectaryComponentReactByType<TSinchTileControl>;

package/tile-control/types.js

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

package/tile-control-option/index.d.ts

@@ -1,40 +0,0 @@
-import { NectaryElement } from '../utils';
-import type { TSinchTileControlOption } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
-export declare class TileControlOption extends NectaryElement {
-    #private;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
-    set value(value: string);
-    get value(): string;
-    set disabled(isDisabled: boolean);
-    get disabled(): boolean;
-    set text(value: string);
-    get text(): string;
-    get focusable(): boolean;
-    focus(): void;
-    blur(): void;
-}
-declare global {
-    interface NectaryComponentMap {
-        'sinch-tile-control-option': TSinchTileControlOption;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-tile-control-option': NectaryComponentVanilla<'sinch-tile-control-option'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-tile-control-option': NectaryComponentReact<'sinch-tile-control-option'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-tile-control-option': NectaryComponentReact<'sinch-tile-control-option'>;
-        }
-    }
-}

package/tile-control-option/index.js

@@ -1,99 +0,0 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:var(--sinch-local-size);height:var(--sinch-local-size);padding:16px 8px 8px;border-radius:var(--sinch-local-shape-radius);background-color:var(--sinch-local-color-background);box-shadow:var(--sinch-local-shadow);cursor:pointer;--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-initial);--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-l);--sinch-local-size:88px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-m-icon)}button::before{content:"";position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);pointer-events:none}button:focus-visible::after{position:absolute;content:"";inset:-4px;padding:2px;border:2px solid var(--sinch-comp-tile-control-color-default-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 4px);pointer-events:none}:host([data-small])>button{padding:12px 4px 4px;--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-s);--sinch-local-size:64px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-s-icon)}button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-hover);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-hover);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-hover)}:host([data-checked])>button:enabled,button:enabled:active{--sinch-local-color-background:var(--sinch-comp-tile-control-color-checked-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-checked-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-checked-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-checked-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-active)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px}button:disabled{cursor:initial;--sinch-local-color-background:var(--sinch-comp-tile-control-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-disabled-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-disabled)}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-comp-tile-control-font-label);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:var(--sinch-local-size-icon);height:var(--sinch-local-size-icon);align-self:center;--sinch-global-size-icon:var(--sinch-local-size-icon);--sinch-global-color-icon:var(--sinch-local-color-icon)}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-export class TileControlOption extends NectaryElement {
-  #$button;
-  #$text;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector('button');
-    this.#$text = shadowRoot.querySelector('#text');
-  }
-  connectedCallback() {
-    this.setAttribute('role', 'tab');
-    this.#$button.addEventListener('click', this.#onButtonClick);
-    this.#$button.addEventListener('focus', this.#onButtonFocus);
-    this.#$button.addEventListener('blur', this.#onButtonBlur);
-    this.addEventListener('-focus', this.#onFocusReactHandler);
-    this.addEventListener('-blur', this.#onBlurReactHandler);
-  }
-  disconnectedCallback() {
-    this.#$button.removeEventListener('click', this.#onButtonClick);
-    this.#$button.removeEventListener('focus', this.#onButtonFocus);
-    this.#$button.removeEventListener('blur', this.#onButtonBlur);
-    this.removeEventListener('-focus', this.#onFocusReactHandler);
-    this.removeEventListener('-blur', this.#onBlurReactHandler);
-  }
-  static get observedAttributes() {
-    return ['data-checked', 'text', 'disabled'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'data-checked':
-        {
-          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
-          break;
-        }
-      case 'disabled':
-        {
-          this.#$button.disabled = isAttrTrue(newVal);
-          break;
-        }
-    }
-  }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  get focusable() {
-    return true;
-  }
-  focus() {
-    this.#$button.focus();
-  }
-  blur() {
-    this.#$button.blur();
-  }
-  #onButtonClick = e => {
-    e.stopPropagation();
-    this.dispatchEvent(new CustomEvent('option-change', {
-      detail: this.value,
-      bubbles: true
-    }));
-  };
-  #onButtonFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
-  };
-  #onButtonBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
-  };
-  #onFocusReactHandler = () => {
-    getReactEventHandler(this, 'on-focus')?.();
-  };
-  #onBlurReactHandler = () => {
-    getReactEventHandler(this, 'on-blur')?.();
-  };
-}
-defineCustomElement('sinch-tile-control-option', TileControlOption);

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

@@ -1,52 +0,0 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
-export type TSinchTileControlOptionProps = {
-    /** Value */
-    value: string;
-    /** Text content */
-    text: string;
-    /** Label that is used for a11y */
-    'aria-label': string;
-    /** Disabled */
-    disabled?: boolean;
-};
-export type TSinchTileControlOptionEvents = {
-    /** Focus handler */
-    '-focus'?: (e: CustomEvent<void>) => void;
-    /** Blur handler */
-    '-blur'?: (e: CustomEvent<void>) => void;
-};
-export type TSinchTileControlOptionStyle = {
-    '--sinch-comp-tile-control-shape-radius-l'?: string;
-    '--sinch-comp-tile-control-shape-radius-s'?: string;
-    '--sinch-comp-tile-control-font-label'?: string;
-    '--sinch-comp-tile-control-size-m-icon'?: string;
-    '--sinch-comp-tile-control-size-s-icon'?: string;
-    '--sinch-comp-tile-control-color-default-background-initial'?: string;
-    '--sinch-comp-tile-control-color-default-border-initial'?: string;
-    '--sinch-comp-tile-control-color-default-text-initial'?: string;
-    '--sinch-comp-tile-control-color-default-icon-initial'?: string;
-    '--sinch-comp-tile-control-color-default-background-hover'?: string;
-    '--sinch-comp-tile-control-color-default-border-hover'?: string;
-    '--sinch-comp-tile-control-color-default-outline-focus'?: string;
-    '--sinch-comp-tile-control-color-checked-background-initial'?: string;
-    '--sinch-comp-tile-control-color-checked-border-initial'?: string;
-    '--sinch-comp-tile-control-color-checked-text-initial'?: string;
-    '--sinch-comp-tile-control-color-checked-icon-initial'?: string;
-    '--sinch-comp-tile-control-color-disabled-background-initial'?: string;
-    '--sinch-comp-tile-control-color-disabled-border-initial'?: string;
-    '--sinch-comp-tile-control-color-disabled-text-initial'?: string;
-    '--sinch-comp-tile-control-color-disabled-icon-initial'?: string;
-    '--sinch-comp-tile-control-shadow-initial'?: string;
-    '--sinch-comp-tile-control-shadow-hover'?: string;
-    '--sinch-comp-tile-control-shadow-active'?: string;
-    '--sinch-comp-tile-control-shadow-disabled'?: string;
-    '--sinch-global-size-icon'?: string;
-    '--sinch-global-color-icon'?: string;
-};
-export type TSinchTileControlOption = {
-    props: TSinchTileControlOptionProps;
-    events: TSinchTileControlOptionEvents;
-    style: TSinchTileControlOptionStyle;
-};
-export type TSinchTileControlOptionElement = NectaryComponentVanillaByType<TSinchTileControlOption>;
-export type TSinchTileControlOptionReact = NectaryComponentReactByType<TSinchTileControlOption>;

package/tile-control-option/types.js

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

package/vertical-stepper/index.d.ts

@@ -1,33 +0,0 @@
-import { NectaryElement } from '../utils';
-import type { TSinchVerticalStepper } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
-export declare class VerticalStepper extends NectaryElement {
-    #private;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(name: string): void;
-    set index(value: string);
-    get index(): string;
-}
-declare global {
-    interface NectaryComponentMap {
-        'sinch-vertical-stepper': TSinchVerticalStepper;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-vertical-stepper': NectaryComponentVanilla<'sinch-vertical-stepper'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-vertical-stepper': NectaryComponentReact<'sinch-vertical-stepper'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-vertical-stepper': NectaryComponentReact<'sinch-vertical-stepper'>;
-        }
-    }
-}

package/vertical-stepper/index.js

@@ -1,58 +0,0 @@
-import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0;--sinch-comp-vertical-stepper-color-background-default:var(--sinch-sys-color-surface-tertiary-default);--sinch-comp-vertical-stepper-color-background-visited-skip:var(--sinch-sys-color-surface-tertiary-default);--sinch-comp-vertical-stepper-color-background-active:var(--sinch-ref-color-neutral-700);--sinch-comp-vertical-stepper-color-background-visited:var(--sinch-ref-color-neutral-350);--sinch-comp-vertical-stepper-color-background-visited-error:var(--sinch-sys-color-feedback-danger-strong);--sinch-comp-vertical-stepper-color-border-default:transparent;--sinch-comp-vertical-stepper-color-border-visited-skip:var(--sinch-ref-color-neutral-700);--sinch-comp-vertical-stepper-color-border-active:transparent;--sinch-comp-vertical-stepper-color-border-visited:var(--sinch-ref-color-neutral-700);--sinch-comp-vertical-stepper-color-border-visited-error:var(--sinch-ref-color-neutral-700);--sinch-comp-vertical-stepper-color-icon-default:var(--sinch-ref-color-neutral-900);--sinch-comp-vertical-stepper-color-icon-visited-skip:var(--sinch-ref-color-neutral-900);--sinch-comp-vertical-stepper-color-icon-active:var(--sinch-sys-color-basic-pure);--sinch-comp-vertical-stepper-color-icon-visited:var(--sinch-ref-color-neutral-900);--sinch-comp-vertical-stepper-color-icon-visited-error:var(--sinch-ref-color-neutral-900);--sinch-comp-vertical-stepper-color-label:var(--sinch-sys-color-text-default);--sinch-comp-vertical-stepper-color-description:var(--sinch-sys-color-text-muted);--sinch-comp-vertical-stepper-color-progress:var(--sinch-ref-color-neutral-350);--sinch-comp-vertical-stepper-color-progress-visited:var(--sinch-ref-color-neutral-700)}#wrapper{position:relative;display:flex;flex-direction:column;width:100%}</style><div id="wrapper"><slot></slot></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-export class VerticalStepper extends NectaryElement {
-  #$itemsSlot;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$itemsSlot = shadowRoot.querySelector('slot');
-  }
-  connectedCallback() {
-    this.setAttribute('role', 'progressbar');
-    this.setAttribute('aria-valuemin', '0');
-    this.#$itemsSlot.addEventListener('slotchange', this.#updateItems);
-  }
-  disconnectedCallback() {
-    this.#$itemsSlot.removeEventListener('slotchange', this.#updateItems);
-  }
-  static get observedAttributes() {
-    return ['index'];
-  }
-  attributeChangedCallback(name) {
-    switch (name) {
-      case 'index':
-        {
-          this.#updateItems();
-          break;
-        }
-    }
-  }
-  set index(value) {
-    updateAttribute(this, 'index', value);
-  }
-  get index() {
-    return getAttribute(this, 'index', '1');
-  }
-  #updateItems = () => {
-    const $items = this.#$itemsSlot.assignedElements();
-    const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
-    for (let i = 0; i < $items.length; i++) {
-      const $el = $items[i];
-      const itemIndex = i + 1;
-      $el.setAttribute('data-index', String(itemIndex));
-      if (itemIndex === activeIndex) {
-        $el.setAttribute('data-progress', 'active');
-      } else if (itemIndex < activeIndex) {
-        $el.setAttribute('data-progress', 'done');
-      } else {
-        $el.removeAttribute('data-progress');
-      }
-    }
-    this.setAttribute('aria-valuemax', String($items.length));
-    this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
-  };
-}
-defineCustomElement('sinch-vertical-stepper', VerticalStepper);