@nectary/components 0.44.0 → 0.45.0

package/textarea/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalid]:not([invalid=false])) #input:enabled{border-color:var(--sinch-color-text-invalid)}</style><textarea id="input"></textarea>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalid]:not([invalid=false])) #input:enabled{border-color:var(--sinch-color-text-invalid)}</style><textarea id="input"></textarea>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-textarea', class extends NectaryElement {

package/theme/button.css

@@ -0,0 +1,146 @@
+:root,
+:host {
+  /* Primary */
+  --sinch-button-primary-color-background: var(--sinch-color-tropical-500);
+  --sinch-button-primary-color-background-hover: var(--sinch-color-tropical-400);
+  --sinch-button-primary-color-background-active: var(--sinch-color-tropical-600);
+  --sinch-button-primary-color-background-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-primary-color-border: transparent;
+  --sinch-button-primary-color-border-hover: transparent;
+  --sinch-button-primary-color-border-active: transparent;
+  --sinch-button-primary-color-border-disabled: transparent;
+  --sinch-button-primary-color-text: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-text-hover: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-text-active: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-text-disabled: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-icon: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-icon-hover: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-icon-active: var(--sinch-color-snow-100);
+  --sinch-button-primary-color-icon-disabled: var(--sinch-color-snow-100);
+  --sinch-button-primary-mix-blend-mode: initial;
+
+  /* Secondary */
+  --sinch-button-secondary-color-background: var(--sinch-color-snow-100);
+  --sinch-button-secondary-color-background-hover: var(--sinch-color-tropical-100);
+  --sinch-button-secondary-color-background-active: var(--sinch-color-tropical-200);
+  --sinch-button-secondary-color-background-disabled: var(--sinch-color-snow-100);
+  --sinch-button-secondary-color-border: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-border-hover: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-border-active: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-border-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-secondary-color-text: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-text-hover: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-text-active: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-text-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-secondary-color-icon: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-icon-hover: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-icon-active: var(--sinch-color-tropical-500);
+  --sinch-button-secondary-color-icon-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-secondary-mix-blend-mode: initial;
+
+  /* Tertiary */
+  --sinch-button-tertiary-color-background: transparent;
+  --sinch-button-tertiary-color-background-hover: var(--sinch-color-bg-hover);
+  --sinch-button-tertiary-color-background-active: var(--sinch-color-bg-active);
+  --sinch-button-tertiary-color-background-disabled: transparent;
+  --sinch-button-tertiary-color-border: transparent;
+  --sinch-button-tertiary-color-border-hover: transparent;
+  --sinch-button-tertiary-color-border-active: transparent;
+  --sinch-button-tertiary-color-border-disabled: transparent;
+  --sinch-button-tertiary-color-text: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-text-hover: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-text-active: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-text-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-tertiary-color-icon: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-icon-hover: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-icon-active: var(--sinch-color-tropical-500);
+  --sinch-button-tertiary-color-icon-disabled: var(--sinch-color-tropical-200);
+  --sinch-button-tertiary-mix-blend-mode: multiply;
+
+  /* Cta Primary */
+  --sinch-button-cta-primary-color-background: var(--sinch-color-honey-500);
+  --sinch-button-cta-primary-color-background-hover: var(--sinch-color-honey-400);
+  --sinch-button-cta-primary-color-background-active: var(--sinch-color-honey-600);
+  --sinch-button-cta-primary-color-background-disabled: var(--sinch-color-honey-200);
+  --sinch-button-cta-primary-color-border: transparent;
+  --sinch-button-cta-primary-color-border-hover: transparent;
+  --sinch-button-cta-primary-color-border-active: transparent;
+  --sinch-button-cta-primary-color-border-disabled: transparent;
+  --sinch-button-cta-primary-color-text: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-text-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-text-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-text-disabled: var(--sinch-color-stormy-300);
+  --sinch-button-cta-primary-color-icon: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-icon-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-icon-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-primary-color-icon-disabled: var(--sinch-color-stormy-300);
+  --sinch-button-cta-primary-mix-blend-mode: initial;
+
+  /* Cta Secondary */
+  --sinch-button-cta-secondary-color-background: var(--sinch-color-snow-100);
+  --sinch-button-cta-secondary-color-background-hover: var(--sinch-color-snow-200);
+  --sinch-button-cta-secondary-color-background-active: var(--sinch-color-snow-400);
+  --sinch-button-cta-secondary-color-background-disabled: var(--sinch-color-snow-100);
+  --sinch-button-cta-secondary-color-border: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-border-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-border-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-border-disabled: var(--sinch-color-stormy-100);
+  --sinch-button-cta-secondary-color-text: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-text-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-text-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-text-disabled: var(--sinch-color-stormy-100);
+  --sinch-button-cta-secondary-color-icon: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-icon-hover: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-icon-active: var(--sinch-color-stormy-500);
+  --sinch-button-cta-secondary-color-icon-disabled: var(--sinch-color-stormy-100);
+  --sinch-button-cta-secondary-mix-blend-mode: initial;
+
+  /* Destructive */
+  --sinch-button-destructive-color-background: transparent;
+  --sinch-button-destructive-color-background-hover: var(--sinch-color-raspberry-100);
+  --sinch-button-destructive-color-background-active: var(--sinch-color-raspberry-100);
+  --sinch-button-destructive-color-background-disabled: transparent;
+  --sinch-button-destructive-color-border: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-border-hover: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-border-active: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-border-disabled: var(--sinch-color-raspberry-200);
+  --sinch-button-destructive-color-text: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-text-hover: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-text-active: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-text-disabled: var(--sinch-color-raspberry-200);
+  --sinch-button-destructive-color-icon: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-icon-hover: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-icon-active: var(--sinch-color-raspberry-500);
+  --sinch-button-destructive-color-icon-disabled: var(--sinch-color-raspberry-200);
+  --sinch-button-destructive-mix-blend-mode: initial;
+
+  /* Default */
+  --sinch-button-color-background: var(--sinch-button-primary-color-background);
+  --sinch-button-color-background-hover: var(--sinch-button-primary-color-background-hover);
+  --sinch-button-color-background-active: var(--sinch-button-primary-color-background-active);
+  --sinch-button-color-background-disabled: var(--sinch-button-primary-color-background-disabled);
+  --sinch-button-color-border: var(--sinch-button-primary-color-border);
+  --sinch-button-color-border-hover: var(--sinch-button-primary-color-border-hover);
+  --sinch-button-color-border-active: var(--sinch-button-primary-color-border-active);
+  --sinch-button-color-border-disabled: var(--sinch-button-primary-color-border-disabled);
+  --sinch-button-color-text: var(--sinch-button-primary-color-text);
+  --sinch-button-color-text-hover: var(--sinch-button-primary-color-text-hover);
+  --sinch-button-color-text-active: var(--sinch-button-primary-color-text-active);
+  --sinch-button-color-text-disabled: var(--sinch-button-primary-color-text-disabled);
+  --sinch-button-color-icon: var(--sinch-button-primary-color-icon);
+  --sinch-button-color-icon-hover: var(--sinch-button-primary-color-icon-hover);
+  --sinch-button-color-icon-active: var(--sinch-button-primary-color-icon-active);
+  --sinch-button-color-icon-disabled: var(--sinch-button-primary-color-icon-disabled);
+  --sinch-button-mix-blend-mode: var(--sinch-button-primary-mix-blend-mode);
+
+  /* Font */
+  --sinch-button-font-l: 700 16px/24px var(--sinch-font-family);
+  --sinch-button-font-m: 700 16px/24px var(--sinch-font-family);
+  --sinch-button-font-s: 700 14px/20px var(--sinch-font-family);
+  --sinch-button-font: var(--sinch-button-font-m);
+
+  /* Icon Size */
+  --sinch-button-icon-size-l: 24px;
+  --sinch-button-icon-size-m: 24px;
+  --sinch-button-icon-size-s: 16px;
+}

