@nectary/components 4.12.1 → 5.0.0

package/bundle.ts

@@ -0,0 +1,80 @@
+// Reminder: Keep this list updated as we add new components
+
+export * from './accordion-item/index.js'
+export * from './accordion/index.js'
+export * from './action-menu-option/index.js'
+export * from './action-menu/index.js'
+export * from './alert/index.js'
+export * from './avatar/index.js'
+export * from './badge/index.js'
+export * from './button-group-item/index.js'
+export * from './button-group/index.js'
+export * from './button/index.js'
+export * from './card-container/index.js'
+export * from './card-v2-title/index.js'
+export * from './card-v2/index.js'
+export * from './checkbox/index.js'
+export * from './chip/index.js'
+export * from './code-tag/index.js'
+export * from './color-menu-option/index.js'
+export * from './color-menu/index.js'
+export * from './color-swatch/index.js'
+export * from './date-picker/index.js'
+export * from './dialog/index.js'
+export * from './emoji-picker/index.js'
+export * from './emoji/index.js'
+export * from './field/index.js'
+export * from './file-drop/index.js'
+export * from './file-picker/index.js'
+export * from './file-status/index.js'
+export * from './flag/index.js'
+export * from './grid-item/index.js'
+export * from './grid/index.js'
+export * from './help-tooltip/index.js'
+export * from './icon/index.js'
+export * from './inline-alert/index.js'
+export * from './input/index.js'
+export * from './link/index.js'
+export * from './list-item/index.js'
+export * from './list/index.js'
+export * from './pagination/index.js'
+export * from './persistent-overlay/index.js'
+export * from './pop/index.js'
+export * from './popover/index.js'
+export * from './progress-stepper-item/index.js'
+export * from './progress-stepper/index.js'
+export * from './progress/index.js'
+export * from './radio-option/index.js'
+export * from './radio/index.js'
+export * from './rich-text/index.js'
+export * from './rich-textarea/index.js'
+export * from './segment-collapse/index.js'
+export * from './segmented-control-option/index.js'
+export * from './segmented-control/index.js'
+export * from './segmented-icon-control-option/index.js'
+export * from './segmented-icon-control/index.js'
+export * from './select-button/index.js'
+export * from './select-menu-option/index.js'
+export * from './select-menu/index.js'
+export * from './skeleton-item/index.js'
+export * from './skeleton/index.js'
+export * from './spinner/index.js'
+export * from './stop-events/index.js'
+export * from './table-body/index.js'
+export * from './table-cell/index.js'
+export * from './table-head-cell/index.js'
+export * from './table-head/index.js'
+export * from './table-row/index.js'
+export * from './table/index.js'
+export * from './tabs-icon-option/index.js'
+export * from './tabs-option/index.js'
+export * from './tabs/index.js'
+export * from './tag/index.js'
+export * from './text/index.js'
+export * from './textarea/index.js'
+export * from './time-picker/index.js'
+export * from './title/index.js'
+export * from './toast-manager/index.js'
+export * from './toast/index.js'
+export * from './toggle/index.js'
+export * from './tooltip/index.js'

package/button/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/button/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-button");

package/button/index.d.ts

@@ -1,7 +1,7 @@
 import { NectaryElement } from '../utils';
-import type { TSinchButtonType, TSinchButton, TSinchButtonFormType } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchButtonType, TSinchButtonFormType } from './types';
 import type { TSinchSizeEx } from '../utils/size';
+export * from './types';
 export declare class Button extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -24,23 +24,3 @@ export declare class Button extends NectaryElement {
     set formType(value: TSinchButtonFormType);
     get formType(): TSinchButtonFormType;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-button': TSinchButton;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-button': NectaryComponentVanilla<'sinch-button'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-button': NectaryComponentReact<'sinch-button'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-button': NectaryComponentReact<'sinch-button'>;
-        }
-    }
-}

package/button/index.js

