@nectary/components 0.44.0 → 0.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/accordion-item/index.js +1 -1
  2. package/action-menu/index.js +3 -11
  3. package/alert/index.js +3 -1
  4. package/avatar/index.js +12 -13
  5. package/avatar/types.d.ts +4 -4
  6. package/avatar/utils.d.ts +1 -4
  7. package/avatar/utils.js +4 -7
  8. package/badge/index.js +9 -7
  9. package/badge/types.d.ts +4 -4
  10. package/badge/utils.d.ts +1 -4
  11. package/badge/utils.js +0 -6
  12. package/button/index.js +88 -23
  13. package/button/types.d.ts +12 -11
  14. package/button/utils.d.ts +4 -1
  15. package/button/utils.js +9 -1
  16. package/card-container/index.js +1 -1
  17. package/chat-block/index.js +1 -1
  18. package/chat-bubble/index.js +1 -1
  19. package/checkbox/index.js +4 -2
  20. package/chip/index.js +7 -6
  21. package/color-menu/index.js +9 -18
  22. package/color-swatch/index.js +5 -7
  23. package/date-picker/index.js +1 -1
  24. package/dialog/index.js +4 -7
  25. package/emoji/index.js +2 -6
  26. package/emoji-picker/data.json +1 -0
  27. package/emoji-picker/index.js +6 -14
  28. package/field/index.js +1 -1
  29. package/file-status/index.js +4 -2
  30. package/flag/index.d.ts +11 -0
  31. package/flag/index.js +43 -0
  32. package/flag/types.d.ts +11 -0
  33. package/flag/types.js +1 -0
  34. package/flag/utils.d.ts +1 -0
  35. package/flag/utils.js +19 -0
  36. package/icon/index.js +1 -1
  37. package/icon-button/index.js +77 -9
  38. package/icon-button/types.d.ts +14 -6
  39. package/icon-button/utils.d.ts +5 -0
  40. package/icon-button/utils.js +9 -0
  41. package/icons/create-icon-class.js +1 -1
  42. package/inline-alert/index.js +3 -1
  43. package/input/index.d.ts +3 -0
  44. package/input/index.js +148 -71
  45. package/input/types.d.ts +7 -0
  46. package/link/index.js +1 -1
  47. package/package.json +4 -6
  48. package/pagination/index.js +1 -1
  49. package/pop/index.js +15 -37
  50. package/popover/index.js +7 -9
  51. package/radio-option/index.js +1 -1
  52. package/segment/index.js +10 -6
  53. package/segment/types.d.ts +4 -4
  54. package/segment/utils.d.ts +3 -5
  55. package/segment/utils.js +14 -4
  56. package/segment-collapse/index.js +1 -1
  57. package/segmented-control-option/index.js +1 -1
  58. package/segmented-icon-control-option/index.js +1 -1
  59. package/select-button/index.js +93 -28
  60. package/select-button/types.d.ts +8 -1
  61. package/select-menu/index.d.ts +5 -0
  62. package/select-menu/index.js +46 -17
  63. package/select-menu-option/index.d.ts +1 -0
  64. package/select-menu-option/index.js +3 -0
  65. package/select-menu-option/types.d.ts +1 -0
  66. package/spinner/index.js +52 -7
  67. package/spinner/types.d.ts +4 -5
  68. package/stop-events/index.js +9 -5
  69. package/table/index.js +1 -1
  70. package/tag/index.js +2 -6
  71. package/text/index.js +3 -1
  72. package/textarea/index.js +1 -1
  73. package/theme/button.css +146 -0
  74. package/{theme.css → theme/contextual.css} +3 -25
  75. package/theme/elevation.css +1 -1
  76. package/theme/flag.css +4 -0
  77. package/theme/fonts.css +0 -33
  78. package/theme/fonts.json +0 -33
  79. package/theme/icon-button.css +68 -0
  80. package/theme/index.css +4 -0
  81. package/theme/index.d.ts +21 -0
  82. package/theme/index.js +21 -0
  83. package/theme/input.css +7 -0
  84. package/theme/select-button.css +7 -0
  85. package/theme/shapes.css +4 -3
  86. package/theme/size.css +9 -0
  87. package/theme/spinner.css +7 -0
  88. package/theme/typography.css +7 -7
  89. package/tile-control-option/index.js +1 -1
  90. package/time-picker/index.js +1 -1
  91. package/title/index.js +7 -3
  92. package/toast/index.js +3 -1
  93. package/toggle/index.js +1 -1
  94. package/tooltip/index.js +8 -6
  95. package/utils/context.d.ts +14 -9
  96. package/utils/context.js +60 -26
  97. package/utils/countries.d.ts +5 -0
  98. package/utils/countries.js +2 -0
  99. package/utils/countries.json +998 -0
  100. package/utils/debounce.d.ts +4 -0
  101. package/utils/debounce.js +21 -0
  102. package/utils/element.d.ts +4 -0
  103. package/utils/element.js +10 -0
  104. package/utils/index.d.ts +1 -0
  105. package/utils/index.js +1 -0
  106. package/utils/size.d.ts +10 -0
  107. package/utils/size.js +19 -0
  108. package/utils/throttle.d.ts +2 -2
  109. package/utils/throttle.js +4 -9
  110. package/spinner/utils.d.ts +0 -2
  111. package/spinner/utils.js +0 -1