package/{theme.css → theme/contextual.css}

@@ -1,22 +1,5 @@
-@import "theme/palette.css";
-@import "theme/fonts.css";
-@import "theme/typography.css";
-@import "theme/shapes.css";
-@import "theme/elevation.css";
-
-/* Components */
-@import "theme/avatar.css";
-@import "theme/badge.css";
-@import "theme/chip.css";
-@import "theme/color-swatch.css";
-@import "theme/tag.css";
-@import "theme/emoji.css";
-@import "theme/icon.css";
-
 :root,
 :host {
-  --sinch-theme: 1;
-
   /* Contextual */
   --sinch-color-bg-primary-light: var(--sinch-color-snow-100);
   --sinch-color-bg-primary-contrast: var(--sinch-color-snow-200);
@@ -24,6 +7,8 @@
   --sinch-color-bg-comp-blue: var(--sinch-color-ocean-100);
   --sinch-color-bg-comp-yellow: var(--sinch-color-honey-200);
   --sinch-color-bg-comp-red: var(--sinch-color-raspberry-100);
+  --sinch-color-bg-hover: var(--sinch-color-snow-200);
+  --sinch-color-bg-active: var(--sinch-color-snow-400);
   --sinch-color-text-default: var(--sinch-color-stormy-700);
   --sinch-color-text-inverted: var(--sinch-color-snow-100);
   --sinch-color-text-muted: var(--sinch-color-stormy-300);
@@ -39,12 +24,5 @@
   --sinch-color-border-disabled: var(--sinch-color-snow-400);
   --sinch-color-border-focus: var(--sinch-color-ocean-500);
   --sinch-color-border-invalid: var(--sinch-color-raspberry-600);
-
-  /* Deprecated */
-  --sinch-font-hero: 700 56px/72px var(--sinch-font-family);
-  --sinch-font-body: 400 16px/24px var(--sinch-font-family);
-  --sinch-font-emphasized-body: 600 16px/24px var(--sinch-font-family);
-  --sinch-font-small-text: 400 14px/22px var(--sinch-font-family);
-  --sinch-font-extra-small-text: 400 12px/20px var(--sinch-font-family);
-  --sinch-font-monospace: 400 16px/24px "monospace";
+  --sinch-color-icon: var(--sinch-color-stormy-500);
 }

