@nectary/components 0.44.1 → 0.45.1

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 {

package/tooltip/index.js

@@ -21,7 +21,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   #tooltipState;
   #animation = null;
   #shouldReduceMotion = false;
-  #isConnected = false;
   #isSubscribed = false;
   constructor() {
     super();
@@ -44,7 +43,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     });
   }
   connectedCallback() {
-    this.#isConnected = true;
+    super.connectedCallback();
     this.#controller = new AbortController();
     const options = {
       signal: this.#controller.signal
@@ -54,6 +53,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#updateText();
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.#controller.abort();
     this.#tooltipState.destroy();
   }
@@ -93,8 +93,10 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
         }
       case 'orientation':
         {
-          assertOrientation(newVal);
-          updateAttribute(this.#$pop, 'orientation', getPopOrientation(newVal));
+          if ('production' !== 'production') {
+            assertOrientation(newVal);
+          }
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
           if (this.#isOpen()) {
             this.#resetTipOrientation();
             this.#updateTipOrientation();
@@ -178,7 +180,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
   #updateText() {
-    if (!this.#isConnected) {
+    if (!this.isConnected) {
       return;
     }
     const value = this.text;
@@ -194,7 +196,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#subscribeMouseEnterEvent();
   }
   #subscribeMouseEnterEvent() {
-    if (!this.#isConnected || this.#isSubscribed) {
+    if (!this.isConnected || this.#isSubscribed) {
       return;
     }
     this.#$target.addEventListener('mouseenter', this.#onMouseEnter, {

package/utils/context.d.ts

@@ -1,15 +1,20 @@
-export declare type TContextName = 'visibility' | 'keydown';
-export declare type TContextKeyboard = {
+export declare type TContextName = 'visibility' | 'keydown' | 'size';
+export declare type TContextKeydown = {
     code: string;
     preventDefault: () => void;
 };
 export declare type TContextVisibility = boolean;
-export declare class Context {
+export declare type TContextSize = string;
+declare type TContextDataType = {
+    visibility: TContextVisibility;
+    keydown: TContextKeydown;
+    size: TContextSize;
+};
+export declare class Context<T extends TContextName> {
     #private;
-    constructor($element: Element, name: TContextName);
-    get elements(): Iterable<Element>;
-    subscribe(): void;
-    unsubscribe(): void;
+    constructor($element: Element, name: T);
+    listen(signal: AbortSignal): void;
+    dispatch(contextValue: TContextDataType[T]): void;
 }
-export declare const dispatchContextConnectEvent: (el: Element, name: TContextName) => void;
-export declare const dispatchContextDisconnectEvent: (el: Element, name: TContextName) => void;
+export declare const subscribeContext: <T extends TContextName>($el: Element, name: T, cb: (e: CustomEvent<TContextDataType[T]>) => void, signal: AbortSignal) => void;
+export {};

package/utils/context.js

@@ -1,51 +1,85 @@
+const contextNameToEventMap = {
+  keydown: '-keydown',
+  visibility: '-visibility',
+  size: '-size'
+};
+const shouldPersistContextValue = {
+  keydown: false,
+  visibility: true,
+  size: true
+};
 export class Context {
   #$root;
   #listeners = new Set();
   #name;
-  #isSubscribed = false;
+  #isListening = false;
+  #lastContextValue = null;
   constructor($element, name) {
     this.#$root = $element;
     this.#name = name;
   }
-  get elements() {
-    return this.#listeners;
-  }
-  subscribe() {
-    if (this.#isSubscribed) {
+  listen(signal) {
+    if (this.#isListening) {
       return;
     }
-    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onConnect);
-    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
-    this.#isSubscribed = true;
+    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onListenerConnect, {
+      signal
+    });
+    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onListenerDisconnect, {
+      signal
+    });
+    this.#isListening = true;
+    signal.addEventListener('abort', () => {
+      this.#listeners.clear();
+      this.#isListening = false;
+      this.#lastContextValue = null;
+    }, {
+      once: true
+    });
   }
-  unsubscribe() {
-    this.#listeners.clear();
-    this.#$root.removeEventListener(`-context-connect-${this.#name}`, this.#onConnect);
-    this.#$root.removeEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
-    this.#isSubscribed = false;
+  dispatch(contextValue) {
+    for (const el of this.#listeners) {
+      el.dispatchEvent(new CustomEvent(contextNameToEventMap[this.#name], {
+        detail: contextValue
+      }));
+    }
+    if (shouldPersistContextValue[this.#name]) {
+      this.#lastContextValue = contextValue;
+    }
   }
-  #onConnect = e => {
+  #onListenerConnect = e => {
     e.stopPropagation();
     this.#listeners.add(e.detail);
+    if (this.#lastContextValue !== null) {
+      e.detail.dispatchEvent(new CustomEvent(contextNameToEventMap[this.#name], {
+        detail: this.#lastContextValue
+      }));
+    }
   };
-  #onDisconnect = e => {
+  #onListenerDisconnect = e => {
     e.stopPropagation();
     this.#listeners.delete(e.detail);
   };
 }
-export const dispatchContextConnectEvent = (el, name) => {
+export const subscribeContext = ($el, name, cb, signal) => {
   requestAnimationFrame(() => {
-    el.dispatchEvent(new CustomEvent(`-context-connect-${name}`, {
+    $el.dispatchEvent(new CustomEvent(`-context-connect-${name}`, {
       bubbles: true,
       composed: true,
-      detail: el
+      detail: $el
     }));
   });
-};
-export const dispatchContextDisconnectEvent = (el, name) => {
-  el.dispatchEvent(new CustomEvent(`-context-disconnect-${name}`, {
-    bubbles: true,
-    composed: true,
-    detail: el
-  }));
+
+  $el.addEventListener(contextNameToEventMap[name], cb, {
+    signal
+  });
+  signal.addEventListener('abort', () => {
+    $el.dispatchEvent(new CustomEvent(`-context-disconnect-${name}`, {
+      bubbles: true,
+      composed: true,
+      detail: $el
+    }));
+  }, {
+    once: true
+  });
 };

package/utils/countries.d.ts

@@ -0,0 +1,5 @@
+export declare type TSinchCountry = {
+    name: string;
+    phoneCode: string;
+};
+export declare const countries: Record<string, TSinchCountry>;

package/utils/countries.js

@@ -0,0 +1,2 @@
+import countriesJson from './countries.json';
+export const countries = countriesJson;