@@ -1,11 +1,14 @@
-import { defineCustomElement, getBooleanAttribute, getAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getLiteralAttribute, updateLiteralAttribute, Context, subscribeContext, isAttrEqual } from '../utils';
-import { requestSubmitForm } from '../utils/form';
-import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer;user-select:none;--sinch-button-shape-radius-base:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-button-border:1px solid;--sinch-button-border-top:var(--sinch-button-border);--sinch-button-border-bottom:var(--sinch-button-border);--sinch-button-border-left:var(--sinch-button-border);--sinch-button-border-right:var(--sinch-button-border);--sinch-button-shape-radius-top-right:unset;--sinch-button-shape-radius-top-left:unset;--sinch-button-shape-radius-bottom-right:unset;--sinch-button-shape-radius-bottom-left:unset}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);user-select:none;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:16px;--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s)}:host([data-size=xs])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:8px;--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-xs);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs)}:host(:is([text=""],:not([text])))>#button{--sinch-local-padding:8px}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outline-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host(:not([type]))>#button,:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial)}:host([type=subtle-primary])>#button,:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host(:not([type]):is([text=""],:not([text])))>#button,:host([type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host(:not([type]):focus-visible)>#button,:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible)>#button,:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host(:not([type]):is([text=""],:not([text])):focus-visible)>#button,:host([type=subtle-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([toggled]:not([disabled])[type=subtle-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-toggled-background-initial)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])))>#button,:host([toggled]:not([disabled])[type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-toggled-background-initial)}:host([type=primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host(:not([type]):hover)>#button,:host([type=secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([type]):active)>#button,:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover)>#button,:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-primary]:active)>#button,:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host(:not([type]):is([text=""],:not([text])):hover)>#button,:host([type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host(:not([type]):is([text=""],:not([text])):active)>#button,:host([type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([toggled]:not([disabled])[type=subtle-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled])[type=subtle-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):hover)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):active)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial)}:host(:not([type])[disabled])>#button,:host([type=secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial)}:host([type=subtle-primary][disabled])>#button,:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-primary-disabled-icon-initial)}:host(:not([type]):is([text=""],:not([text]))[disabled])>#button,:host([type=subtle-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border-top:var(--sinch-button-border-top);border-bottom:var(--sinch-button-border-bottom);border-right:var(--sinch-button-border-right);border-left:var(--sinch-button-border-left);border-color:var(--sinch-local-color-border);border-top-right-radius:var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-top-left-radius:var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-right-radius:var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-left-radius:var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-top-right-radius:calc(var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-top-left-radius:calc(var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-right-radius:calc(var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-left-radius:calc(var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 var(--sinch-local-padding);box-sizing:border-box;pointer-events:none;overflow:hidden}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="button" inert><div id="content"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="text"></span><slot id="right-icon" name="right-icon"></slot></div></div>';
-import { typeValues, formTypeValues } from './utils';
-const template = document.createElement('template');
+import { Context, subscribeContext } from "../utils/context.js";
+import { updateAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateLiteralAttribute, getLiteralAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { requestSubmitForm } from "../utils/form.js";
+import { sizeExValues, DEFAULT_SIZE } from "../utils/size.js";
+import { typeValues, formTypeValues } from "./utils.js";
+const templateHTML = '<style>\n  /* stylelint-disable no-descending-specificity */\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    cursor: pointer;\n    user-select: none;\n\n    --sinch-button-shape-radius-base:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-initial);\n    --sinch-button-border: 1px solid;\n    --sinch-button-border-top: var(--sinch-button-border);\n    --sinch-button-border-bottom: var(--sinch-button-border);\n    --sinch-button-border-left: var(--sinch-button-border);\n    --sinch-button-border-right: var(--sinch-button-border);\n    --sinch-button-shape-radius-top-right: unset;\n    --sinch-button-shape-radius-top-left: unset;\n    --sinch-button-shape-radius-bottom-right: unset;\n    --sinch-button-shape-radius-bottom-left: unset;\n  }\n\n  :host([disabled]) {\n    cursor: initial;\n  }\n\n  #button {\n    all: initial;\n    display: block;\n    position: relative;\n    width: 100%;\n    height: var(--sinch-local-size);\n    user-select: none;\n\n    --sinch-local-size: var(--sinch-comp-button-size-container-m);\n    --sinch-local-padding: 16px;\n    --sinch-local-font: var(--sinch-comp-button-font-size-m-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-m);\n    --sinch-global-color-icon: var(--sinch-local-color-icon);\n  }\n\n  :host([data-size="l"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-l);\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-l-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-l);\n  }\n\n  :host([data-size="m"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-m);\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-m-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-m);\n  }\n\n  :host([data-size="s"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-s);\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-s-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-s);\n  }\n\n  :host([data-size="xs"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-xs);\n    --sinch-local-padding: 8px;\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-s-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-xs);\n  }\n\n  /* icon-button */\n  :host(:is([text=""], :not([text]))) > #button {\n    --sinch-local-padding: 8px;\n  }\n\n  /* icon-button */\n  :host([data-size="s"]:is([text=""], :not([text]))) > #button {\n    --sinch-local-padding: 4px;\n  }\n\n  /* icon-button */\n  :host([data-size="xs"]:is([text=""], :not([text]))) > #button {\n    --sinch-local-padding: 4px;\n  }\n\n  /* Types */\n  :host([type="primary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-primary-default-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-primary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-primary-default-icon-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-primary-default-outline-focus\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-initial);\n  }\n\n  /* default type */\n  :host(:not([type])) > #button,\n  :host([type="secondary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-secondary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-secondary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-secondary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-secondary-default-icon-initial\n      );\n  }\n\n  :host([type="subtle-primary"]) > #button,\n  /* deprecated */\n  :host([type="tertiary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-initial);\n  }\n\n  :host([type="subtle-secondary"]) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text]))) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-initial);\n  }\n\n  :host([type="cta-primary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-primary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-cta-primary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-primary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-cta-primary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-initial);\n  }\n\n  :host([type="cta-secondary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-initial);\n  }\n\n  :host([type="destructive"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-danger-default-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-danger-default-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-initial);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-danger-default-icon-initial\n      );\n  }\n\n  :host([type="primary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-focus);\n  }\n\n  /* default type */\n  :host(:not([type]):focus-visible) > #button,\n  :host([type="secondary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-focus);\n  }\n\n  :host([type="subtle-primary"]:focus-visible) > #button,\n  /* deprecated */\n  :host([type="tertiary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-focus);\n  }\n\n  :host([type="subtle-secondary"]:focus-visible) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text])):focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-focus);\n  }\n\n  :host([type="cta-primary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-focus);\n  }\n\n  :host([type="cta-secondary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-focus);\n  }\n\n  :host([type="destructive"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-focus);\n  }\n\n  /* Toggled state */\n  :host([toggled]:not([disabled])[type="subtle-primary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-toggled-background-initial\n      );\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-secondary"]) > #button,\n  /* default type for icon-button */\n  :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text]))) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-toggled-background-initial\n      );\n  }\n\n  /* Hover / Active */\n  :host([type="primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-hover);\n  }\n\n  :host([type="primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-active);\n  }\n\n  /* default type */\n  :host(:not([type]):hover) > #button,\n  :host([type="secondary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-hover);\n  }\n\n  /* default type */\n  :host(:not([type]):active) > #button,\n  :host([type="secondary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-default-background-active\n      );\n  }\n\n  /* deprecated */\n  :host([type="tertiary"]:hover) > #button,\n  :host([type="subtle-primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  /* deprecated */\n  :host([type="tertiary"]:active) > #button,\n  :host([type="subtle-primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  :host([type="subtle-secondary"]:hover) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text])):hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  :host([type="subtle-secondary"]:active) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text])):active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  :host([type="cta-primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-hover);\n  }\n\n  :host([type="cta-primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-active);\n  }\n\n  :host([type="cta-secondary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-hover);\n  }\n\n  :host([type="cta-secondary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-active);\n  }\n\n  :host([type="destructive"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-hover);\n  }\n\n  :host([type="destructive"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-active);\n  }\n\n  /* Toggled + Hover / Active */\n  :host([toggled]:not([disabled])[type="subtle-primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-secondary"]:hover) > #button,\n  /* default type for icon-button */\n  :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text])):hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-secondary"]:active) > #button,\n  /* default type for icon-button */\n  :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text])):active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  /* Disabled state */\n  :host([type="primary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-primary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-primary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-primary-disabled-icon-initial\n      );\n  }\n\n  /* default type */\n  :host(:not([type])[disabled]) > #button,\n  :host([type="secondary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-secondary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-secondary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-secondary-disabled-icon-initial\n      );\n  }\n\n  :host([type="subtle-primary"][disabled]) > #button,\n  /* deprecated */\n  :host([type="tertiary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-icon-initial\n      );\n  }\n\n  :host([type="subtle-secondary"][disabled]) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text]))[disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-icon-initial\n      );\n  }\n\n  :host([type="cta-primary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-icon-initial\n      );\n  }\n\n  :host([type="cta-secondary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-text-initial\n      );\n    --sinch-local-shadow:\n      var(\n        --sinch-comp-button-shadow-cta-secondary-disabled\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-icon-initial\n      );\n  }\n\n  :host([type="destructive"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-danger-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-danger-disabled-text-initial\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-danger-disabled-icon-initial\n      );\n  }\n\n  /* Border / Background */\n  #button::before {\n    content: "";\n    position: absolute;\n    inset: 0;\n    background-color: var(--sinch-local-color-background);\n    border-top: var(--sinch-button-border-top);\n    border-bottom: var(--sinch-button-border-bottom);\n    border-right: var(--sinch-button-border-right);\n    border-left: var(--sinch-button-border-left);\n    border-color: var(--sinch-local-color-border);\n    border-top-right-radius:\n      var(\n        --sinch-button-shape-radius-top-right,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    border-top-left-radius:\n      var(\n        --sinch-button-shape-radius-top-left,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    border-bottom-right-radius:\n      var(\n        --sinch-button-shape-radius-bottom-right,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    border-bottom-left-radius:\n      var(\n        --sinch-button-shape-radius-bottom-left,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    box-shadow: var(--sinch-local-shadow);\n    pointer-events: none;\n  }\n\n  :host(:not([disabled]):active) #button::before {\n    border-width: 2px;\n  }\n\n  /* Focus Outline */\n  :host(:focus-visible) #button::after {\n    position: absolute;\n    content: "";\n    inset: -3px;\n    border: 2px solid var(--sinch-local-color-outline-focus);\n    border-top-right-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-top-right,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    border-top-left-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-top-left,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    border-bottom-right-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-bottom-right,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    border-bottom-left-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-bottom-left,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    pointer-events: none;\n  }\n\n  #content {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    width: 100%;\n    height: 100%;\n    padding: 0 var(--sinch-local-padding);\n    box-sizing: border-box;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  #text {\n    font: var(--sinch-local-font);\n    color: var(--sinch-local-color-text);\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  /* icon-button */\n  :host(:is([text=""], :not([text]))) :is(#left-icon, #right-icon, #text) {\n    display: none;\n  }\n\n  ::slotted(*) {\n    display: block;\n  }\n</style>\n\n<div id="button" inert>\n  <div id="content">\n    <slot id="left-icon" name="left-icon"></slot>\n    <slot id="icon" name="icon"></slot>\n    <span id="text"></span>\n    <slot id="right-icon" name="right-icon"></slot>\n  </div>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Button extends NectaryElement {
+class Button extends NectaryElement {
   #$button;
   #$text;
   #controller = null;
@@ -17,41 +20,25 @@ export class Button extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#internals = this.attachInternals();
-    this.#$button = shadowRoot.querySelector('#button');
-    this.#$text = shadowRoot.querySelector('#text');
-    this.#sizeContext = new Context(this.#$button, 'size');
+    this.#$button = shadowRoot.querySelector("#button");
+    this.#$text = shadowRoot.querySelector("#text");
+    this.#sizeContext = new Context(this.#$button, "size");
   }
   connectedCallback() {
     super.connectedCallback();
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.setAttribute('role', 'button');
-    this.#internals.role = 'button';
+    const { signal } = this.#controller;
+    this.setAttribute("role", "button");
+    this.#internals.role = "button";
     this.tabIndex = 0;
-    this.addEventListener('click', this.#onButtonClick, {
-      signal
-    });
-    this.addEventListener('focus', this.#onButtonFocus, {
-      signal
-    });
-    this.addEventListener('blur', this.#onButtonBlur, {
-      signal
-    });
-    this.addEventListener('keydown', this.#onButtonKeydown, {
-      signal
-    });
-    this.addEventListener('-click', this.#onClickReactHandler, {
-      signal
-    });
-    this.addEventListener('-focus', this.#onFocusReactHandler, {
-      signal
-    });
-    this.addEventListener('-blur', this.#onBlurReactHandler, {
-      signal
-    });
-    subscribeContext(this, 'size', this.#onContextSize, signal);
+    this.addEventListener("click", this.#onButtonClick, { signal });
+    this.addEventListener("focus", this.#onButtonFocus, { signal });
+    this.addEventListener("blur", this.#onButtonBlur, { signal });
+    this.addEventListener("keydown", this.#onButtonKeydown, { signal });
+    this.addEventListener("-click", this.#onClickReactHandler, { signal });
+    this.addEventListener("-focus", this.#onFocusReactHandler, { signal });
+    this.addEventListener("-blur", this.#onBlurReactHandler, { signal });
+    subscribeContext(this, "size", this.#onContextSize, signal);
     this.#sizeContext.listen(signal);
     this.#onSizeUpdate();
   }
@@ -61,148 +48,151 @@ export class Button extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['text', 'disabled', 'toggled', 'size', 'data-size'];
+    return [
+      "text",
+      "disabled",
+      "toggled",
+      "size",
+      "data-size"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'disabled':
-        {
-          if (!isAttrEqual(oldVal, newVal)) {
-            updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
-          }
-          this.ariaDisabled = isAttrTrue(newVal).toString();
-          this.#internals.ariaDisabled = isAttrTrue(newVal).toString();
-          break;
-        }
-      case 'toggled':
-        {
-          if (!isAttrEqual(oldVal, newVal)) {
-            updateBooleanAttribute(this, 'toggled', isAttrTrue(newVal));
-          }
-          this.ariaPressed = isAttrTrue(newVal).toString();
-          this.#internals.ariaPressed = isAttrTrue(newVal).toString();
-          break;
-        }
-      case 'size':
-        {
-          updateAttribute(this, 'data-size', newVal);
-          break;
+      case "text": {
+        this.#$text.textContent = newVal;
+        break;
+      }
+      case "disabled": {
+        if (!isAttrEqual(oldVal, newVal)) {
+          updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
         }
-      case 'data-size':
-        {
-          this.#onSizeUpdate();
-          break;
+        this.ariaDisabled = isAttrTrue(newVal).toString();
+        this.#internals.ariaDisabled = isAttrTrue(newVal).toString();
+        break;
+      }
+      case "toggled": {
+        if (!isAttrEqual(oldVal, newVal)) {
+          updateBooleanAttribute(this, "toggled", isAttrTrue(newVal));
         }
+        this.ariaPressed = isAttrTrue(newVal).toString();
+        this.#internals.ariaPressed = isAttrTrue(newVal).toString();
+        break;
+      }
+      case "size": {
+        updateAttribute(this, "data-size", newVal);
+        break;
+      }
+      case "data-size": {
+        this.#onSizeUpdate();
+        break;
+      }
     }
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
+    updateLiteralAttribute(this, typeValues, "type", value);
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, 'type', 'primary');
+    return getLiteralAttribute(this, typeValues, "type", "primary");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set toggled(isToggled) {
-    updateBooleanAttribute(this, 'toggled', isToggled);
+    updateBooleanAttribute(this, "toggled", isToggled);
   }
   get toggled() {
-    return getBooleanAttribute(this, 'toggled');
+    return getBooleanAttribute(this, "toggled");
   }
   set size(size) {
-    updateLiteralAttribute(this, sizeExValues, 'size', size);
+    updateLiteralAttribute(this, sizeExValues, "size", size);
   }
   get size() {
-    return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
+    return getLiteralAttribute(this, sizeExValues, "size", DEFAULT_SIZE);
   }
   get focusable() {
     return true;
   }
   set formType(value) {
-    updateLiteralAttribute(this, formTypeValues, 'form-type', value);
+    updateLiteralAttribute(this, formTypeValues, "form-type", value);
   }
   get formType() {
-    return getLiteralAttribute(this, formTypeValues, 'form-type', 'button');
+    return getLiteralAttribute(this, formTypeValues, "form-type", "button");
   }
   #onSizeUpdate() {
     if (!this.isDomConnected) {
       return;
     }
-    const size = getAttribute(this, 'data-size', DEFAULT_SIZE);
+    const size = getAttribute(this, "data-size", DEFAULT_SIZE);
     this.#sizeContext.dispatch(size);
   }
-  #onContextSize = e => {
-    if (this.hasAttribute('size')) {
+  #onContextSize = (e) => {
+    if (this.hasAttribute("size") === true) {
       return;
     }
     switch (e.detail) {
-      case 'l':
-        {
-          this.setAttribute('data-size', 'm');
-          break;
-        }
-      default:
-        {
-          this.setAttribute('data-size', 's');
-        }
+      case "l": {
+        this.setAttribute("data-size", "m");
+        break;
+      }
+      default: {
+        this.setAttribute("data-size", "s");
+      }
     }
   };
-  #onButtonKeydown = e => {
+  #onButtonKeydown = (e) => {
     switch (e.code) {
-      case 'Space':
-      case 'Enter':
-        {
-          e.preventDefault();
-          this.click();
-        }
+      case "Space":
+      case "Enter": {
+        e.preventDefault();
+        this.click();
+      }
     }
   };
-  #onButtonClick = e => {
+  #onButtonClick = (e) => {
     if (this.disabled) {
       e.stopPropagation();
       e.preventDefault();
     } else {
       const form = this.#internals.form;
       if (form !== null) {
-        if (this.formType === 'submit') {
+        if (this.formType === "submit") {
           requestSubmitForm(form, this);
         }
-        if (this.formType === 'reset') {
+        if (this.formType === "reset") {
           form.reset();
         }
       }
-      this.dispatchEvent(new CustomEvent('-click'));
+      this.dispatchEvent(
+        new CustomEvent("-click")
+      );
     }
   };
   #onButtonFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
+    this.dispatchEvent(new CustomEvent("-focus"));
   };
   #onButtonBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
+    this.dispatchEvent(new CustomEvent("-blur"));
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, 'on-focus')?.();
+    getReactEventHandler(this, "on-focus")?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, 'on-blur')?.();
+    getReactEventHandler(this, "on-blur")?.();
   };
-  #onClickReactHandler = e => {
-    getReactEventHandler(this, 'on-click')?.(e);
+  #onClickReactHandler = (e) => {
+    getReactEventHandler(this, "on-click")?.(e);
   };
 }
-defineCustomElement('sinch-button', Button);
+defineCustomElement("sinch-button", Button);
+export {
+  Button
+};

package/button/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSizeEx } from '../utils/size';
 export type TSinchButtonFormType = 'submit' | 'reset' | 'button';
 export type TSinchButtonType = 'primary' | 'secondary'
@@ -161,3 +161,23 @@ export type TSinchButton = {
 };
 export type TSinchButtonElement = NectaryComponentVanillaByType<TSinchButton>;
 export type TSinchButtonReact = NectaryComponentReactByType<TSinchButton>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-button': TSinchButton;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button': NectaryComponentVanilla<'sinch-button'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button': NectaryComponentReact<'sinch-button'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-button': NectaryComponentReact<'sinch-button'>;
+        }
+    }
+}