package/theme/elevation.css

@@ -1,6 +1,6 @@
 :root,
 :host {
-  --sinch-elevation-level-0: 0 0 0 0 rgba(10, 39, 61, 0.1);
+  --sinch-elevation-level-0: none;
   --sinch-elevation-level-1: 1px 2px 6px rgba(10, 39, 61, 0.1);
   --sinch-elevation-level-2: 1px 4px 8px rgba(10, 39, 61, 0.1);
   --sinch-elevation-level-3: 1px 6px 12px rgba(10, 39, 61, 0.15);

package/theme/flag.css

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --sinch-flag-src-url: "https://flagcdn.com/%s.svg";
+}

package/theme/fonts.css

@@ -1,36 +1,3 @@
-@font-face {
-  font-family: "Gilroy";
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Gilroy-Regular"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2") format("woff2"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Gilroy";
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Gilroy-SemiBold"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2") format("woff2"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Gilroy";
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Gilroy-Bold"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2") format("woff2"),
-    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff") format("woff");
-}
-
 @font-face {
   font-family: "DM Sans";
   font-weight: 400;

package/theme/fonts.json

@@ -1,37 +1,4 @@
 [
-  {
-    "family": "Gilroy",
-    "weight": 400,
-    "style": "normal",
-    "display": "swap",
-    "src": {
-      "local": "Gilroy-Regular",
-      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2",
-      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff"
-    }
-  },
-  {
-    "family": "Gilroy",
-    "weight": 600,
-    "style": "normal",
-    "display": "swap",
-    "src": {
-      "local": "Gilroy-SemiBold",
-      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2",
-      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff"
-    }
-  },
-  {
-    "family": "Gilroy",
-    "weight": 700,
-    "style": "normal",
-    "display": "swap",
-    "src": {
-      "local": "Gilroy-Bold",
-      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2",
-      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff"
-    }
-  },
   {
     "family": "DM Sans",
     "weight": 400,

package/theme/icon-button.css

@@ -0,0 +1,68 @@
+:root,
+:host {
+  /* Primary */
+  --sinch-icon-button-primary-color-background: var(--sinch-color-tropical-500);
+  --sinch-icon-button-primary-color-background-hover: var(--sinch-color-tropical-400);
+  --sinch-icon-button-primary-color-background-active: var(--sinch-color-tropical-600);
+  --sinch-icon-button-primary-color-background-disabled: var(--sinch-color-tropical-200);
+  --sinch-icon-button-primary-color-border: transparent;
+  --sinch-icon-button-primary-color-border-hover: transparent;
+  --sinch-icon-button-primary-color-border-active: transparent;
+  --sinch-icon-button-primary-color-border-disabled: transparent;
+  --sinch-icon-button-primary-color-icon: var(--sinch-color-snow-100);
+  --sinch-icon-button-primary-color-icon-hover: var(--sinch-color-snow-100);
+  --sinch-icon-button-primary-color-icon-active: var(--sinch-color-snow-100);
+  --sinch-icon-button-primary-color-icon-disabled: var(--sinch-color-snow-100);
+  --sinch-icon-button-primary-mix-blend-mode: initial;
+
+  /* Secondary */
+  --sinch-icon-button-secondary-color-background: var(--sinch-color-snow-100);
+  --sinch-icon-button-secondary-color-background-hover: var(--sinch-color-tropical-100);
+  --sinch-icon-button-secondary-color-background-active: var(--sinch-color-tropical-200);
+  --sinch-icon-button-secondary-color-background-disabled: var(--sinch-color-snow-100);
+  --sinch-icon-button-secondary-color-border: var(--sinch-color-tropical-500);
+  --sinch-icon-button-secondary-color-border-hover: var(--sinch-color-tropical-500);
+  --sinch-icon-button-secondary-color-border-active: var(--sinch-color-tropical-500);
+  --sinch-icon-button-secondary-color-border-disabled: var(--sinch-color-tropical-200);
+  --sinch-icon-button-secondary-color-icon: var(--sinch-color-tropical-500);
+  --sinch-icon-button-secondary-color-icon-hover: var(--sinch-color-tropical-500);
+  --sinch-icon-button-secondary-color-icon-active: var(--sinch-color-tropical-500);
+  --sinch-icon-button-secondary-color-icon-disabled: var(--sinch-color-tropical-200);
+  --sinch-icon-button-secondary-mix-blend-mode: initial;
+
+  /* Tertiary */
+  --sinch-icon-button-tertiary-color-background: transparent;
+  --sinch-icon-button-tertiary-color-background-hover: var(--sinch-color-bg-hover);
+  --sinch-icon-button-tertiary-color-background-active: var(--sinch-color-bg-active);
+  --sinch-icon-button-tertiary-color-background-disabled: transparent;
+  --sinch-icon-button-tertiary-color-border: transparent;
+  --sinch-icon-button-tertiary-color-border-hover: transparent;
+  --sinch-icon-button-tertiary-color-border-active: transparent;
+  --sinch-icon-button-tertiary-color-border-disabled: transparent;
+  --sinch-icon-button-tertiary-color-icon: var(--sinch-color-stormy-500);
+  --sinch-icon-button-tertiary-color-icon-hover: var(--sinch-color-stormy-500);
+  --sinch-icon-button-tertiary-color-icon-active: var(--sinch-color-stormy-500);
+  --sinch-icon-button-tertiary-color-icon-disabled: var(--sinch-color-stormy-100);
+  --sinch-icon-button-tertiary-mix-blend-mode: multiply;
+
+  /* Default */
+  --sinch-icon-button-color-background: var(--sinch-icon-button-tertiary-color-background);
+  --sinch-icon-button-color-background-hover: var(--sinch-icon-button-tertiary-color-background-hover);
+  --sinch-icon-button-color-background-active: var(--sinch-icon-button-tertiary-color-background-active);
+  --sinch-icon-button-color-background-disabled: var(--sinch-icon-button-tertiary-color-background-disabled);
+  --sinch-icon-button-color-border: var(--sinch-icon-button-tertiary-color-border);
+  --sinch-icon-button-color-border-hover: var(--sinch-icon-button-tertiary-color-border-hover);
+  --sinch-icon-button-color-border-active: var(--sinch-icon-button-tertiary-color-border-active);
+  --sinch-icon-button-color-border-disabled: var(--sinch-icon-button-tertiary-color-border-disabled);
+  --sinch-icon-button-color-icon: var(--sinch-icon-button-tertiary-color-icon);
+  --sinch-icon-button-color-icon-hover: var(--sinch-icon-button-tertiary-color-icon-hover);
+  --sinch-icon-button-color-icon-active: var(--sinch-icon-button-tertiary-color-icon-active);
+  --sinch-icon-button-color-icon-disabled: var(--sinch-icon-button-tertiary-color-icon-disabled);
+  --sinch-icon-button-mix-blend-mode: var(--sinch-icon-button-tertiary-mix-blend-mode);
+
+  /* Icon Size */
+  --sinch-icon-button-icon-size-l: 24px;
+  --sinch-icon-button-icon-size-m: 24px;
+  --sinch-icon-button-icon-size-s: 24px;
+  --sinch-icon-button-icon-size-xs: 16px;
+}

package/theme/index.css

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --sinch-theme: 1;
+}

package/theme/index.d.ts

@@ -0,0 +1,21 @@
+import './index.css';
+import './palette.css';
+import './contextual.css';
+import './fonts.css';
+import './typography.css';
+import './shapes.css';
+import './elevation.css';
+import './size.css';
+import './avatar.css';
+import './badge.css';
+import './chip.css';
+import './color-swatch.css';
+import './tag.css';
+import './emoji.css';
+import './icon.css';
+import './flag.css';
+import './button.css';
+import './icon-button.css';
+import './input.css';
+import './spinner.css';
+import './select-button.css';

package/theme/index.js

@@ -0,0 +1,21 @@
+import './index.css';
+import './palette.css';
+import './contextual.css';
+import './fonts.css';
+import './typography.css';
+import './shapes.css';
+import './elevation.css';
+import './size.css';
+import './avatar.css';
+import './badge.css';
+import './chip.css';
+import './color-swatch.css';
+import './tag.css';
+import './emoji.css';
+import './icon.css';
+import './flag.css';
+import './button.css';
+import './icon-button.css';
+import './input.css';
+import './spinner.css';
+import './select-button.css';

package/theme/input.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  /* Icon Size */
+  --sinch-input-icon-size-l: 24px;
+  --sinch-input-icon-size-m: 24px;
+  --sinch-input-icon-size-s: 16px;
+}

package/theme/select-button.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  /* Icon Size */
+  --sinch-select-button-icon-size-l: 24px;
+  --sinch-select-button-icon-size-m: 24px;
+  --sinch-select-button-icon-size-s: 24px;
+}

