@nectary/components 5.0.0 → 5.0.1

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();
   };
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "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
 };