package/checkbox/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
2
- const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-700);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-text-disabled);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-checkbox-background);border:2px solid var(--sinch-color-checkbox-border);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-body);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);border-color:var(--sinch-color-checkbox-border-checked)}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);border-color:var(--sinch-color-checkbox-border-focus)}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);border-color:var(--sinch-color-checkbox-border-hover)}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);border-color:var(--sinch-color-checkbox-border-active)}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);border-color:var(--sinch-color-checkbox-border-disabled)}#checkbox:focus:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);border-color:var(--sinch-color-checkbox-border-focus-checked)}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);border-color:var(--sinch-color-checkbox-border-hover-checked)}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);border-color:var(--sinch-color-checkbox-border-active-checked)}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);border-color:var(--sinch-color-checkbox-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/><svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg><svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
2
+ const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-700);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-text-disabled);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-checkbox-background);border:2px solid var(--sinch-color-checkbox-border);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-text-m);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);border-color:var(--sinch-color-checkbox-border-checked)}#checkbox:focus-visible::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus-visible::after{background-color:var(--sinch-color-checkbox-background-focus);border-color:var(--sinch-color-checkbox-border-focus)}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);border-color:var(--sinch-color-checkbox-border-hover)}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);border-color:var(--sinch-color-checkbox-border-active)}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);border-color:var(--sinch-color-checkbox-border-disabled)}#checkbox:focus-visible:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus-visible:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);border-color:var(--sinch-color-checkbox-border-focus-checked)}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);border-color:var(--sinch-color-checkbox-border-hover-checked)}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);border-color:var(--sinch-color-checkbox-border-active-checked)}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);border-color:var(--sinch-color-checkbox-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/><svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg><svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
3
3
  const template = document.createElement('template');
4
4
  template.innerHTML = templateHTML;
5
5
  defineCustomElement('sinch-checkbox', class extends NectaryElement {
@@ -7,7 +7,9 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
7
7
  #$label;
8
8
  constructor() {
9
9
  super();
10
- const shadowRoot = this.attachShadow();
10
+ const shadowRoot = this.attachShadow({
11
+ delegatesFocus: true
12
+ });
11
13
  shadowRoot.appendChild(template.content.cloneNode(true));
12
14
  this.#$input = shadowRoot.querySelector('input');
13
15
  this.#$label = shadowRoot.querySelector('label');
package/chip/index.js CHANGED
@@ -1,14 +1,13 @@
1
1
  import '../text';
2
2
  import '../icons/cancel';
3
3
  import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler } from '../utils';
4
- const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-chip-color-default-bg);color:var(--sinch-chip-color-default-fg);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-chip-color-default-fg);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}:host([small]:not([small=false])) #button:focus::after{border-radius:14px}}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
4
+ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-chip-color-default-bg);color:var(--sinch-chip-color-default-fg);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-chip-color-default-fg);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
5
5
  import { assertChipColor, getChipColorBg, getChipColorFg } from './utils';
6
6
  const template = document.createElement('template');
7
7
  template.innerHTML = templateHTML;
