@nectary/components 4.12.0 → 4.12.1

package/horizontal-stepper-item/index.js

@@ -0,0 +1,62 @@
+import '../icon';
+import '../title';
+import '../text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:144px;min-height:64px;display:flex;flex-direction:column}#circle{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;background-color:var(--sinch-local-color-background);font:var(--sinch-sys-font-desktop-title-s);line-height:32px;text-align:center;color:var(--sinch-local-color-text);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-default);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-default);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-default);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-default);--sinch-global-size-icon:20px}:host([data-progress=active]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-active);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-active);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-active);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-active)}:host([data-progress=done]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited)}:host([data-progress=done][status=error]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited-error);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited-error);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited-error);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited-error)}:host([data-progress=done][status=skip]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited-skip);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited-skip);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited-skip);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited-skip)}#icon-error,#icon-success{display:none}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}#label{text-align:center;margin-top:8px;--sinch-global-color-text:var(--sinch-comp-horizontal-stepper-color-label)}#description{text-align:center;--sinch-global-color-text:var(--sinch-comp-horizontal-stepper-color-description)}</style><div id="wrapper"><div id="circle" aria-hidden="true"><sinch-icon icons-version="2" name="fa-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="fa-exclamation" id="icon-error"></sinch-icon><span id="circle-text"></span></div><sinch-title id="label" type="s" ellipsis></sinch-title><sinch-text id="description" type="xs" ellipsis></sinch-text></div>';
+import { statusValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+export class HorizontalStepperItem extends NectaryElement {
+  #$label;
+  #$description;
+  #$circleText;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$label = shadowRoot.querySelector('#label');
+    this.#$description = shadowRoot.querySelector('#description');
+    this.#$circleText = shadowRoot.querySelector('#circle-text');
+  }
+  static get observedAttributes() {
+    return ['label', 'description', 'data-index'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'label':
+        {
+          updateAttribute(this.#$label, 'text', newVal);
+          break;
+        }
+      case 'description':
+        {
+          this.#$description.textContent = newVal;
+          break;
+        }
+      case 'data-index':
+        {
+          this.#$circleText.textContent = newVal;
+          break;
+        }
+    }
+  }
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+  set description(value) {
+    updateAttribute(this, 'description', value);
+  }
+  get description() {
+    return getAttribute(this, 'description', '');
+  }
+  get status() {
+    return getLiteralAttribute(this, statusValues, 'status', null);
+  }
+  set status(value) {
+    updateLiteralAttribute(this, statusValues, 'status', value);
+  }
+}
+defineCustomElement('sinch-horizontal-stepper-item', HorizontalStepperItem);

package/horizontal-stepper-item/types.d.ts

@@ -0,0 +1,38 @@
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchHorizontalStepperStatusType = 'error' | 'skip';
+export type TSinchHorizontalStepperItemProps = {
+    /** Label */
+    label: string;
+    /** Description */
+    description?: string;
+    /** Status */
+    status?: TSinchHorizontalStepperStatusType;
+};
+export type TSinchHorizontalStepperItemStyle = {
+    '--sinch-comp-horizontal-stepper-color-background-default'?: string;
+    '--sinch-comp-horizontal-stepper-color-background-active'?: string;
+    '--sinch-comp-horizontal-stepper-color-background-visited'?: string;
+    '--sinch-comp-horizontal-stepper-color-background-visited-error'?: string;
+    '--sinch-comp-horizontal-stepper-color-background-visited-skip'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-default'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-active'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-visited'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-visited-error'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-visited-skip'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-default'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-active'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-visited'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-visited-error'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-visited-skip'?: string;
+    '--sinch-comp-horizontal-stepper-color-label'?: string;
+    '--sinch-comp-horizontal-stepper-color-description'?: string;
+    '--sinch-sys-font-desktop-title-s'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-text'?: string;
+};
+export type TSinchHorizontalStepperItem = {
+    props: TSinchHorizontalStepperItemProps;
+    style: TSinchHorizontalStepperItemStyle;
+};
+export type TSinchHorizontalStepperItemElement = NectaryComponentVanillaByType<TSinchHorizontalStepperItem>;
+export type TSinchHorizontalStepperItemReact = NectaryComponentReactByType<TSinchHorizontalStepperItem>;

package/horizontal-stepper-item/types.js

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

package/horizontal-stepper-item/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchHorizontalStepperStatusType } from './types';
+export declare const statusValues: TSinchHorizontalStepperStatusType[];

