@nectary/components 4.12.0 → 4.12.1

package/standalone.d.ts

@@ -11,6 +11,7 @@ import './button/index.js';
 import './card-container/index.js';
 import './card-v2-title/index.js';
 import './card-v2/index.js';
+import './card/index.js';
 import './checkbox/index.js';
 import './chip/index.js';
 import './code-tag/index.js';
@@ -29,6 +30,8 @@ import './flag/index.js';
 import './grid-item/index.js';
 import './grid/index.js';
 import './help-tooltip/index.js';
+import './horizontal-stepper-item/index.js';
+import './horizontal-stepper/index.js';
 import './icon/index.js';
 import './inline-alert/index.js';
 import './input/index.js';
@@ -47,6 +50,7 @@ import './radio/index.js';
 import './rich-text/index.js';
 import './rich-textarea/index.js';
 import './segment-collapse/index.js';
+import './segment/index.js';
 import './segmented-control-option/index.js';
 import './segmented-control/index.js';
 import './segmented-icon-control-option/index.js';
@@ -70,9 +74,13 @@ import './tabs/index.js';
 import './tag/index.js';
 import './text/index.js';
 import './textarea/index.js';
+import './tile-control-option/index.js';
+import './tile-control/index.js';
 import './time-picker/index.js';
 import './title/index.js';
 import './toast-manager/index.js';
 import './toast/index.js';
 import './toggle/index.js';
 import './tooltip/index.js';
+import './vertical-stepper-item/index.js';
+import './vertical-stepper/index.js';

package/standalone.js

@@ -1,80 +1,88 @@
-import { setNectaryRegistry } from "./utils/element.js";
-import "./accordion-item/index.js";
-import "./accordion/index.js";
-import "./action-menu-option/index.js";
-import "./action-menu/index.js";
-import "./alert/index.js";
-import "./avatar/index.js";
-import "./badge/index.js";
-import "./button-group-item/index.js";
-import "./button-group/index.js";
-import "./button/index.js";
-import "./card-container/index.js";
-import "./card-v2-title/index.js";
-import "./card-v2/index.js";
-import "./checkbox/index.js";
-import "./chip/index.js";
-import "./code-tag/index.js";
-import "./color-menu-option/index.js";
-import "./color-menu/index.js";
-import "./color-swatch/index.js";
-import "./date-picker/index.js";
-import "./dialog/index.js";
-import "./emoji-picker/index.js";
-import "./emoji/index.js";
-import "./field/index.js";
-import "./file-drop/index.js";
-import "./file-picker/index.js";
-import "./file-status/index.js";
-import "./flag/index.js";
-import "./grid-item/index.js";
-import "./grid/index.js";
-import "./help-tooltip/index.js";
-import "./icon/index.js";
-import "./inline-alert/index.js";
-import "./input/index.js";
-import "./link/index.js";
-import "./list-item/index.js";
-import "./list/index.js";
-import "./pagination/index.js";
-import "./persistent-overlay/index.js";
-import "./pop/index.js";
-import "./popover/index.js";
-import "./progress-stepper-item/index.js";
-import "./progress-stepper/index.js";
-import "./progress/index.js";
-import "./radio-option/index.js";
-import "./radio/index.js";
-import "./rich-text/index.js";
-import "./rich-textarea/index.js";
-import "./segment-collapse/index.js";
-import "./segmented-control-option/index.js";
-import "./segmented-control/index.js";
-import "./segmented-icon-control-option/index.js";
-import "./segmented-icon-control/index.js";
-import "./select-button/index.js";
-import "./select-menu-option/index.js";
-import "./select-menu/index.js";
-import "./skeleton-item/index.js";
-import "./skeleton/index.js";
-import "./spinner/index.js";
-import "./stop-events/index.js";
-import "./table-body/index.js";
-import "./table-cell/index.js";
-import "./table-head-cell/index.js";
-import "./table-head/index.js";
-import "./table-row/index.js";
-import "./table/index.js";
-import "./tabs-icon-option/index.js";
-import "./tabs-option/index.js";
-import "./tabs/index.js";
-import "./tag/index.js";
-import "./text/index.js";
-import "./textarea/index.js";
-import "./time-picker/index.js";
-import "./title/index.js";
-import "./toast-manager/index.js";
-import "./toast/index.js";
-import "./toggle/index.js";
-import "./tooltip/index.js";
+import { setNectaryRegistry } from './utils';
 setNectaryRegistry(window.customElements);