package/theme/shapes.css

@@ -1,7 +1,8 @@
 :root,
 :host {
   --sinch-shape-radius-xs: 2px;
-  --sinch-shape-radius-s: 4px;
-  --sinch-shape-radius-m: 8px;
-  --sinch-shape-radius-l: 12px;
+  --sinch-shape-radius-s: 6px;
+  --sinch-shape-radius-m: 10px;
+  --sinch-shape-radius-l: 14px;
+  --sinch-shape-radius: var(--sinch-shape-radius-m);
 }

package/theme/size.css

@@ -0,0 +1,9 @@
+:root,
+:host {
+  /* --sinch-sizes: "l-m-s-xs"; */
+  --sinch-size-l: 48px;
+  --sinch-size-m: 40px;
+  --sinch-size-s: 32px;
+  --sinch-size-xs: 24px;
+  --sinch-size: var(--sinch-size-m);
+}

package/theme/spinner.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  /* Size */
+  --sinch-spinner-size-l: 48px;
+  --sinch-spinner-size-m: 24px;
+  --sinch-spinner-size-s: 16px;
+}

package/theme/typography.css

@@ -1,12 +1,12 @@
 :root,
 :host {
-  --sinch-font-family: "Gilroy", "Arial", "sans-serif";
-  --sinch-font-weight-emphasized: 600;
-  --sinch-font-title-xl: 600 40px/48px var(--sinch-font-family);
-  --sinch-font-title-l: 600 24px/32px var(--sinch-font-family);
-  --sinch-font-title-m: 600 20px/24px var(--sinch-font-family);
-  --sinch-font-title-s: 600 16px/24px var(--sinch-font-family);
-  --sinch-font-title-xs: 600 14px/22px var(--sinch-font-family);
+  --sinch-font-family: "DM Sans", "Arial", "sans-serif";
+  --sinch-font-weight-emphasized: 700;
+  --sinch-font-title-xl: 400 40px/48px var(--sinch-font-family);
+  --sinch-font-title-l: 500 24px/32px var(--sinch-font-family);
+  --sinch-font-title-m: 500 20px/24px var(--sinch-font-family);
+  --sinch-font-title-s: 500 16px/24px var(--sinch-font-family);
+  --sinch-font-title-xs: 500 14px/22px var(--sinch-font-family);
   --sinch-font-text-m: 400 16px/24px var(--sinch-font-family);
   --sinch-font-text-s: 400 14px/22px var(--sinch-font-family);
   --sinch-font-text-xs: 400 12px/20px var(--sinch-font-family);

package/tile-control-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:88px;height:88px;padding:16px 8px 8px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-leve-1);cursor:pointer}:host([data-small])>button{width:64px;height:64px;border-radius:var(--sinch-shape-radius-m);padding:12px 4px 4px}button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-small])>button::before{border-radius:var(--sinch-shape-radius-m)}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius-l) + 4px);pointer-events:none}:host([data-small])>button:focus-visible::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius-l) + 4px)}:host([data-small])>button:focus::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}}button:enabled:hover{background-color:var(--sinch-color-tropical-100)}button:enabled:hover::before{border-color:var(--sinch-color-tropical-100)}:host([data-checked])>button:enabled,button:enabled:active{box-shadow:var(--sinch-elevation-level-0)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px;border-color:var(--sinch-color-stormy-500)}button:disabled{cursor:initial}button:disabled>#icon,button:disabled>#text{opacity:.5}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:32px;height:32px;align-self:center;--sinch-size-icon:32px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-small]) #icon{width:24px;height:24px;--sinch-size-icon:24px}button>*{pointer-events:none}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:88px;height:88px;padding:16px 8px 8px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-leve-1);cursor:pointer}:host([data-small])>button{width:64px;height:64px;border-radius:var(--sinch-shape-radius-m);padding:12px 4px 4px}button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-small])>button::before{border-radius:var(--sinch-shape-radius-m)}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius-l) + 4px);pointer-events:none}:host([data-small])>button:focus-visible::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}button:enabled:hover{background-color:var(--sinch-color-tropical-100)}button:enabled:hover::before{border-color:var(--sinch-color-tropical-100)}:host([data-checked])>button:enabled,button:enabled:active{box-shadow:var(--sinch-elevation-level-0)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px;border-color:var(--sinch-color-stormy-500)}button:disabled{cursor:initial}button:disabled>#icon,button:disabled>#text{opacity:.5}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:32px;height:32px;align-self:center;--sinch-size-icon:32px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-small]) #icon{width:24px;height:24px;--sinch-size-icon:24px}button>*{pointer-events:none}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tile-control-option', class extends NectaryElement {