package/horizontal-stepper-item/utils.js

@@ -0,0 +1 @@
+export const statusValues = ['skip', 'error'];

package/icon/generated-icon-type.js

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

package/icon/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchIcon } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Icon extends NectaryElement {
     #private;
     constructor();
@@ -11,3 +12,23 @@ export declare class Icon extends NectaryElement {
     get iconsVersion(): '1' | '2';
     _matchNameToFont(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-icon': TSinchIcon;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon': NectaryComponentVanilla<'sinch-icon'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon': NectaryComponentReact<'sinch-icon'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-icon': NectaryComponentReact<'sinch-icon'>;
+        }
+    }
+}

package/icon/index.js

@@ -1,62 +1,60 @@
-import { getAttribute, updateAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: inline-block;\n}\n\n#icon {\n  display: block;\n  font-weight: var(--sinch-comp-icon-font-weight);\n  font-size: var(--sinch-global-size-icon, 24px);\n  -webkit-font-smoothing: antialiased;\n  line-height: 1;\n  white-space: nowrap;\n  width: var(--sinch-global-size-icon, 24px);\n  height: var(--sinch-global-size-icon, 24px);\n  color: var(--sinch-global-color-icon, var(--sinch-sys-color-text-default));\n  user-select: none;\n  font-family: var(--sinch-comp-icon-font-family);\n  font-feature-settings: var(--sinch-comp-icon-font-feature-settings);\n}\n\n#icon.zero-to-d {\n  font-family: var(--sinch-comp-icon-font-family-zero-to-d);\n}\n\n#icon.e-to-o {\n  font-family: var(--sinch-comp-icon-font-family-e-to-o);\n}\n\n#icon.p-to-z {\n  font-family: var(--sinch-comp-icon-font-family-p-to-z);\n}\n</style>\n\n<span id="icon" role="img"></span>\n';
-const template = document.createElement("template");
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));user-select:none;font-family:var(--sinch-comp-icon-font-family);font-feature-settings:var(--sinch-comp-icon-font-feature-settings)}#icon.zero-to-d{font-family:var(--sinch-comp-icon-font-family-zero-to-d)}#icon.e-to-o{font-family:var(--sinch-comp-icon-font-family-e-to-o)}#icon.p-to-z{font-family:var(--sinch-comp-icon-font-family-p-to-z)}</style><span id="icon" role="img"></span>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Icon extends NectaryElement {
+export class Icon extends NectaryElement {
   #$icon;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$icon = shadowRoot.querySelector("#icon");
+    this.#$icon = shadowRoot.querySelector('#icon');
   }
   static get observedAttributes() {
-    return ["name", "icons-version"];
+    return ['name', 'icons-version'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case "name": {
-        this.#$icon.textContent = newVal;
-        updateAttribute(this.#$icon, "aria-label", newVal);
-        if (getAttribute(this, "icons-version", "1") !== "1") {
-          this._matchNameToFont();
+      case 'name':
+        {
+          this.#$icon.textContent = newVal;
+          updateAttribute(this.#$icon, 'aria-label', newVal);
+          if (getAttribute(this, 'icons-version', '1') !== '1') {
+            this._matchNameToFont();
+          }
+          break;
         }
-        break;
-      }
-      case "icons-version": {
-        if (getAttribute(this, "icons-version") !== "1") {
-          this._matchNameToFont();
+      case 'icons-version':
+        {
+          if (getAttribute(this, 'icons-version') !== '1') {
+            this._matchNameToFont();
+          }
+          break;
         }
-        break;
-      }
     }
   }
   set name(value) {
-    updateAttribute(this, "name", value);
+    updateAttribute(this, 'name', value);
   }
   get name() {
-    return getAttribute(this, "name", "");
+    return getAttribute(this, 'name', '');
   }
   set iconsVersion(value) {
-    updateAttribute(this, "icons-version", value);
+    updateAttribute(this, 'icons-version', value);
   }
   get iconsVersion() {
-    return getAttribute(this, "icons-version", "1");
+    return getAttribute(this, 'icons-version', '1');
   }
   _matchNameToFont() {
     if (/^(fa-|(?!fa-))[0-9a-d]/.test(this.name)) {
-      return updateAttribute(this.#$icon, "class", "zero-to-d");
+      return updateAttribute(this.#$icon, 'class', 'zero-to-d');
     }
     if (/^(fa-|(?!fa-))[e-o]/.test(this.name)) {
-      return updateAttribute(this.#$icon, "class", "e-to-o");
+      return updateAttribute(this.#$icon, 'class', 'e-to-o');
     }
     if (/^(fa-|(?!fa-))[p-z]/.test(this.name)) {
-      return updateAttribute(this.#$icon, "class", "p-to-z");
+      return updateAttribute(this.#$icon, 'class', 'p-to-z');
     }
   }
 }
-defineCustomElement("sinch-icon", Icon);
-export {
-  Icon
-};
+defineCustomElement('sinch-icon', Icon);

package/icon/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchIcons } from './generated-icon-type';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export { TSinchIcons };
 export type TSinchIconProps = ({
     /** Icon font version */
@@ -29,23 +29,3 @@ export type TSinchIcon = {
 };
 export type TSinchIconElement = NectaryComponentVanillaByType<TSinchIcon>;
 export type TSinchIconReact = NectaryComponentReactByType<TSinchIcon>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-icon': TSinchIcon;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-icon': NectaryComponentVanilla<'sinch-icon'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-icon': NectaryComponentReact<'sinch-icon'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-icon': NectaryComponentReact<'sinch-icon'>;
-        }
-    }
-}

package/icon/types.js

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

package/inline-alert/index.d.ts

@@ -3,8 +3,8 @@ import '../rich-text';
 import '../text';
 import '../title';
 import { NectaryElement } from '../utils';
-import type { TSinchInlineAlertType } from './types';
-export * from './types';
+import type { TSinchInlineAlertType, TSinchInlineAlert } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class InlineAlert extends NectaryElement {
     #private;
     constructor();
@@ -19,3 +19,23 @@ export declare class InlineAlert extends NectaryElement {
     get caption(): string;
     set caption(value: string);
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-inline-alert': TSinchInlineAlert;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-inline-alert': NectaryComponentVanilla<'sinch-inline-alert'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
+        }
+    }
+}

package/inline-alert/index.js

@@ -1,14 +1,13 @@
-import "../icon/index.js";
-import "../rich-text/index.js";
-import "../text/index.js";
-import "../title/index.js";
-import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute, setClass } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { typeValues } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 16px;\n    border-radius: var(--sinch-comp-inline-alert-shape-radius);\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-success-default-background\n      );\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-background\n      );\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-error-default-background\n      );\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-info-default-background\n      );\n  }\n\n  #icon-success,\n  #icon-warn,\n  #icon-error,\n  #icon-info {\n    display: none;\n  }\n\n  #icon-success {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-success-default-icon\n      );\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-error-default-icon\n      );\n  }\n\n  #icon-info {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-info-default-icon\n      );\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n\n  #body-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-left: 8px;\n    min-width: 0;\n    flex: 1;\n  }\n\n  #caption {\n    align-self: stretch;\n\n    --sinch-comp-title-font: var(--sinch-comp-inline-alert-font-title);\n  }\n\n  :host([type="success"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-error-default-text\n      );\n  }\n\n  :host([type="info"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-info-default-text\n      );\n  }\n\n  #text {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 0;\n    align-self: stretch;\n\n    --sinch-comp-rich-text-font: var(--sinch-comp-inline-alert-font-body);\n  }\n\n  :host([type="success"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-error-default-text\n      );\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-info-default-text\n      );\n  }\n\n  :host([caption]) #text,\n  :host([caption=""]) #text {\n    margin-top: 4px;\n  }\n\n  #action {\n    width: 100%;\n    display: flex;\n    margin-top: 16px;\n    min-width: 0;\n    gap: 16px;\n  }\n\n  #action.empty {\n    display: none;\n  }\n\n  #close {\n    margin-left: 16px;\n  }\n\n  #close.empty {\n    display: none;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <div id="body-wrapper">\n    <sinch-title id="caption" level="3" type="s"></sinch-title>\n    <sinch-rich-text id="text"></sinch-rich-text>\n    <div id="action">\n      <slot name="action"></slot>\n    </div>\n  </div>\n  <div id="close">\n    <slot name="close"></slot>\n  </div>\n</div>\n';
-const template = document.createElement("template");
+import '../icon';
+import '../rich-text';
+import '../text';
+import '../title';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
+import { typeValues } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class InlineAlert extends NectaryElement {
+export class InlineAlert extends NectaryElement {
   #$text;
   #$caption;
   #$closeWrapper;
@@ -19,85 +18,67 @@ class InlineAlert extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector("#text");
-    this.#$caption = shadowRoot.querySelector("#caption");
-    this.#$closeWrapper = shadowRoot.querySelector("#close");
+    this.#$text = shadowRoot.querySelector('#text');
+    this.#$caption = shadowRoot.querySelector('#caption');
+    this.#$closeWrapper = shadowRoot.querySelector('#close');
     this.#$closeSlot = shadowRoot.querySelector('slot[name="close"]');
-    this.#$actionWrapper = shadowRoot.querySelector("#action");
+    this.#$actionWrapper = shadowRoot.querySelector('#action');
     this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("aria-atomic", "true");
-    this.setAttribute("aria-live", "polite");
-    this.#$closeSlot.addEventListener("slotchange", this.#onCloseSlotChange);
-    this.#$actionSlot.addEventListener(
-      "slotchange",
-      this.#onActionSlotChange
-    );
+    this.setAttribute('aria-atomic', 'true');
+    this.setAttribute('aria-live', 'polite');
+    this.#$closeSlot.addEventListener('slotchange', this.#onCloseSlotChange);
+    this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange);
     this.#onCloseSlotChange();
     this.#onActionSlotChange();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#$closeSlot.removeEventListener(
