@nectary/components 5.37.8 → 5.38.1

package/bundle.js

@@ -8028,13 +8028,14 @@ class EmojiPicker extends NectaryElement {
   }
 }
 defineCustomElement("sinch-emoji-picker", EmojiPicker);
-const templateHTML$M = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const templateHTML$M = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#optional:empty{display:none}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><sinch-tooltip id="optional-tooltip" allow-scroll><span id="optional"></span></sinch-tooltip></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template$M = document.createElement("template");
 template$M.innerHTML = templateHTML$M;
 class Field extends NectaryElement {
   topSection;
   #$label;
   #$optionalText;
+  #$optionalTooltip;
   #$additionalText;
   #$invalidText;
   #$inputSlot;
@@ -8048,6 +8049,7 @@ class Field extends NectaryElement {
     this.topSection = shadowRoot.querySelector("#top");
     this.#$label = shadowRoot.querySelector("#label");
     this.#$optionalText = shadowRoot.querySelector("#optional");
+    this.#$optionalTooltip = shadowRoot.querySelector("#optional-tooltip");
     this.#$additionalText = shadowRoot.querySelector("#additional");
     this.#$invalidText = shadowRoot.querySelector("#invalid");
     this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
@@ -8071,6 +8073,7 @@ class Field extends NectaryElement {
     return [
       "label",
       "optionaltext",
+      "optionaltooltip",
       "additionaltext",
       "invalidtext",
       "disabled"
@@ -8091,6 +8094,10 @@ class Field extends NectaryElement {
         this.#$optionalText.textContent = newVal;
         break;
       }
+      case "optionaltooltip": {
+        updateAttribute(this.#$optionalTooltip, "text", newVal);
+        break;
+      }
       case "additionaltext": {
         this.#$additionalText.textContent = newVal;
         break;
@@ -8121,6 +8128,12 @@ class Field extends NectaryElement {
   get optionalText() {
     return getAttribute(this, "optionaltext");
   }
+  set optionalTooltip(value) {
+    updateAttribute(this, "optionaltooltip", value);
+  }
+  get optionalTooltip() {
+    return getAttribute(this, "optionaltooltip");
+  }
   set additionalText(value) {
     updateAttribute(this, "additionaltext", value);
   }
@@ -15880,7 +15893,7 @@ class Toast extends NectaryElement {
     this.#clearTimeout();
   }
   static get observedAttributes() {
-    return ["text", "persistent"];
+    return ["text", "type", "persistent"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -15888,6 +15901,7 @@ class Toast extends NectaryElement {
         updateAttribute(this.#$text, name, newVal);
         break;
       }
+      case "type":
       case "persistent": {
         this.#updateTimeout();
         break;
@@ -15913,7 +15927,8 @@ class Toast extends NectaryElement {
     updateBooleanAttribute(this, "persistent", isPersistent);
   }
   #updateTimeout() {
-    if (this.persistent) {
+    const type = getAttribute(this, "type");
+    if (this.persistent || type === "error" || type === "warn") {
       this.#clearTimeout();
       return;
     }
@@ -15937,7 +15952,7 @@ class Toast extends NectaryElement {
 }
 defineCustomElement("sinch-toast", Toast);
 const originValues = ["bottom-right", "top-right"];
-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 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" role="status" aria-live="polite" aria-atomic="false"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
@@ -16048,6 +16063,27 @@ class ToastManager extends NectaryElement {
       this.#onAnimateRemove(item, removeIndex);
       ++removeIndex;
     }
+    let hasNewItems = false;
+    let isAssertive = false;
+    for (const item of slotItems) {
+      if (this.#map.has(item)) {
+        continue;
+      }
+      hasNewItems = true;
+      if (item instanceof Toast) {
+        const type = item.type;
+        if (type === "error" || type === "warn") {
+          isAssertive = true;
+        }
+      }
+    }
+    if (slotItems.length === 0) {
+      this.#$list.setAttribute("role", "status");
+      this.#$list.setAttribute("aria-live", "polite");
+    } else if (hasNewItems) {
+      this.#$list.setAttribute("role", isAssertive ? "alert" : "status");
+      this.#$list.setAttribute("aria-live", isAssertive ? "assertive" : "polite");
+    }
     let addIndex = 0;
     for (const item of slotItems) {
       if (this.#map.has(item)) {
@@ -16056,12 +16092,6 @@ 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);

package/field/index.d.ts

@@ -1,3 +1,4 @@
+import '../tooltip';
 import { NectaryElement } from '../utils';
 export * from './types';
 export declare class Field extends NectaryElement {
@@ -13,6 +14,8 @@ export declare class Field extends NectaryElement {
     get label(): string | null;
     set optionalText(value: string | null);
     get optionalText(): string | null;
+    set optionalTooltip(value: string | null);
+    get optionalTooltip(): string | null;
     set additionalText(value: string | null);
     get additionalText(): string | null;
     set invalidText(value: string | null);

package/field/index.js

@@ -1,13 +1,15 @@
+import "../tooltip/index.js";
 import { getAttribute, setClass, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getFirstSlotElement } from "../utils/slot.js";
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#optional:empty{display:none}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><sinch-tooltip id="optional-tooltip" allow-scroll><span id="optional"></span></sinch-tooltip></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Field extends NectaryElement {
   topSection;
   #$label;
   #$optionalText;
+  #$optionalTooltip;
   #$additionalText;
   #$invalidText;
   #$inputSlot;
@@ -21,6 +23,7 @@ class Field extends NectaryElement {
     this.topSection = shadowRoot.querySelector("#top");
     this.#$label = shadowRoot.querySelector("#label");
     this.#$optionalText = shadowRoot.querySelector("#optional");
+    this.#$optionalTooltip = shadowRoot.querySelector("#optional-tooltip");
     this.#$additionalText = shadowRoot.querySelector("#additional");
     this.#$invalidText = shadowRoot.querySelector("#invalid");
     this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
@@ -44,6 +47,7 @@ class Field extends NectaryElement {
     return [
       "label",
       "optionaltext",
+      "optionaltooltip",
       "additionaltext",
       "invalidtext",
       "disabled"
@@ -64,6 +68,10 @@ class Field extends NectaryElement {
         this.#$optionalText.textContent = newVal;
         break;
       }
+      case "optionaltooltip": {
+        updateAttribute(this.#$optionalTooltip, "text", newVal);
+        break;
+      }
       case "additionaltext": {
         this.#$additionalText.textContent = newVal;
         break;
@@ -94,6 +102,12 @@ class Field extends NectaryElement {
   get optionalText() {
     return getAttribute(this, "optionaltext");
   }
+  set optionalTooltip(value) {
+    updateAttribute(this, "optionaltooltip", value);
+  }
+  get optionalTooltip() {
+    return getAttribute(this, "optionaltooltip");
+  }
   set additionalText(value) {
     updateAttribute(this, "additionaltext", value);
   }

package/field/types.d.ts

@@ -4,6 +4,8 @@ export type TSinchFieldProps = {
     label?: string;
     /** Optional text */
     optionalText?: string;
+    /** Tooltip text for optional text */
+    optionalTooltip?: string;
     /** Additional text */
     additionalText?: string;
     /** Invalid text, controls the overall invalid state of the text field */

package/package.json

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

package/toast/index.js

@@ -29,7 +29,7 @@ class Toast extends NectaryElement {
     this.#clearTimeout();
   }
   static get observedAttributes() {
-    return ["text", "persistent"];
+    return ["text", "type", "persistent"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -37,6 +37,7 @@ class Toast extends NectaryElement {
         updateAttribute(this.#$text, name, newVal);
         break;
       }
+      case "type":
       case "persistent": {
         this.#updateTimeout();
         break;
@@ -62,7 +63,8 @@ class Toast extends NectaryElement {
     updateBooleanAttribute(this, "persistent", isPersistent);
   }
   #updateTimeout() {
-    if (this.persistent) {
+    const type = getAttribute(this, "type");
+    if (this.persistent || type === "error" || type === "warn") {
       this.#clearTimeout();
       return;
     }

package/toast/types.d.ts

@@ -5,7 +5,7 @@ export type TSinchToastProps = {
     type: TSinchToastType;
     /** Text */
     text: string;
-    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    /** Persistent, i.e. doesn't automatically disappear after 5s. Error and warn toasts are always persistent. */
     persistent?: boolean;
 };
 export type TSinchToastEvents = {

package/toast-manager/index.js

@@ -5,7 +5,7 @@ import { shouldReduceMotion, getLiteralAttribute, updateLiteralAttribute, cloneN
 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" aria-live="polite"></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" role="status" aria-live="polite" aria-atomic="false"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
@@ -116,6 +116,27 @@ class ToastManager extends NectaryElement {
       this.#onAnimateRemove(item, removeIndex);
       ++removeIndex;
     }
+    let hasNewItems = false;
+    let isAssertive = false;
+    for (const item of slotItems) {
+      if (this.#map.has(item)) {
+        continue;
+      }
+      hasNewItems = true;
+      if (item instanceof Toast) {
+        const type = item.type;
+        if (type === "error" || type === "warn") {
+          isAssertive = true;
+        }
+      }
+    }
+    if (slotItems.length === 0) {
+      this.#$list.setAttribute("role", "status");
+      this.#$list.setAttribute("aria-live", "polite");
+    } else if (hasNewItems) {
+      this.#$list.setAttribute("role", isAssertive ? "alert" : "status");
+      this.#$list.setAttribute("aria-live", isAssertive ? "assertive" : "polite");
+    }
     let addIndex = 0;
     for (const item of slotItems) {
       if (this.#map.has(item)) {
@@ -124,12 +145,6 @@ 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);