package/time-picker/index.js

@@ -5,7 +5,7 @@ import '../icons/arrow-drop-down';
 import '../segmented-control';
 import '../segmented-control-option';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-size-icon:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-hours::before,#header-minutes::before{content:"";display:none;position:absolute;border-radius:12px;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);padding:1px;border:1px solid var(--sinch-color-border-focus)}#header-hours-down,#header-hours-up,#header-minutes-down,#header-minutes-up{display:none;position:absolute;left:50%;transform:translateX(-50%)}#header-hours-up,#header-minutes-up{top:-18px}#header-hours-down,#header-minutes-down{bottom:-18px}#header-hours:focus #header-hours-down,#header-hours:focus #header-hours-up,#header-hours:focus::before{display:block}#header-minutes:focus #header-minutes-down,#header-minutes:focus #header-minutes-up,#header-minutes:focus::before{display:block}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-hours-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-hours-down"></sinch-icon-arrow-drop-down></div><div id="header-colon">&colon;</div><div id="header-minutes" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-minutes-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-minutes-down"></sinch-icon-arrow-drop-down></div><sinch-icon-button id="submit" small aria-label="Submit"><sinch-icon-done slot="icon"></sinch-icon-done></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour"></div><div id="needle-minute"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-size-icon:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-hours::before,#header-minutes::before{content:"";display:none;position:absolute;border-radius:12px;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);padding:1px;border:1px solid var(--sinch-color-border-focus)}#header-hours-down,#header-hours-up,#header-minutes-down,#header-minutes-up{display:none;position:absolute;left:50%;transform:translateX(-50%)}#header-hours-up,#header-minutes-up{top:-18px}#header-hours-down,#header-minutes-down{bottom:-18px}#header-hours:focus #header-hours-down,#header-hours:focus #header-hours-up,#header-hours:focus::before{display:block}#header-minutes:focus #header-minutes-down,#header-minutes:focus #header-minutes-up,#header-minutes:focus::before{display:block}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-hours-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-hours-down"></sinch-icon-arrow-drop-down></div><div id="header-colon">&colon;</div><div id="header-minutes" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-minutes-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-minutes-down"></sinch-icon-arrow-drop-down></div><sinch-icon-button id="submit" size="s" aria-label="Submit"><sinch-icon-done slot="icon"></sinch-icon-done></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour"></div><div id="needle-minute"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 import { getNeedleRotationDeg, getShortestCssDeg, hourToIndex, parseTime, stringifyHour, stringifyHourFace, stringifyMinute, stringifyTime } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/title/index.js