-      "slotchange",
-      this.#onCloseSlotChange
-    );
-    this.#$actionSlot.removeEventListener(
-      "slotchange",
-      this.#onActionSlotChange
-    );
+    this.#$closeSlot.removeEventListener('slotchange', this.#onCloseSlotChange);
+    this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
   }
   static get observedAttributes() {
-    return ["text", "caption"];
+    return ['text', 'caption'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case "text": {
-        updateAttribute(this.#$text, "text", newVal);
-        break;
-      }
-      case "caption": {
-        updateAttribute(this.#$caption, "text", newVal);
-        break;
-      }
+      case 'text':
+        {
+          updateAttribute(this.#$text, 'text', newVal);
+          break;
+        }
+      case 'caption':
+        {
+          updateAttribute(this.#$caption, 'text', newVal);
+          break;
+        }
     }
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, "type");
+    return getLiteralAttribute(this, typeValues, 'type');
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, "type", value);
+    updateLiteralAttribute(this, typeValues, 'type', value);
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get caption() {
-    return getAttribute(this, "caption", "");
+    return getAttribute(this, 'caption', '');
   }
   set caption(value) {
-    updateAttribute(this, "caption", value);
+    updateAttribute(this, 'caption', value);
   }
   #onCloseSlotChange = () => {
-    setClass(
-      this.#$closeWrapper,
-      "empty",
-      this.#$closeSlot.assignedElements().length === 0
-    );
+    setClass(this.#$closeWrapper, 'empty', this.#$closeSlot.assignedElements().length === 0);
   };
   #onActionSlotChange = () => {
-    setClass(
-      this.#$actionWrapper,
-      "empty",
-      this.#$actionSlot.assignedElements().length === 0
-    );
+    setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
   };
 }
-defineCustomElement("sinch-inline-alert", InlineAlert);
-export {
-  InlineAlert
-};
+defineCustomElement('sinch-inline-alert', InlineAlert);

package/inline-alert/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
 export type TSinchInlineAlertProps = {
     type: TSinchInlineAlertType;
@@ -32,23 +32,3 @@ export type TSinchInlineAlert = {
 };
 export type TSinchInlineAlertElement = NectaryComponentVanillaByType<TSinchInlineAlert>;
 export type TSinchInlineAlertReact = NectaryComponentReactByType<TSinchInlineAlert>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-inline-alert': TSinchInlineAlert;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-inline-alert': NectaryComponentVanilla<'sinch-inline-alert'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
-        }
-    }
-}

package/inline-alert/types.js

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

package/inline-alert/utils.js

@@ -1,4 +1 @@
-const typeValues = ["info", "success", "warn", "error"];
-export {
-  typeValues
-};
+export const typeValues = ['info', 'success', 'warn', 'error'];

package/input/index.d.ts

@@ -1,7 +1,7 @@
 import { NectaryElement } from '../utils';
-import type { TSinchInputType } from './types';
+import type { TSinchInputType, TSinchInput } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
-export * from './types';
 export declare class Input extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -44,3 +44,23 @@ export declare class Input extends NectaryElement {
     focus(): void;
     blur(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-input': TSinchInput;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-input': NectaryComponentVanilla<'sinch-input'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-input': NectaryComponentReact<'sinch-input'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-input': NectaryComponentReact<'sinch-input'>;
+        }
+    }
+}