+import './accordion-item/index.js';
+import './accordion/index.js';
+import './action-menu-option/index.js';
+import './action-menu/index.js';
+import './alert/index.js';
+import './avatar/index.js';
+import './badge/index.js';
+import './button-group-item/index.js';
+import './button-group/index.js';
+import './button/index.js';
+import './card-container/index.js';
+import './card-v2-title/index.js';
+import './card-v2/index.js';
+import './card/index.js';
+import './checkbox/index.js';
+import './chip/index.js';
+import './code-tag/index.js';
+import './color-menu-option/index.js';
+import './color-menu/index.js';
+import './color-swatch/index.js';
+import './date-picker/index.js';
+import './dialog/index.js';
+import './emoji-picker/index.js';
+import './emoji/index.js';
+import './field/index.js';
+import './file-drop/index.js';
+import './file-picker/index.js';
+import './file-status/index.js';
+import './flag/index.js';
+import './grid-item/index.js';
+import './grid/index.js';
+import './help-tooltip/index.js';
+import './horizontal-stepper-item/index.js';
+import './horizontal-stepper/index.js';
+import './icon/index.js';
+import './inline-alert/index.js';
+import './input/index.js';
+import './link/index.js';
+import './list-item/index.js';
+import './list/index.js';
+import './pagination/index.js';
+import './persistent-overlay/index.js';
+import './pop/index.js';
+import './popover/index.js';
+import './progress-stepper-item/index.js';
+import './progress-stepper/index.js';
+import './progress/index.js';
+import './radio-option/index.js';
+import './radio/index.js';
+import './rich-text/index.js';
+import './rich-textarea/index.js';
+import './segment-collapse/index.js';
+import './segment/index.js';
+import './segmented-control-option/index.js';
+import './segmented-control/index.js';
+import './segmented-icon-control-option/index.js';
+import './segmented-icon-control/index.js';
+import './select-button/index.js';
+import './select-menu-option/index.js';
+import './select-menu/index.js';
+import './skeleton-item/index.js';
+import './skeleton/index.js';
+import './spinner/index.js';
+import './stop-events/index.js';
+import './table-body/index.js';
+import './table-cell/index.js';
+import './table-head-cell/index.js';
+import './table-head/index.js';
+import './table-row/index.js';
+import './table/index.js';
+import './tabs-icon-option/index.js';
+import './tabs-option/index.js';
+import './tabs/index.js';
+import './tag/index.js';
+import './text/index.js';
+import './textarea/index.js';
+import './tile-control-option/index.js';
+import './tile-control/index.js';
+import './time-picker/index.js';
+import './title/index.js';
+import './toast-manager/index.js';
+import './toast/index.js';
+import './toggle/index.js';
+import './tooltip/index.js';
+import './vertical-stepper-item/index.js';
+import './vertical-stepper/index.js';

package/standalone.ts

@@ -19,6 +19,7 @@ import './button/index.js'
 import './card-container/index.js'
 import './card-v2-title/index.js'
 import './card-v2/index.js'
+import './card/index.js'
 import './checkbox/index.js'
 import './chip/index.js'
 import './code-tag/index.js'
@@ -37,6 +38,8 @@ import './flag/index.js'
 import './grid-item/index.js'
 import './grid/index.js'
 import './help-tooltip/index.js'
+import './horizontal-stepper-item/index.js'
+import './horizontal-stepper/index.js'
 import './icon/index.js'
 import './inline-alert/index.js'
 import './input/index.js'
@@ -55,6 +58,7 @@ import './radio/index.js'
 import './rich-text/index.js'
 import './rich-textarea/index.js'
 import './segment-collapse/index.js'
+import './segment/index.js'
 import './segmented-control-option/index.js'
 import './segmented-control/index.js'
 import './segmented-icon-control-option/index.js'
@@ -78,9 +82,13 @@ import './tabs/index.js'
 import './tag/index.js'
 import './text/index.js'
 import './textarea/index.js'