@@ -1,6 +1,6 @@
 import '../icons/cancel';
 import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}:host([type=xl]) #text{font:var(--sinch-font-title-xl)}:host([type="l"]) #text{font:var(--sinch-font-title-l)}:host([type="m"]) #text{font:var(--sinch-font-title-m)}:host([type="s"]) #text{font:var(--sinch-font-title-s)}:host([type=xs]) #text{font:var(--sinch-font-title-xs)}:host([ellipsis]:not([ellipsis=false])) #text{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
+const templateHTML = '<style>:host{display:block}#text{letter-spacing:-2%}:host([type=xl]) #text{font:var(--sinch-font-title-xl)}:host([type="l"]) #text{font:var(--sinch-font-title-l)}:host([type="m"]) #text{font:var(--sinch-font-title-m)}:host([type="s"]) #text{font:var(--sinch-font-title-s)}:host([type=xs]) #text{font:var(--sinch-font-title-xs)}:host([ellipsis]:not([ellipsis=false])) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
 import { assertLevel, assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -47,13 +47,17 @@ defineCustomElement('sinch-title', class extends NectaryElement {
         }
       case 'level':
         {
-          assertLevel(newVal);
+          if ('production' !== 'production') {
+            assertLevel(newVal);
+          }
           updateAttribute(this, 'aria-level', newVal);
           break;
         }
       case 'type':
         {
-          assertType(newVal);
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
           break;
         }
     }

package/toast/index.js

@@ -57,7 +57,9 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
     switch (name) {
       case 'type':
         {
-          assertType(newVal);
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
           break;
         }
       case 'text':

package/toggle/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:32px}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#input{all:initial;display:block;position:absolute;left:0;top:6px;width:40px;height:20px;cursor:pointer;pointer-events:initial}#input:disabled{cursor:initial}:host([small]:not([small=false])) #input{width:32px;height:16px;top:8px}#input:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus-visible::after{border-radius:14px}@supports not selector(:focus-visible){#input:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus::after{border-radius:14px}}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);overflow:hidden}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#input:checked~#knob-container{background-color:var(--sinch-color-tropical-500)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-1);transform:translateX(0);transition:transform .1s ease-in-out}:host([small]:not([small=false])) #knob{width:12px;height:12px}#input:checked~#knob-container>#knob{transform:translateX(20px)}:host([small]:not([small=false])) #input:checked~#knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-font-body);color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#label:empty{display:none}#input:disabled~#label{color:var(--sinch-color-stormy-200)}#input:disabled~#knob-container{background-color:var(--sinch-color-snow-700)}#input:checked:disabled~#knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><input id="input" type="checkbox"><div id="knob-container"><div id="knob"></div></div><label id="label" for="input"></label></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:32px}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-text-s)}#input{all:initial;display:block;position:absolute;left:0;top:6px;width:40px;height:20px;cursor:pointer;pointer-events:initial}#input:disabled{cursor:initial}:host([small]:not([small=false])) #input{width:32px;height:16px;top:8px}#input:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus-visible::after{border-radius:14px}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);overflow:hidden}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#input:checked~#knob-container{background-color:var(--sinch-color-tropical-500)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-1);transform:translateX(0);transition:transform .1s ease-in-out}:host([small]:not([small=false])) #knob{width:12px;height:12px}#input:checked~#knob-container>#knob{transform:translateX(20px)}:host([small]:not([small=false])) #input:checked~#knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-font-text-m);color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}#label:empty{display:none}#input:disabled~#label{color:var(--sinch-color-stormy-200)}#input:disabled~#knob-container{background-color:var(--sinch-color-snow-700)}#input:checked:disabled~#knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><input id="input" type="checkbox"><div id="knob-container"><div id="knob"></div></div><label id="label" for="input"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-toggle', class extends NectaryElement {