@nectary/components 5.0.0 → 5.0.2

package/bundle.js

@@ -141,7 +141,7 @@ class NectaryElementBase extends HTMLElement {
     this._isGlobal = value;
   }
 }
-const version = "5.0.0";
+const version = "5.0.1";
 const pkg = {
   version
 };
@@ -2476,6 +2476,8 @@ class Checkbox extends NectaryElement {
     switch (name) {
       case "text": {
         updateAttribute(this.#$label, "text", newVal);
+        updateAttribute(this.#$label, "aria-label", newVal);
+        updateAttribute(this, "aria-label", newVal);
         break;
       }
       case "checked": {
@@ -2628,6 +2630,8 @@ class Chip extends NectaryElement {
       }
       case "text": {
         this.#$text.textContent = newVal;
+        updateAttribute(this, "aria-label", newVal);
+        updateAttribute(this.#$button, "aria-label", `Delete ${newVal}`);
         break;
       }
       case "small": {
@@ -5726,6 +5730,8 @@ class Popover extends NectaryElement {
   #$tip;
   #controller = null;
   #resizeObserver = null;
+  #$targetSlot;
+  #$contentSlot;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -5733,6 +5739,8 @@ class Popover extends NectaryElement {
     this.#$pop = shadowRoot.querySelector("#pop");
     this.#$content = shadowRoot.querySelector("#content");
     this.#$tip = shadowRoot.querySelector("#tip");
+    this.#$targetSlot = shadowRoot.querySelector('slot[name="target"]');
+    this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
   }
   connectedCallback() {
     this.#controller = new AbortController();
@@ -5741,6 +5749,18 @@ class Popover extends NectaryElement {
     this.#$pop.addEventListener("-close", this.#onPopClose, { signal });
     subscribeContext(this.#$content, "visibility", this.#onContextVisibility, signal);
     updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
+    const slottedTarget = this.#getFirstAssignedElementInSlot(this.#$targetSlot);
+    const slottedContent = this.#getFirstAssignedElementInSlot(this.#$contentSlot);
+    const popoverIdReference = `popover-${(/* @__PURE__ */ new Date()).getMilliseconds()}-${Math.round(100 * Math.random())}`;
+    if (slottedContent != null && slottedTarget != null) {
+      updateAttribute(slottedContent, "aria-lablledby", popoverIdReference);
+    }
+    if (slottedTarget != null) {
+      updateAttribute(slottedTarget, "aria-controls", popoverIdReference);
+      updateAttribute(slottedTarget, "aria-haspopup", true);
+      const isOpen = this.getAttribute("open") ?? false;
+      updateAttribute(slottedTarget, "aria-expanded", isOpen);
+    }
     this.#resizeObserver = new ResizeObserver(() => {
       if (this.#$pop.open) {
         this.#updateContentMaxWidth();
@@ -5788,6 +5808,10 @@ class Popover extends NectaryElement {
       case "open": {
         updateAttribute(this.#$pop, name, newVal);
         updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        const slottedContent = this.#getFirstAssignedElementInSlot(this.#$targetSlot);
+        if (slottedContent != null) {
+          updateAttribute(slottedContent, "aria-expanded", isAttrTrue(newVal));
+        }
         break;
       }
       case "aria-label":
@@ -5827,6 +5851,16 @@ class Popover extends NectaryElement {
   get popoverRect() {
     return this.#$pop.popoverRect;
   }
+  #getFirstAssignedElementInSlot(slot) {
+    if (slot === null) {
+      return null;
+    }
+    const elements = slot != null ? slot.assignedElements() : null;
+    if (elements === null) {
+      return null;
+    }
+    return elements[0];
+  }
   #onPopClose = () => {
     this.#dispatchCloseEvent();
   };
@@ -6628,7 +6662,7 @@ const doFilesSatisfySize = (files, size) => {
     return file.size <= size;
   });
 };
-const templateHTML$E = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
+const templateHTML$E = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  min-height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
 const template$E = document.createElement("template");
 template$E.innerHTML = templateHTML$E;
 class FileDrop extends NectaryElement {
@@ -7821,6 +7855,7 @@ class Progress extends NectaryElement {
         this.#$bar.style.width = `${int}%`;
         this.#$text.textContent = Intl.NumberFormat(navigator.language, { style: "percent" }).format(int / 100);
         this.setAttribute("valuenow", int !== null ? String(int) : "0");
+        this.setAttribute("aria-valuenow", int !== null ? String(int) : "0");
         break;
       }
       case "detailed": {
@@ -10884,6 +10919,7 @@ class SelectMenuOption extends NectaryElement {
       }
       case "disabled": {
         updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
+        updateExplicitBooleanAttribute(this, "aria-disabled", isAttrTrue(newVal));
         break;
       }
     }

package/checkbox/index.js

@@ -72,6 +72,8 @@ class Checkbox extends NectaryElement {
     switch (name) {
       case "text": {
         updateAttribute(this.#$label, "text", newVal);
+        updateAttribute(this.#$label, "aria-label", newVal);
+        updateAttribute(this, "aria-label", newVal);
         break;
       }
       case "checked": {

package/chip/index.js

@@ -1,6 +1,6 @@
 import "../text/index.js";
 import "../icon/index.js";
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, getAttribute, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getChipColorBg, getChipColorFg } from "./utils.js";
@@ -52,6 +52,8 @@ class Chip extends NectaryElement {
       }
       case "text": {
         this.#$text.textContent = newVal;
+        updateAttribute(this, "aria-label", newVal);
+        updateAttribute(this.#$button, "aria-label", `Delete ${newVal}`);
         break;
       }
       case "small": {

package/file-drop/index.js

@@ -4,7 +4,7 @@ import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getBo
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { areItemsAccepted, areFilesAccepted, doFilesSatisfySize } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
+const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  min-height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class FileDrop extends NectaryElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": ">=1.4.0 <2.0.0"
+    "@nectary/theme-base": "1.5.0"
   }
 }

package/popover/index.js

@@ -15,6 +15,8 @@ class Popover extends NectaryElement {
   #$tip;
   #controller = null;
   #resizeObserver = null;
+  #$targetSlot;
+  #$contentSlot;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -22,6 +24,8 @@ class Popover extends NectaryElement {
     this.#$pop = shadowRoot.querySelector("#pop");
     this.#$content = shadowRoot.querySelector("#content");
     this.#$tip = shadowRoot.querySelector("#tip");
+    this.#$targetSlot = shadowRoot.querySelector('slot[name="target"]');
+    this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
   }
   connectedCallback() {
     this.#controller = new AbortController();
@@ -30,6 +34,18 @@ class Popover extends NectaryElement {
     this.#$pop.addEventListener("-close", this.#onPopClose, { signal });
     subscribeContext(this.#$content, "visibility", this.#onContextVisibility, signal);
     updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
+    const slottedTarget = this.#getFirstAssignedElementInSlot(this.#$targetSlot);
+    const slottedContent = this.#getFirstAssignedElementInSlot(this.#$contentSlot);
+    const popoverIdReference = `popover-${(/* @__PURE__ */ new Date()).getMilliseconds()}-${Math.round(100 * Math.random())}`;
+    if (slottedContent != null && slottedTarget != null) {
+      updateAttribute(slottedContent, "aria-lablledby", popoverIdReference);
+    }
+    if (slottedTarget != null) {
+      updateAttribute(slottedTarget, "aria-controls", popoverIdReference);
+      updateAttribute(slottedTarget, "aria-haspopup", true);
+      const isOpen = this.getAttribute("open") ?? false;
+      updateAttribute(slottedTarget, "aria-expanded", isOpen);
+    }
     this.#resizeObserver = new ResizeObserver(() => {
       if (this.#$pop.open) {
         this.#updateContentMaxWidth();
@@ -77,6 +93,10 @@ class Popover extends NectaryElement {
       case "open": {
         updateAttribute(this.#$pop, name, newVal);
         updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        const slottedContent = this.#getFirstAssignedElementInSlot(this.#$targetSlot);
+        if (slottedContent != null) {
+          updateAttribute(slottedContent, "aria-expanded", isAttrTrue(newVal));
+        }
         break;
       }
       case "aria-label":
@@ -116,6 +136,16 @@ class Popover extends NectaryElement {
   get popoverRect() {
     return this.#$pop.popoverRect;
   }
+  #getFirstAssignedElementInSlot(slot) {
+    if (slot === null) {
+      return null;
+    }
+    const elements = slot != null ? slot.assignedElements() : null;
+    if (elements === null) {
+      return null;
+    }
+    return elements[0];
+  }
   #onPopClose = () => {
     this.#dispatchCloseEvent();
   };

package/progress/index.js

@@ -27,6 +27,7 @@ class Progress extends NectaryElement {
         this.#$bar.style.width = `${int}%`;
         this.#$text.textContent = Intl.NumberFormat(navigator.language, { style: "percent" }).format(int / 100);
         this.setAttribute("valuenow", int !== null ? String(int) : "0");
+        this.setAttribute("aria-valuenow", int !== null ? String(int) : "0");
         break;
       }
       case "detailed": {

package/select-menu-option/index.js

@@ -45,6 +45,7 @@ class SelectMenuOption extends NectaryElement {
       }
       case "disabled": {
         updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
+        updateExplicitBooleanAttribute(this, "aria-disabled", isAttrTrue(newVal));
         break;
       }
     }

package/utils/element.js

@@ -1,7 +1,7 @@
 import { NectaryElementBase, sinchElementNameToBase } from "./shared/nectary-element-base.js";
 import { getConstructor } from "./shared/global-elements-store.js";
 import { COMPONENTS_STORE_KEY } from "./global-components-constants.js";
-const version = "5.0.0";
+const version = "5.0.1";
 const pkg = {
   version
 };