+import './tile-control-option/index.js'
+import './tile-control/index.js'
 import './time-picker/index.js'
 import './title/index.js'
 import './toast-manager/index.js'
 import './toast/index.js'
 import './toggle/index.js'
 import './tooltip/index.js'
+import './vertical-stepper-item/index.js'
+import './vertical-stepper/index.js'

package/stop-events/index.js

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

package/table/index.d.ts

@@ -1,6 +1,26 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Table extends NectaryElement {
     constructor();
     connectedCallback(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-table': {};
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table': NectaryComponentVanilla<'sinch-table'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table': NectaryComponentReact<'sinch-table'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-table': NectaryComponentReact<'sinch-table'>;
+        }
+    }
+}

package/table/index.js

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

package/table/types.d.ts

@@ -1,23 +1,3 @@
-import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchTableElement = HTMLElement;
 export type TSinchTableReact = NectaryComponentReactByType<TSinchTableElement>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-table': {};
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-table': NectaryComponentVanilla<'sinch-table'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-table': NectaryComponentReact<'sinch-table'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-table': NectaryComponentReact<'sinch-table'>;
-        }
-    }
-}

package/table/types.js

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

package/table-body/index.d.ts

@@ -1,6 +1,26 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 export declare class TableBody extends NectaryElement {
     constructor();
     connectedCallback(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-table-body': {};
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-body': NectaryComponentVanilla<'sinch-table-body'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
+        }
+    }
+}

package/table-body/index.js

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

package/table-body/types.d.ts

@@ -1,23 +1,3 @@
-import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchTableBodyElement = HTMLElement;
 export type TSinchTableBodyReact = NectaryComponentReactByType<TSinchTableBodyElement>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-table-body': {};
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-table-body': NectaryComponentVanilla<'sinch-table-body'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
-        }
-    }
-}

package/table-body/types.js

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

package/table-cell/index.d.ts

@@ -1,9 +1,29 @@
 import { NectaryElement } from '../utils';
-import type { TSinchTableAlignType } from './types';
-export * from './types';
+import type { TSinchTableAlignType, TSinchTableCell } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class TableCell extends NectaryElement {
     constructor();
     connectedCallback(): void;
     set align(value: TSinchTableAlignType);
     get align(): TSinchTableAlignType;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-table-cell': TSinchTableCell;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-cell': NectaryComponentVanilla<'sinch-table-cell'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
+        }
+    }
+}

package/table-cell/index.js

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

package/table-cell/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchTableAlignType = 'start' | 'center' | 'end';
 export type TSinchTableCellProps = {
     align?: TSinchTableAlignType;
@@ -12,23 +12,3 @@ export type TSinchTableCell = {
 };
 export type TSinchTableCellElement = NectaryComponentVanillaByType<TSinchTableCell>;
 export type TSinchTableCellReact = NectaryComponentReactByType<TSinchTableCell>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-table-cell': TSinchTableCell;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-table-cell': NectaryComponentVanilla<'sinch-table-cell'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
-        }
-    }
-}

package/table-cell/types.js

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

package/table-cell/utils.js

@@ -1,4 +1 @@
-const alignValues = ["start", "center", "end"];
-export {
-  alignValues
-};
+export const alignValues = ['start', 'center', 'end'];

package/table-head/index.d.ts

@@ -1,6 +1,26 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class TableHead extends NectaryElement {
     constructor();
     connectedCallback(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-table-head': {};
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-head': NectaryComponentVanilla<'sinch-table-head'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head': NectaryComponentReact<'sinch-table-head'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-table-head': NectaryComponentReact<'sinch-table-head'>;
+        }
+    }
+}

package/table-head/index.js

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

package/table-head/types.d.ts

@@ -1,23 +1,3 @@
-import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchTableHeadElement = HTMLElement;
 export type TSinchTableHeadReact = NectaryComponentReactByType<TSinchTableHeadElement>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-table-head': {};
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-table-head': NectaryComponentVanilla<'sinch-table-head'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-table-head': NectaryComponentReact<'sinch-table-head'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-table-head': NectaryComponentReact<'sinch-table-head'>;
-        }
-    }
-}

package/table-head/types.js

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