8
8
  defineCustomElement('sinch-chip', class extends NectaryElement {
9
9
  #$text;
10
10
  #$button;
11
- #isConnected = false;
12
11
  #controller = null;
13
12
  constructor() {
14
13
  super();
@@ -18,6 +17,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
18
17
  this.#$text = shadowRoot.querySelector('#text');
19
18
  }
20
19
  connectedCallback() {
20
+ super.connectedCallback();
21
21
  this.#controller = new AbortController();
22
22
  const {
23
23
  signal
@@ -41,12 +41,11 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
41
41
  this.addEventListener('-blur', this.#onBlurReactHandler, {
42
42
  signal
43
43
  });
44
- this.#isConnected = true;
45
44
  this.#updateColor();
46
45
  }
47
46
  disconnectedCallback() {
47
+ super.disconnectedCallback();
48
48
  this.#controller.abort();
49
- this.#isConnected = false;
50
49
  }
51
50
  get color() {
52
51
  return getAttribute(this, 'color');
@@ -84,12 +83,14 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
84
83
  }
85
84
  }
86
85
  #updateColor() {
87
- if (!this.#isConnected) {
86
+ if (!this.isConnected) {
88
87
  return;
89
88
  }
90
89
  const colorName = this.color;
91
90
  if (colorName !== null && colorName.length > 0) {
92
- assertChipColor(this, colorName);
91
+ if ('production' !== 'production') {
92
+ assertChipColor(this, colorName);
93
+ }
93
94
  const bg = getChipColorBg(colorName);
94
95
  const fg = getChipColorFg(colorName);
95
96
  this.#$button.style.setProperty('background-color', bg);
package/color-menu/index.js CHANGED
@@ -3,7 +3,7 @@ import '../tooltip';
3
3
  import '../icons/check';
4
4
  import { getSwatchColorFg } from '../color-swatch/utils';
5
5
  import { lightColorNames, darkColorNames, vibrantColorNames } from '../theme/colors';
6
- import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, unpackCsv, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
6
+ import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, subscribeContext } from '../utils';
7
7
  const optionTemplateHTML = '<div class="option" role="option"><sinch-tooltip inverted class="tooltip"><div class="swatch-wrapper"><sinch-color-swatch class="swatch"></sinch-color-swatch><sinch-icon-check class="check"></sinch-icon-check></div></sinch-tooltip></div>';
8
8
  const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox:empty{display:none}.option{padding:12px 6px;--sinch-color-icon:var(--sinch-color-stormy-500)}.swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}.swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid transparent;border-radius:50%;pointer-events:none}.option[data-selected]:not([data-checked]) .swatch-wrapper::after{border-color:var(--sinch-color-border-focus)}.check{display:none;position:absolute;left:4px;top:4px;pointer-events:none;--sinch-size-icon:24px}.option[data-checked] .check{display:block}</style><div id="listbox" role="presentation"></div>';
9
9
  import { getParentOption } from './utils';
@@ -18,7 +18,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
18
18
  #$listbox;
19
19
  #controller = null;
20
20
  #prevColorsValue = '';
21
- #isConnected = false;
22
21
  constructor() {
23
22
  super();
24
23
  const shadowRoot = this.attachShadow();
@@ -26,6 +25,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
26
25
  this.#$listbox = shadowRoot.querySelector('#listbox');
27
26
  }
28
27
  connectedCallback() {
28
+ super.connectedCallback();
29
29
  this.#controller = new AbortController();
30
30
  const {
31
31
  signal
@@ -35,9 +35,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
35
35
  this.addEventListener('keydown', this.#onListboxKeyDown, {
36
36
  signal
37
37
  });
38
- this.addEventListener('-keydown', this.#onContexKeydown, {
39
- signal
40
- });
41
38
  this.addEventListener('blur', this.#onListboxBlur, {
42
39
  signal
43
40
  });
@@ -47,18 +44,13 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
47
44
  this.addEventListener('-change', this.#onChangeReactHandler, {
48
45
  signal
49
46
  });
50
- this.addEventListener('-visibility', this.#onContextVisibility, {
51
- signal
52
- });
53
- dispatchContextConnectEvent(this, 'visibility');
54
- dispatchContextConnectEvent(this, 'keydown');
47
+ subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
48
+ subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
55
49
  requestAnimationFrame(this.#onMount);
56
50
  }
