@nectary/components 5.10.2 → 5.11.1

package/bundle.js

@@ -295,8 +295,8 @@ class Text extends NectaryElement {
   get inline() {
     return getBooleanAttribute(this, "inline");
   }
-  set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, "ellipsis", isEllipsis);
+  set ellipsis(isEllipsis2) {
+    updateBooleanAttribute(this, "ellipsis", isEllipsis2);
   }
   get ellipsis() {
     return getBooleanAttribute(this, "ellipsis");
@@ -364,8 +364,8 @@ class Title extends NectaryElement {
   get type() {
     return getLiteralAttribute(this, typeValues$6, "type");
   }
-  set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, "ellipsis", isEllipsis);
+  set ellipsis(isEllipsis2) {
+    updateBooleanAttribute(this, "ellipsis", isEllipsis2);
   }
   get ellipsis() {
     return getBooleanAttribute(this, "ellipsis");
@@ -3358,8 +3358,8 @@ class CardV2Title extends NectaryElement {
   set orientation(value) {
     updateAttribute(this, "orientation", value);
   }
-  set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, "ellipsis", isEllipsis);
+  set ellipsis(isEllipsis2) {
+    updateBooleanAttribute(this, "ellipsis", isEllipsis2);
   }
   get ellipsis() {
     return getBooleanAttribute(this, "ellipsis");
@@ -6110,6 +6110,7 @@ class Popover extends NectaryElement {
       "orientation",
       "open",
       "modal",
+      "allow-scroll",
       "tip",
       "aria-label",
       "aria-description"
@@ -6135,6 +6136,11 @@ class Popover extends NectaryElement {
         updateBooleanAttribute(this, name, hasTip);
         break;
       }
+      case "allow-scroll": {
+        updateAttribute(this.#$pop, name, newVal);
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
       case "modal":
       case "open": {
         updateAttribute(this.#$pop, name, newVal);
@@ -6158,6 +6164,12 @@ class Popover extends NectaryElement {
   get modal() {
     return getBooleanAttribute(this, "modal");
   }
+  set allowScroll(allow) {
+    updateBooleanAttribute(this, "allow-scroll", allow);
+  }
+  get allowScroll() {
+    return getBooleanAttribute(this, "allow-scroll");
+  }
   set open(isOpen) {
     updateBooleanAttribute(this, "open", isOpen);
   }
@@ -7520,7 +7532,7 @@ class HelpTooltip extends NectaryElement {
 }
 defineCustomElement("sinch-help-tooltip", HelpTooltip);
 const typeValues$1 = ["info", "success", "warn", "error"];
-const templateHTML$w = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
+const templateHTML$w = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}:host([type=success]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}:host([type=warn]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}:host([type=error]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}:host([type=info]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon icons-version="2" name="" id="icon"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
 const template$w = document.createElement("template");
 template$w.innerHTML = templateHTML$w;
 class InlineAlert extends NectaryElement {
@@ -7530,6 +7542,7 @@ class InlineAlert extends NectaryElement {
   #$closeSlot;
   #$actionWrapper;
   #$actionSlot;
+  #$icon;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -7540,6 +7553,7 @@ class InlineAlert extends NectaryElement {
     this.#$closeSlot = shadowRoot.querySelector('slot[name="close"]');
     this.#$actionWrapper = shadowRoot.querySelector("#action");
     this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
+    this.#$icon = shadowRoot.querySelector("#icon");
   }
   connectedCallback() {
     super.connectedCallback();
@@ -7565,7 +7579,7 @@ class InlineAlert extends NectaryElement {
     );
   }
   static get observedAttributes() {
-    return ["text", "caption"];
+    return ["text", "caption", "type", "icon"];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -7577,6 +7591,14 @@ class InlineAlert extends NectaryElement {
         updateAttribute(this.#$caption, "text", newVal);
         break;
       }
+      case "type": {
+        this.#updateDefaultIcon(newVal);
+        break;
+      }
+      case "icon": {
+        updateAttribute(this.#$icon, "name", newVal);
+        break;
+      }
     }
   }
   get type() {
@@ -7597,6 +7619,12 @@ class InlineAlert extends NectaryElement {
   set caption(value) {
     updateAttribute(this, "caption", value);
   }
+  get icon() {
+    return getAttribute(this, "icon", "");
+  }
+  set icon(value) {
+    updateAttribute(this, "icon", value);
+  }
   #onCloseSlotChange = () => {
     setClass(
       this.#$closeWrapper,
@@ -7611,6 +7639,26 @@ class InlineAlert extends NectaryElement {
       this.#$actionSlot.assignedElements().length === 0
     );
   };
+  #updateDefaultIcon = (type) => {
+    const iconValue = this.icon;
+    const hasCustomIcon = Boolean(iconValue);
+    if (!hasCustomIcon) {
+      switch (type) {
+        case "info":
+          updateAttribute(this.#$icon, "name", "circle-info");
+          break;
+        case "success":
+          updateAttribute(this.#$icon, "name", "circle-check");
+          break;
+        case "warn":
+          updateAttribute(this.#$icon, "name", "triangle-exclamation");
+          break;
+        case "error":
+          updateAttribute(this.#$icon, "name", "octagon-exclamation");
+          break;
+      }
+    }
+  };
 }
 defineCustomElement("sinch-inline-alert", InlineAlert);
 const templateHTML$v = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;background-color:var(--sinch-comp-list-color-default-background-initial);border-bottom:1px solid var(--sinch-comp-list-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-comp-list-color-default-background-hover)}</style><div id="wrapper"><slot name="content"></slot></div>';
@@ -7641,13 +7689,16 @@ class List extends NectaryElement {
   }
 }
 defineCustomElement("sinch-list", List);
-const templateHTML$t = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></div>';
+const templateHTML$t = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><nav id="wrapper"><button id="left" aria-label="Go back"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right" aria-label="Go forward"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></nav>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;
 const LAST_BTN_INDEX = NUM_BUTTONS - 1;
 const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
+const isEllipsis = (btnIndex, value, max) => {
+  return btnIndex === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || btnIndex === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX;
+};
 const template$t = document.createElement("template");
 template$t.innerHTML = templateHTML$t;
 class Pagination extends NectaryElement {
@@ -7706,24 +7757,28 @@ class Pagination extends NectaryElement {
     );
     for (let i = 0; i < this.#$buttons.length; i++) {
       const $b = this.#$buttons[i];
+      let isActive = false;
       if (value < 3) {
-        setClass($b, "active", value === i);
+        isActive = value === i;
       } else if (value >= max - MIDDLE_BTN_INDEX) {
-        setClass($b, "active", i + valueOffset === value);
+        isActive = i + valueOffset === value;
       } else {
-        setClass($b, "active", i === MIDDLE_BTN_INDEX);
+        isActive = i === MIDDLE_BTN_INDEX;
       }
+      setClass($b, "active", isActive);
+      updateAttribute($b, "aria-current", isActive ? "page" : null);
       if (max > NUM_BUTTONS) {
-        setClass(
-          $b,
-          "dots",
-          i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX
-        );
+        const ellipsis = isEllipsis(i, value, max);
+        setClass($b, "dots", ellipsis);
+        updateAttribute($b, "aria-hidden", ellipsis);
+        $b.disabled = ellipsis;
       }
       setClass($b, "hidden", i >= max);
       const btnText = $b.firstElementChild;
       if (btnText != null) {
-        btnText.textContent = i === FIRST_BTN_INDEX ? "1" : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
+        const page = i === FIRST_BTN_INDEX ? "1" : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
+        btnText.textContent = page;
+        $b.setAttribute("aria-label", `Go to page ${page}`);
       }
     }
     const isValueBad = value < 0 || value >= max;
@@ -7732,7 +7787,7 @@ class Pagination extends NectaryElement {
   }
   #onButtonClick = (e) => {
     e.stopPropagation();
-    const value = Math.max(getIntegerAttribute(this, "value", 0) - 1);
+    const value = getIntegerAttribute(this, "value", 0) - 1;
     const max = Math.max(0, getIntegerAttribute(this, "max", 0));
     if (isTargetEqual(e, this.#$left)) {
       return this.#dispatchChangeEvent(Math.max(value - 1, 0));
@@ -8028,7 +8083,7 @@ class ProgressStepper extends NectaryElement {
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case "value": {
-        this.#onValueChange(newVal);
+        this.#onValueChange(newVal, true);
         break;
       }
       case "progressvalue": {
@@ -8058,7 +8113,7 @@ class ProgressStepper extends NectaryElement {
   }
   #onSlotChange = () => {
     this.#$items = this.#$slot.assignedElements();
-    this.#onValueChange(this.value);
+    this.#onValueChange(this.value, false);
     this.#updateProgressValue();
   };
   #onOptionClick = (e) => {
@@ -8069,9 +8124,14 @@ class ProgressStepper extends NectaryElement {
       }));
     }
   };
-  #onValueChange(value) {
+  #onValueChange(value, shouldFocus) {
     for (const $item of this.#$items) {
       const isChecked = value === getAttribute($item, "value");
+      if (shouldFocus && isChecked) {
+        requestAnimationFrame(() => {
+          $item.focus();
+        });
+      }
       setProgressStepperItemChecked($item, isChecked);
     }
     this.#resetActiveDescendant();
@@ -12213,10 +12273,10 @@ class TabsOption extends NectaryElement {
   }
   connectedCallback() {
     this.setAttribute("role", "tab");
-    this.#$button.addEventListener("click", this.#onClick);
+    this.addEventListener("click", this.#onClick);
   }
   disconnectedCallback() {
-    this.#$button.removeEventListener("click", this.#onClick);
+    this.removeEventListener("click", this.#onClick);
   }
   static get observedAttributes() {
     return ["data-checked", "disabled", "text"];
@@ -13011,13 +13071,95 @@ class TimePicker extends NectaryElement {
   };
 }
 defineCustomElement("sinch-time-picker", TimePicker);
+const typeValues = ["info", "success", "warn", "error"];
+const templateHTML$2 = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
+const TIMEOUT = 5e3;
+const template$2 = document.createElement("template");
+template$2.innerHTML = templateHTML$2;
+class Toast extends NectaryElement {
+  #$text;
+  #tid = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template$2.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector("#text");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("aria-atomic", "true");
+    this.addEventListener("-timeout", this.#onTimeoutReactHandler);
+    this.#updateTimeout();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("-timeout", this.#onTimeoutReactHandler);
+    this.#clearTimeout();
+  }
+  static get observedAttributes() {
+    return ["text", "persistent"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case "text": {
+        updateAttribute(this.#$text, name, newVal);
+        break;
+      }
+      case "persistent": {
+        this.#updateTimeout();
+        break;
+      }
+    }
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, "type");
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, "type", value);
+  }
+  get text() {
+    return getAttribute(this, "text", "");
+  }
+  set text(value) {
+    updateAttribute(this, "text", value);
+  }
+  get persistent() {
+    return getBooleanAttribute(this, "persistent");
+  }
+  set persistent(isPersistent) {
+    updateBooleanAttribute(this, "persistent", isPersistent);
+  }
+  #updateTimeout() {
+    if (this.persistent) {
+      this.#clearTimeout();
+      return;
+    }
+    if (this.#tid === null) {
+      this.#tid = window.setTimeout(this.#onTimeout, TIMEOUT);
+    }
+  }
+  #onTimeout = () => {
+    this.dispatchEvent(new CustomEvent("-timeout"));
+  };
+  #clearTimeout() {
+    if (this.#tid !== null) {
+      window.clearTimeout(this.#tid);
+      this.#tid = null;
+    }
+  }
+  #onTimeoutReactHandler = (e) => {
+    getReactEventHandler(this, "on-timeout")?.(e);
+    getReactEventHandler(this, "onTimeout")?.(e);
+  };
+}
+defineCustomElement("sinch-toast", Toast);
 const originValues = ["bottom-right", "top-right"];
-const templateHTML$2 = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
+const templateHTML$1 = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list" aria-live="polite"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
-const template$2 = document.createElement("template");
-template$2.innerHTML = templateHTML$2;
+const template$1 = document.createElement("template");
+template$1.innerHTML = templateHTML$1;
 class ToastManager extends NectaryElement {
   #$slot;
   #$list;
@@ -13027,7 +13169,7 @@ class ToastManager extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template$2.content.cloneNode(true));
+    shadowRoot.appendChild(template$1.content.cloneNode(true));
     this.#$slot = shadowRoot.querySelector("slot");
     this.#$list = shadowRoot.querySelector("#list");
     this.#shouldReduceMotion = shouldReduceMotion();
@@ -13131,6 +13273,12 @@ class ToastManager extends NectaryElement {
       const cloned = cloneNode(item, true);
       const rect = item.getBoundingClientRect();
       const wrapper = document.createElement("div");
+      if (item instanceof Toast) {
+        if (item.hasAttribute("type")) {
+          const type = item.type;
+          this.#$list.setAttribute("aria-live", type === "error" || type === "warn" ? "assertive" : "polite");
+        }
+      }
       wrapper.className = "item-wrapper";
       wrapper.appendChild(cloned);
       this.#$list.appendChild(wrapper);
@@ -13188,89 +13336,6 @@ class ToastManager extends NectaryElement {
   };
 }
 defineCustomElement("sinch-toast-manager", ToastManager);
-const typeValues = ["info", "success", "warn", "error"];
-const templateHTML$1 = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
-const TIMEOUT = 5e3;
-const template$1 = document.createElement("template");
-template$1.innerHTML = templateHTML$1;
-class Toast extends NectaryElement {
-  #$text;
-  #tid = null;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template$1.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector("#text");
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("aria-atomic", "true");
-    this.setAttribute("aria-live", "polite");
-    this.addEventListener("-timeout", this.#onTimeoutReactHandler);
-    this.#updateTimeout();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("-timeout", this.#onTimeoutReactHandler);
-    this.#clearTimeout();
-  }
-  static get observedAttributes() {
-    return ["text", "persistent"];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case "text": {
-        updateAttribute(this.#$text, name, newVal);
-        break;
-      }
-      case "persistent": {
-        this.#updateTimeout();
-        break;
-      }
-    }
-  }
-  get type() {
-    return getLiteralAttribute(this, typeValues, "type");
-  }
-  set type(value) {
-    updateLiteralAttribute(this, typeValues, "type", value);
-  }
-  get text() {
-    return getAttribute(this, "text", "");
-  }
-  set text(value) {
-    updateAttribute(this, "text", value);
-  }
-  get persistent() {
-    return getBooleanAttribute(this, "persistent");
-  }
-  set persistent(isPersistent) {
-    updateBooleanAttribute(this, "persistent", isPersistent);
-  }
-  #updateTimeout() {
-    if (this.persistent) {
-      this.#clearTimeout();
-      return;
-    }
-    if (this.#tid === null) {
-      this.#tid = window.setTimeout(this.#onTimeout, TIMEOUT);
-    }
-  }
-  #onTimeout = () => {
-    this.dispatchEvent(new CustomEvent("-timeout"));
-  };
-  #clearTimeout() {
-    if (this.#tid !== null) {
-      window.clearTimeout(this.#tid);
-      this.#tid = null;
-    }
-  }
-  #onTimeoutReactHandler = (e) => {
-    getReactEventHandler(this, "on-timeout")?.(e);
-    getReactEventHandler(this, "onTimeout")?.(e);
-  };
-}
-defineCustomElement("sinch-toast", Toast);
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:8px;width:100%;height:var(--sinch-local-size);cursor:pointer;user-select:none;--sinch-local-size:20px}:host([small]) #wrapper{--sinch-local-size:16px}:host([disabled]) #wrapper{cursor:initial}#knob-container{position:relative;width:40px;height:var(--sinch-local-size);border-radius:calc(var(--sinch-local-size) * .5);background-color:var(--sinch-comp-toggle-color-default-background-initial);pointer-events:none;transition:background-color .15s ease-in-out}:host([small]) #knob-container{width:32px;height:var(--sinch-local-size)}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .15s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;position:absolute;top:0;padding:0 1px;opacity:0;transition:opacity .15s ease-in-out;user-select:none}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small]):not([checked])) #knob::after{opacity:1}:host([labeled]:not([small])[checked]) #knob::before{opacity:1}@media (prefers-reduced-motion){#knob,#knob-container,#knob::after,#knob::before{transition:none}}#outline{display:none;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:17px;pointer-events:none}:host(:focus-visible) #outline{display:block}#label{flex:1;min-width:0;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial)}</style><div id="wrapper"><div id="knob-container"><div id="outline"></div><div id="knob"></div></div><span id="label"></span></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/inline-alert/index.d.ts

@@ -4,6 +4,7 @@ import '../text';
 import '../title';
 import { NectaryElement } from '../utils';
 import type { TSinchInlineAlertType } from './types';
+import type { TSinchIcons } from '../icon';
 export * from './types';
 export declare class InlineAlert extends NectaryElement {
     #private;
@@ -18,4 +19,6 @@ export declare class InlineAlert extends NectaryElement {
     set text(value: string);
     get caption(): string;
     set caption(value: string);
+    get icon(): TSinchIcons;
+    set icon(value: TSinchIcons);
 }

package/inline-alert/index.js

@@ -5,7 +5,7 @@ import "../title/index.js";
 import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute, setClass } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { typeValues } from "./utils.js";
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}:host([type=success]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}:host([type=warn]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}:host([type=error]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}:host([type=info]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon icons-version="2" name="" id="icon"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class InlineAlert extends NectaryElement {
@@ -15,6 +15,7 @@ class InlineAlert extends NectaryElement {
   #$closeSlot;
   #$actionWrapper;
   #$actionSlot;
+  #$icon;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -25,6 +26,7 @@ class InlineAlert extends NectaryElement {
     this.#$closeSlot = shadowRoot.querySelector('slot[name="close"]');
     this.#$actionWrapper = shadowRoot.querySelector("#action");
     this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
+    this.#$icon = shadowRoot.querySelector("#icon");
   }
   connectedCallback() {
     super.connectedCallback();
@@ -50,7 +52,7 @@ class InlineAlert extends NectaryElement {
     );
   }
   static get observedAttributes() {
-    return ["text", "caption"];
+    return ["text", "caption", "type", "icon"];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -62,6 +64,14 @@ class InlineAlert extends NectaryElement {
         updateAttribute(this.#$caption, "text", newVal);
         break;
       }
+      case "type": {
+        this.#updateDefaultIcon(newVal);
+        break;
+      }
+      case "icon": {
+        updateAttribute(this.#$icon, "name", newVal);
+        break;
+      }
     }
   }
   get type() {
@@ -82,6 +92,12 @@ class InlineAlert extends NectaryElement {
   set caption(value) {
     updateAttribute(this, "caption", value);
   }
+  get icon() {
+    return getAttribute(this, "icon", "");
+  }
+  set icon(value) {
+    updateAttribute(this, "icon", value);
+  }
   #onCloseSlotChange = () => {
     setClass(
       this.#$closeWrapper,
@@ -96,6 +112,26 @@ class InlineAlert extends NectaryElement {
       this.#$actionSlot.assignedElements().length === 0
     );
   };
+  #updateDefaultIcon = (type) => {
+    const iconValue = this.icon;
+    const hasCustomIcon = Boolean(iconValue);
+    if (!hasCustomIcon) {
+      switch (type) {
+        case "info":
+          updateAttribute(this.#$icon, "name", "circle-info");
+          break;
+        case "success":
+          updateAttribute(this.#$icon, "name", "circle-check");
+          break;
+        case "warn":
+          updateAttribute(this.#$icon, "name", "triangle-exclamation");
+          break;
+        case "error":
+          updateAttribute(this.#$icon, "name", "octagon-exclamation");
+          break;
+      }
+    }
+  };
 }
 defineCustomElement("sinch-inline-alert", InlineAlert);
 export {

package/inline-alert/types.d.ts

@@ -1,9 +1,11 @@
+import type { TSinchIcons } from '../icon';
 import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
 export type TSinchInlineAlertProps = {
     type: TSinchInlineAlertType;
     text?: string | null;
     caption?: string;
+    icon?: TSinchIcons;
 };
 export type TSinchInlineAlertStyle = {
     '--sinch-comp-inline-alert-shape-radius'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.10.2",
+  "version": "5.11.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pagination/index.js

@@ -4,13 +4,16 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual, getTargetIndexInParent } from "../utils/event-target.js";
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><nav id="wrapper"><button id="left" aria-label="Go back"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right" aria-label="Go forward"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></nav>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;
 const LAST_BTN_INDEX = NUM_BUTTONS - 1;
 const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
+const isEllipsis = (btnIndex, value, max) => {
+  return btnIndex === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || btnIndex === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX;
+};
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Pagination extends NectaryElement {
@@ -69,24 +72,28 @@ class Pagination extends NectaryElement {
     );
     for (let i = 0; i < this.#$buttons.length; i++) {
       const $b = this.#$buttons[i];
+      let isActive = false;
       if (value < 3) {
-        setClass($b, "active", value === i);
+        isActive = value === i;
       } else if (value >= max - MIDDLE_BTN_INDEX) {
-        setClass($b, "active", i + valueOffset === value);
+        isActive = i + valueOffset === value;
       } else {
-        setClass($b, "active", i === MIDDLE_BTN_INDEX);
+        isActive = i === MIDDLE_BTN_INDEX;
       }
+      setClass($b, "active", isActive);
+      updateAttribute($b, "aria-current", isActive ? "page" : null);
       if (max > NUM_BUTTONS) {
-        setClass(
-          $b,
-          "dots",
-          i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX
-        );
+        const ellipsis = isEllipsis(i, value, max);
+        setClass($b, "dots", ellipsis);
+        updateAttribute($b, "aria-hidden", ellipsis);
+        $b.disabled = ellipsis;
       }
       setClass($b, "hidden", i >= max);
       const btnText = $b.firstElementChild;
       if (btnText != null) {
-        btnText.textContent = i === FIRST_BTN_INDEX ? "1" : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
+        const page = i === FIRST_BTN_INDEX ? "1" : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
+        btnText.textContent = page;
+        $b.setAttribute("aria-label", `Go to page ${page}`);
       }
     }
     const isValueBad = value < 0 || value >= max;
@@ -95,7 +102,7 @@ class Pagination extends NectaryElement {
   }
   #onButtonClick = (e) => {
     e.stopPropagation();
-    const value = Math.max(getIntegerAttribute(this, "value", 0) - 1);
+    const value = getIntegerAttribute(this, "value", 0) - 1;
     const max = Math.max(0, getIntegerAttribute(this, "max", 0));
     if (isTargetEqual(e, this.#$left)) {
       return this.#dispatchChangeEvent(Math.max(value - 1, 0));

package/popover/index.d.ts

@@ -11,6 +11,8 @@ export declare class Popover extends NectaryElement {
     attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
     set modal(isModal: boolean);
     get modal(): boolean;
+    set allowScroll(allow: boolean);
+    get allowScroll(): boolean;
     set open(isOpen: boolean);
     get open(): boolean;
     set tip(hasTip: boolean);

package/popover/index.js

@@ -64,6 +64,7 @@ class Popover extends NectaryElement {
       "orientation",
       "open",
       "modal",
+      "allow-scroll",
       "tip",
       "aria-label",
       "aria-description"
@@ -89,6 +90,11 @@ class Popover extends NectaryElement {
         updateBooleanAttribute(this, name, hasTip);
         break;
       }
+      case "allow-scroll": {
+        updateAttribute(this.#$pop, name, newVal);
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
       case "modal":
       case "open": {
         updateAttribute(this.#$pop, name, newVal);
@@ -112,6 +118,12 @@ class Popover extends NectaryElement {
   get modal() {
     return getBooleanAttribute(this, "modal");
   }
+  set allowScroll(allow) {
+    updateBooleanAttribute(this, "allow-scroll", allow);
+  }
+  get allowScroll() {
+    return getBooleanAttribute(this, "allow-scroll");
+  }
   set open(isOpen) {
     updateBooleanAttribute(this, "open", isOpen);
   }

package/popover/types.d.ts

@@ -1,6 +1,8 @@
 import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top' | 'left' | 'right';
 export type TSinchPopoverProps = {
+    /** Allow scrolling of the page when popover is open */
+    'allow-scroll'?: boolean;
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */

package/progress-stepper/index.js

@@ -43,7 +43,7 @@ class ProgressStepper extends NectaryElement {
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case "value": {
-        this.#onValueChange(newVal);
+        this.#onValueChange(newVal, true);
         break;
       }
       case "progressvalue": {
@@ -73,7 +73,7 @@ class ProgressStepper extends NectaryElement {
   }
   #onSlotChange = () => {
     this.#$items = this.#$slot.assignedElements();
-    this.#onValueChange(this.value);
+    this.#onValueChange(this.value, false);
     this.#updateProgressValue();
   };
   #onOptionClick = (e) => {
@@ -84,9 +84,14 @@ class ProgressStepper extends NectaryElement {
       }));
     }
   };
-  #onValueChange(value) {
+  #onValueChange(value, shouldFocus) {
     for (const $item of this.#$items) {
       const isChecked = value === getAttribute($item, "value");
+      if (shouldFocus && isChecked) {
+        requestAnimationFrame(() => {
+          $item.focus();
+        });
+      }
       setProgressStepperItemChecked($item, isChecked);
     }
     this.#resetActiveDescendant();

package/tabs-option/index.js

@@ -16,10 +16,10 @@ class TabsOption extends NectaryElement {
   }
   connectedCallback() {
     this.setAttribute("role", "tab");
-    this.#$button.addEventListener("click", this.#onClick);
+    this.addEventListener("click", this.#onClick);
   }
   disconnectedCallback() {
-    this.#$button.removeEventListener("click", this.#onClick);
+    this.removeEventListener("click", this.#onClick);
   }
   static get observedAttributes() {
     return ["data-checked", "disabled", "text"];

package/toast/index.js

@@ -20,7 +20,6 @@ class Toast extends NectaryElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("aria-atomic", "true");
-    this.setAttribute("aria-live", "polite");
     this.addEventListener("-timeout", this.#onTimeoutReactHandler);
     this.#updateTimeout();
   }

package/toast-manager/index.js

@@ -1,10 +1,11 @@
 import "../title/index.js";
 import "../text/index.js";
+import { Toast } from "../toast/index.js";
 import { shouldReduceMotion, getLiteralAttribute, updateLiteralAttribute, cloneNode } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { originValues } from "./utils.js";
-const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
+const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list" aria-live="polite"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
@@ -123,6 +124,12 @@ class ToastManager extends NectaryElement {
       const cloned = cloneNode(item, true);
       const rect = item.getBoundingClientRect();
       const wrapper = document.createElement("div");
+      if (item instanceof Toast) {
+        if (item.hasAttribute("type")) {
+          const type = item.type;
+          this.#$list.setAttribute("aria-live", type === "error" || type === "warn" ? "assertive" : "polite");
+        }
+      }
       wrapper.className = "item-wrapper";
       wrapper.appendChild(cloned);
       this.#$list.appendChild(wrapper);