package/button/types.js

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

package/button/utils.js

@@ -1,2 +1,18 @@
-export const typeValues = ['primary', 'secondary', 'subtle-primary', 'subtle-secondary', 'cta-primary', 'cta-secondary', 'destructive'];
-export const formTypeValues = ['submit', 'reset', 'button'];
+const typeValues = [
+  "primary",
+  "secondary",
+  "subtle-primary",
+  "subtle-secondary",
+  "cta-primary",
+  "cta-secondary",
+  "destructive"
+];
+const formTypeValues = [
+  "submit",
+  "reset",
+  "button"
+];
+export {
+  formTypeValues,
+  typeValues
+};

package/button-group/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/button-group/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-button-group");

package/button-group/index.d.ts

@@ -1,8 +1,7 @@
 import { NectaryElement } from '../utils';
-import type { TSinchButtonGroup } from './types';
 import type { TSinchButtonType } from '../button/types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSizeEx } from '../utils/size';
+export * from './types';
 export declare class ButtonGroup extends NectaryElement {
     #private;
     constructor();
@@ -14,23 +13,3 @@ export declare class ButtonGroup extends NectaryElement {
     get size(): TSinchSizeEx;
     connectedCallback(): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-button-group': TSinchButtonGroup;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-button-group': NectaryComponentVanilla<'sinch-button-group'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
-        }
-    }
-}