57
51
  disconnectedCallback() {
58
- this.#isConnected = false;
52
+ super.disconnectedCallback();
59
53
  this.#prevColorsValue = null;
60
- dispatchContextDisconnectEvent(this, 'visibility');
61
- dispatchContextDisconnectEvent(this, 'keydown');
62
54
  this.#controller.abort();
63
55
  }
64
56
  static get observedAttributes() {
@@ -105,14 +97,14 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
105
97
  switch (name) {
106
98
  case 'value':
107
99
  {
108
- if (this.#isConnected) {
100
+ if (this.isConnected) {
109
101
  this.#onValueChange();
110
102
  }
111
103
  break;
112
104
  }
113
105
  case 'colors':
114
106
  {
115
- if (this.#isConnected) {
107
+ if (this.isConnected) {
116
108
  this.#updateColors();
117
109
  }
118
110
  break;
@@ -124,7 +116,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
124
116
  }
125
117
  case 'cols':
126
118
  {
127
- if (this.#isConnected) {
119
+ if (this.isConnected) {
128
120
  this.#updateColumns();
129
121
  }
130
122
  break;
@@ -178,7 +170,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
178
170
  }
179
171
  #onMount = () => {
180
172
  this.#updateColors();
181
- this.#isConnected = true;
182
173
  };
183
174
  #onListboxBlur = () => {
184
175
  this.#selectOption(null);
@@ -199,7 +190,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
199
190
  this.#selectOption(null);
200
191
  }
201
192
  };
202
- #onContexKeydown = e => {
193
+ #onContextKeyDown = e => {
203
194
  this.#handleKeydown(e.detail);
204
195
  };
205
196
  #onListboxKeyDown = e => {
package/color-swatch/index.js CHANGED
@@ -7,7 +7,6 @@ const template = document.createElement('template');
7
7
  template.innerHTML = templateHTML;
8
8
  defineCustomElement('sinch-color-swatch', class extends NectaryElement {
9
9
  #$wrapper;
10
- #isConnected = false;
11
10
  constructor() {
12
11
  super();
13
12
  const shadowRoot = this.attachShadow();
@@ -15,12 +14,9 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
15
14
  this.#$wrapper = shadowRoot.querySelector('#wrapper');
16
15
  }
17
16
  connectedCallback() {
18
- this.#isConnected = true;
17
+ super.connectedCallback();
19
18
  this.#updateColor();
20
19
  }
21
- disconnectedCallback() {
22
- this.#isConnected = false;
23
- }
24
20
  get name() {
25
21
  return getAttribute(this, 'name');
26
22
  }
@@ -43,12 +39,14 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
43
39
  }
44
40
  }
45
41
  #updateColor() {
46
- if (!this.#isConnected) {
42
+ if (!this.isConnected) {
47
43
  return;
48
44
  }
49
45
  const colorName = this.name;
50
46
  if (colorName !== null && colorName.length > 0) {
51
- assertSwatchColor(this, colorName);
47
+ if ('production' !== 'production') {
48
+ assertSwatchColor(this, colorName);
49
+ }
52
50
  const bg = getSwatchColorBg(colorName);
53
51
  this.#$wrapper.style.setProperty('background-color', bg);
54
52
  setClass(this.#$wrapper, 'no-color', false);
package/date-picker/index.js CHANGED
@@ -7,7 +7,7 @@ import '../icons/delete-outline';
7
7
  import '../icons/today';
8
8
  import '../text';
9
9
  import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
10
- const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-tropical-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}}.day.range{background-color:var(--sinch-color-tropical-100)}.day.selected{background-color:var(--sinch-color-tropical-500);color:var(--sinch-color-snow-100)}.day:hover:enabled:not(.selected){background-color:var(--sinch-color-tropical-200)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" small><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" small><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" small><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" small><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
10
+ const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-s);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-tropical-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}.day.range{background-color:var(--sinch-color-tropical-100)}.day.selected{background-color:var(--sinch-color-tropical-500);color:var(--sinch-color-snow-100)}.day:hover:enabled:not(.selected){background-color:var(--sinch-color-tropical-200)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
11
11
  import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
12
12
  const template = document.createElement('template');
13
13
  template.innerHTML = templateHTML;
package/dialog/index.js CHANGED
@@ -2,16 +2,14 @@ import '../icon-button';
2
2
  import '../icons/close';
3
3
  import '../stop-events';
4
4
  import '../title';
5
- import dialogPolyfill from 'dialog-polyfill';
6
5
  import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
7
- const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#close{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
6
+ const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#close{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
8
7
  const template = document.createElement('template');
9
8
  template.innerHTML = templateHTML;
10
9
  defineCustomElement('sinch-dialog', class extends NectaryElement {
11
10
  #$dialog;
12
11
  #$closeButton;
13
12
  #$caption;
14
- #isConnected = false;
15
13
  #prevOverflowValue = '';
16
14
  constructor() {
17
15
  super();
@@ -20,25 +18,24 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
20
18
  this.#$dialog = shadowRoot.querySelector('dialog');
21
19
  this.#$closeButton = shadowRoot.querySelector('#close');
22
20
  this.#$caption = shadowRoot.querySelector('#caption');
23
- dialogPolyfill.registerDialog(this.#$dialog);
24
21
  }
25
22
  connectedCallback() {
23
+ super.connectedCallback();
26
24
  this.setAttribute('role', 'dialog');
27
25
  this.#$closeButton.addEventListener('click', this.#onCloseClick);
28
26
  this.#$dialog.addEventListener('mousedown', this.#onBackdropClick);
29
27
  this.#$dialog.addEventListener('cancel', this.#onCancel);
30
28
  this.addEventListener('-close', this.#onCloseReactHandler);
31
- this.#isConnected = true;
32
29
 
33
30
  this.#setOpen(getBooleanAttribute(this, 'open'));
34
31
  }
35
32
  disconnectedCallback() {
33
+ super.disconnectedCallback();
36
34
  this.#$closeButton.removeEventListener('click', this.#onCloseClick);
37
35
  this.#$dialog.removeEventListener('mousedown', this.#onBackdropClick);
38
36
  this.#$dialog.removeEventListener('cancel', this.#onCancel);
39
37
  this.removeEventListener('-close', this.#onCloseReactHandler);
40
38
  this.#setOpen(false);
41
- this.#isConnected = false;
42
39
  }
43
40
  static get observedAttributes() {
44
41
  return ['caption', 'open', 'close-aria-label'];
@@ -96,7 +93,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
96
93
  }
97
94
  #setOpen(shouldOpen) {
98
95
  if (shouldOpen) {
99
- if (this.#isConnected && !getBooleanAttribute(this.#$dialog, 'open')) {
96
+ if (this.isConnected && !getBooleanAttribute(this.#$dialog, 'open')) {
100
97
  this.#prevOverflowValue = document.body.style.overflow;
101
98
  document.body.style.overflow = 'hidden';
102
99
  this.#$dialog.showModal();
package/emoji/index.js CHANGED
@@ -5,7 +5,6 @@ const template = document.createElement('template');
5
5
  template.innerHTML = templateHTML;
6
6
  defineCustomElement('sinch-emoji', class extends NectaryElement {
7
7
  #$img;
8
- #isConnected = false;
9
8
  constructor() {
10
9
  super();
11
10
  const shadowRoot = this.attachShadow();
@@ -13,12 +12,9 @@ defineCustomElement('sinch-emoji', class extends NectaryElement {
13
12
  this.#$img = shadowRoot.querySelector('#image');
14
13
  }
15
14
  connectedCallback() {
16
- this.#isConnected = true;
15
+ super.connectedCallback();
17
16
  this.#updateChar();
18
17
  }
19
- disconnectedCallback() {
20
- this.#isConnected = false;
21
- }
22
18
  static get observedAttributes() {
23
19
  return ['char'];
24
20
  }
@@ -39,7 +35,7 @@ defineCustomElement('sinch-emoji', class extends NectaryElement {
39
35
  return getAttribute(this, 'char', '');
40
36
  }
41
37
  #updateChar() {
42
- if (!this.#isConnected) {
38
+ if (!this.isConnected) {
43
39
  return;
44
40
  }
45
41
  this.#$img.src = getEmojiUrl(this, this.char);