@nectary/components 5.14.2 → 5.14.4

package/bundle.js

@@ -5390,8 +5390,7 @@ class Input extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    const role = this.type === "number" ? "spinbutton" : "textbox";
-    this.#setRole(role);
+    this.#updateInputRole();
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }
@@ -5479,6 +5478,7 @@ class Input extends NectaryElement {
           if (min !== null && !isNaN(parseFloat(min))) {
             this.#$input.value = min;
             setFormValue(this.#internals, min);
+            this.#updateAriaValueAttributes();
             this.dispatchEvent(
               new CustomEvent("-change", {
                 detail: min
@@ -5494,6 +5494,7 @@ class Input extends NectaryElement {
           if (max !== null && !isNaN(parseFloat(max))) {
             this.#$input.value = max;
             setFormValue(this.#internals, max);
+            this.#updateAriaValueAttributes();
             this.dispatchEvent(
               new CustomEvent("-change", {
                 detail: max
@@ -5539,8 +5540,8 @@ class Input extends NectaryElement {
       case "type": {
         updateLiteralAttribute(this.#$input, inputTypes, "type", newVal);
         updateAttribute(this.#$input, "spellcheck", newVal === "password" ? "false" : null);
-        const role = newVal === "number" ? "spinbutton" : "textbox";
-        this.#setRole(role);
+        this.#updateInputRole();
+        this.#updateAriaValueAttributes();
         if (newVal === "number") {
           this.#resetAriaPlaceholder();
         }
@@ -5568,6 +5569,7 @@ class Input extends NectaryElement {
         if (nextVal !== prevVal) {
           this.#$input.value = nextVal;
           setFormValue(this.#internals, nextVal);
+          this.#updateAriaValueAttributes();
           if (isElementFocused(this.#$input)) {
             this.#setSelectionRange(this.#selectionEnd, this.#selectionEnd);
           }
@@ -5587,9 +5589,9 @@ class Input extends NectaryElement {
           return;
         }
         const isInvalid = isAttrTrue(newVal);
-        this.ariaInvalid = isInvalid.toString();
-        this.#$input.ariaInvalid = this.ariaInvalid;
-        this.#internals.ariaInvalid = this.ariaInvalid;
+        const ariaInvalidValue = isInvalid.toString();
+        this.#$input.ariaInvalid = ariaInvalidValue;
+        this.#internals.ariaInvalid = ariaInvalidValue;
         updateBooleanAttribute(this, name, isInvalid);
         break;
       }
@@ -5627,11 +5629,11 @@ class Input extends NectaryElement {
       case "min":
       case "step": {
         updateAttribute(this.#$input, name, newVal);
+        this.#updateAriaValueAttributes();
         break;
       }
       case "aria-label": {
         this.#$input.ariaLabel = newVal;
-        this.#internals.ariaLabel = newVal;
         break;
       }
     }
@@ -6028,8 +6030,7 @@ class Input extends NectaryElement {
       const value = this.placeholder;
       this.#$input.placeholder = value ?? "";
       if (this.type !== "number") {
-        this.#internals.ariaPlaceholder = value ?? "";
-        updateAttribute(this, "aria-placeholder", value);
+        this.#$input.ariaPlaceholder = value ?? "";
       }
     } else {
       this.#$input.placeholder = "";
@@ -6037,8 +6038,7 @@ class Input extends NectaryElement {
     }
   }
   #resetAriaPlaceholder() {
-    updateAttribute(this, "aria-placeholder", null);
-    this.#internals.ariaPlaceholder = "";
+    this.#$input.ariaPlaceholder = "";
   }
   #onIconSlotChange = () => {
     const isEmpty = this.#$iconSlot.assignedElements().length === 0;
@@ -6091,10 +6091,40 @@ class Input extends NectaryElement {
   #onWheelReactHandler = (e) => {
     getReactEventHandler(this, "on-wheel")?.(e);
   };
-  #setRole = (role) => {
-    this.setAttribute("role", role);
-    this.#internals.role = role;
-  };
+  #updateInputRole() {
+    if (this.type === "number") {
+      this.#$input.setAttribute("role", "spinbutton");
+      this.#updateAriaValueAttributes();
+    } else {
+      this.#$input.removeAttribute("role");
+      this.#$input.removeAttribute("aria-valuenow");
+      this.#$input.removeAttribute("aria-valuemin");
+      this.#$input.removeAttribute("aria-valuemax");
+    }
+  }
+  #updateAriaValueAttributes() {
+    if (this.type !== "number") {
+      return;
+    }
+    const value = this.#$input.value;
+    const min = getAttribute(this, "min");
+    const max = getAttribute(this, "max");
+    if (value !== "") {
+      this.#$input.setAttribute("aria-valuenow", value);
+    } else {
+      this.#$input.removeAttribute("aria-valuenow");
+    }
+    if (min !== null && !isNaN(parseFloat(min))) {
+      this.#$input.setAttribute("aria-valuemin", min);
+    } else {
+      this.#$input.removeAttribute("aria-valuemin");
+    }
+    if (max !== null && !isNaN(parseFloat(max))) {
+      this.#$input.setAttribute("aria-valuemax", max);
+    } else {
+      this.#$input.removeAttribute("aria-valuemax");
+    }
+  }
 }
 defineCustomElement("sinch-input", Input);
 const orientationValues = [
@@ -12847,7 +12877,7 @@ const getShortestCssDeg = (currentDeg, nextDeg) => {
   }
   return currentDeg + diff;
 };
-const templateHTML$3 = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+const templateHTML$3 = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" role="group" aria-label="Time picker clock face"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0" role="slider" aria-label="Hour selector" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0"></div><div id="needle-minute" tabindex="0" role="slider" aria-label="Minute selector" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 const template$3 = document.createElement("template");
 template$3.innerHTML = templateHTML$3;
 const PICKER_RADIUS = 216 / 2;
@@ -12905,6 +12935,11 @@ class TimePicker extends NectaryElement {
       el.className = "digit-hour-12";
       el.style.transform = `translate(${x}px, ${y}px)`;
       el.textContent = hourDisplayValue;
+      el.setAttribute("role", "button");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("aria-label", `${hourDisplayValue} o'clock`);
+      el.addEventListener("click", () => this.#onHourDigitClick(i));
+      el.addEventListener("keydown", (e) => this.#onDigitKeydown(e, () => this.#onHourDigitClick(i)));
       hours12Frag.appendChild(el);
     }
     this.#$pickerHours.appendChild(hours12Frag);
@@ -12918,6 +12953,11 @@ class TimePicker extends NectaryElement {
       el.className = "digit-hour-24";
       el.style.transform = `translate(${x}px, ${y}px)`;
       el.textContent = hourDisplayValue;
+      el.setAttribute("role", "button");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("aria-label", `${hourDisplayValue} o'clock`);
+      el.addEventListener("click", () => this.#onHourDigitClick(i));
+      el.addEventListener("keydown", (e) => this.#onDigitKeydown(e, () => this.#onHourDigitClick(i)));
       hours24Frag.appendChild(el);
     }
     this.#$pickerHours.appendChild(hours24Frag);
@@ -12930,6 +12970,11 @@ class TimePicker extends NectaryElement {
       el.className = "digit-minute";
       el.style.transform = `translate(${x}px, ${y}px)`;
       el.textContent = stringifyMinute(i);
+      el.setAttribute("role", "button");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("aria-label", `${i} minutes`);
+      el.addEventListener("click", () => this.#onMinuteDigitClick(i));
+      el.addEventListener("keydown", (e) => this.#onDigitKeydown(e, () => this.#onMinuteDigitClick(i)));
       minutesFrag.appendChild(el);
     }
     this.#$pickerMinutes.appendChild(minutesFrag);
@@ -12966,8 +13011,11 @@ class TimePicker extends NectaryElement {
         break;
       }
       case "ampm": {
+        const isAMPM = isAttrTrue(newVal);
+        updateBooleanAttribute(this, "ampm", isAMPM);
+        const hourMax = isAMPM ? 12 : 23;
+        updateAttribute(this.#$needleHour, "aria-valuemax", hourMax);
         this.#render();
-        updateBooleanAttribute(this, "ampm", isAttrTrue(newVal));
         break;
       }
       case "submit-aria-label": {
@@ -13071,6 +13119,10 @@ class TimePicker extends NectaryElement {
     updateAttribute(this.#$headerHours, "aria-valuetext", this.#hour);
     updateAttribute(this.#$headerMinutes, "aria-valuenow", this.#minute);
     updateAttribute(this.#$headerMinutes, "aria-valuetext", this.#minute);
+    updateAttribute(this.#$needleHour, "aria-valuenow", this.#hour);
+    updateAttribute(this.#$needleHour, "aria-valuetext", `${this.#hour} o'clock`);
+    updateAttribute(this.#$needleMinute, "aria-valuenow", this.#minute);
+    updateAttribute(this.#$needleMinute, "aria-valuetext", `${this.#minute} minutes`);
   }
   #selectHour(is24) {
     const $hours = this.#$pickerHours.children;
@@ -13168,6 +13220,20 @@ class TimePicker extends NectaryElement {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onHourDigitClick = (hour) => {
+    this.#hour = hour;
+    this.#render();
+  };
+  #onMinuteDigitClick = (minute) => {
+    this.#minute = minute;
+    this.#render();
+  };
+  #onDigitKeydown = (e, callback) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      callback();
+    }
+  };
 }
 defineCustomElement("sinch-time-picker", TimePicker);
 const typeValues = ["info", "success", "warn", "error"];

package/input/index.js

@@ -48,8 +48,7 @@ class Input extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    const role = this.type === "number" ? "spinbutton" : "textbox";
-    this.#setRole(role);
+    this.#updateInputRole();
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }
@@ -137,6 +136,7 @@ class Input extends NectaryElement {
           if (min !== null && !isNaN(parseFloat(min))) {
             this.#$input.value = min;
             setFormValue(this.#internals, min);
+            this.#updateAriaValueAttributes();
             this.dispatchEvent(
               new CustomEvent("-change", {
                 detail: min
@@ -152,6 +152,7 @@ class Input extends NectaryElement {
           if (max !== null && !isNaN(parseFloat(max))) {
             this.#$input.value = max;
             setFormValue(this.#internals, max);
+            this.#updateAriaValueAttributes();
             this.dispatchEvent(
               new CustomEvent("-change", {
                 detail: max
@@ -197,8 +198,8 @@ class Input extends NectaryElement {
       case "type": {
         updateLiteralAttribute(this.#$input, inputTypes, "type", newVal);
         updateAttribute(this.#$input, "spellcheck", newVal === "password" ? "false" : null);
-        const role = newVal === "number" ? "spinbutton" : "textbox";
-        this.#setRole(role);
+        this.#updateInputRole();
+        this.#updateAriaValueAttributes();
         if (newVal === "number") {
           this.#resetAriaPlaceholder();
         }
@@ -226,6 +227,7 @@ class Input extends NectaryElement {
         if (nextVal !== prevVal) {
           this.#$input.value = nextVal;
           setFormValue(this.#internals, nextVal);
+          this.#updateAriaValueAttributes();
           if (isElementFocused(this.#$input)) {
             this.#setSelectionRange(this.#selectionEnd, this.#selectionEnd);
           }
@@ -245,9 +247,9 @@ class Input extends NectaryElement {
           return;
         }
         const isInvalid = isAttrTrue(newVal);
-        this.ariaInvalid = isInvalid.toString();
-        this.#$input.ariaInvalid = this.ariaInvalid;
-        this.#internals.ariaInvalid = this.ariaInvalid;
+        const ariaInvalidValue = isInvalid.toString();
+        this.#$input.ariaInvalid = ariaInvalidValue;
+        this.#internals.ariaInvalid = ariaInvalidValue;
         updateBooleanAttribute(this, name, isInvalid);
         break;
       }
@@ -285,11 +287,11 @@ class Input extends NectaryElement {
       case "min":
       case "step": {
         updateAttribute(this.#$input, name, newVal);
+        this.#updateAriaValueAttributes();
         break;
       }
       case "aria-label": {
         this.#$input.ariaLabel = newVal;
-        this.#internals.ariaLabel = newVal;
         break;
       }
     }
@@ -686,8 +688,7 @@ class Input extends NectaryElement {
       const value = this.placeholder;
       this.#$input.placeholder = value ?? "";
       if (this.type !== "number") {
-        this.#internals.ariaPlaceholder = value ?? "";
-        updateAttribute(this, "aria-placeholder", value);
+        this.#$input.ariaPlaceholder = value ?? "";
       }
     } else {
       this.#$input.placeholder = "";
@@ -695,8 +696,7 @@ class Input extends NectaryElement {
     }
   }
   #resetAriaPlaceholder() {
-    updateAttribute(this, "aria-placeholder", null);
-    this.#internals.ariaPlaceholder = "";
+    this.#$input.ariaPlaceholder = "";
   }
   #onIconSlotChange = () => {
     const isEmpty = this.#$iconSlot.assignedElements().length === 0;
@@ -749,10 +749,40 @@ class Input extends NectaryElement {
   #onWheelReactHandler = (e) => {
     getReactEventHandler(this, "on-wheel")?.(e);
   };
-  #setRole = (role) => {
-    this.setAttribute("role", role);
-    this.#internals.role = role;
-  };
+  #updateInputRole() {
+    if (this.type === "number") {
+      this.#$input.setAttribute("role", "spinbutton");
+      this.#updateAriaValueAttributes();
+    } else {
+      this.#$input.removeAttribute("role");
+      this.#$input.removeAttribute("aria-valuenow");
+      this.#$input.removeAttribute("aria-valuemin");
+      this.#$input.removeAttribute("aria-valuemax");
+    }
+  }
+  #updateAriaValueAttributes() {
+    if (this.type !== "number") {
+      return;
+    }
+    const value = this.#$input.value;
+    const min = getAttribute(this, "min");
+    const max = getAttribute(this, "max");
+    if (value !== "") {
+      this.#$input.setAttribute("aria-valuenow", value);
+    } else {
+      this.#$input.removeAttribute("aria-valuenow");
+    }
+    if (min !== null && !isNaN(parseFloat(min))) {
+      this.#$input.setAttribute("aria-valuemin", min);
+    } else {
+      this.#$input.removeAttribute("aria-valuemin");
+    }
+    if (max !== null && !isNaN(parseFloat(max))) {
+      this.#$input.setAttribute("aria-valuemax", max);
+    } else {
+      this.#$input.removeAttribute("aria-valuemax");
+    }
+  }
 }
 defineCustomElement("sinch-input", Input);
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.14.2",
+  "version": "5.14.4",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.3.4"
+    "@nectary/assets": "3.4.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package/time-picker/index.js

@@ -1,12 +1,12 @@
 import "../icon/index.js";
 import "../segmented-control/index.js";
 import "../segmented-control-option/index.js";
-import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getAttribute, getBooleanAttribute, setClass } from "../utils/dom.js";
+import { isAttrEqual, updateAttribute, updateBooleanAttribute, getAttribute, getBooleanAttribute, setClass, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { stringifyHourFace, stringifyMinute, parseTime, hourToIndex, stringifyHour, getNeedleRotationDeg, getShortestCssDeg, stringifyTime } from "./utils.js";
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" role="group" aria-label="Time picker clock face"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0" role="slider" aria-label="Hour selector" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0"></div><div id="needle-minute" tabindex="0" role="slider" aria-label="Minute selector" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 const PICKER_RADIUS = 216 / 2;
@@ -64,6 +64,11 @@ class TimePicker extends NectaryElement {
       el.className = "digit-hour-12";
       el.style.transform = `translate(${x}px, ${y}px)`;
       el.textContent = hourDisplayValue;
+      el.setAttribute("role", "button");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("aria-label", `${hourDisplayValue} o'clock`);
+      el.addEventListener("click", () => this.#onHourDigitClick(i));
+      el.addEventListener("keydown", (e) => this.#onDigitKeydown(e, () => this.#onHourDigitClick(i)));
       hours12Frag.appendChild(el);
     }
     this.#$pickerHours.appendChild(hours12Frag);
@@ -77,6 +82,11 @@ class TimePicker extends NectaryElement {
       el.className = "digit-hour-24";
       el.style.transform = `translate(${x}px, ${y}px)`;
       el.textContent = hourDisplayValue;
+      el.setAttribute("role", "button");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("aria-label", `${hourDisplayValue} o'clock`);
+      el.addEventListener("click", () => this.#onHourDigitClick(i));
+      el.addEventListener("keydown", (e) => this.#onDigitKeydown(e, () => this.#onHourDigitClick(i)));
       hours24Frag.appendChild(el);
     }
     this.#$pickerHours.appendChild(hours24Frag);
@@ -89,6 +99,11 @@ class TimePicker extends NectaryElement {
       el.className = "digit-minute";
       el.style.transform = `translate(${x}px, ${y}px)`;
       el.textContent = stringifyMinute(i);
+      el.setAttribute("role", "button");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("aria-label", `${i} minutes`);
+      el.addEventListener("click", () => this.#onMinuteDigitClick(i));
+      el.addEventListener("keydown", (e) => this.#onDigitKeydown(e, () => this.#onMinuteDigitClick(i)));
       minutesFrag.appendChild(el);
     }
     this.#$pickerMinutes.appendChild(minutesFrag);
@@ -125,8 +140,11 @@ class TimePicker extends NectaryElement {
         break;
       }
       case "ampm": {
+        const isAMPM = isAttrTrue(newVal);
+        updateBooleanAttribute(this, "ampm", isAMPM);
+        const hourMax = isAMPM ? 12 : 23;
+        updateAttribute(this.#$needleHour, "aria-valuemax", hourMax);
         this.#render();
-        updateBooleanAttribute(this, "ampm", isAttrTrue(newVal));
         break;
       }
       case "submit-aria-label": {
@@ -230,6 +248,10 @@ class TimePicker extends NectaryElement {
     updateAttribute(this.#$headerHours, "aria-valuetext", this.#hour);
     updateAttribute(this.#$headerMinutes, "aria-valuenow", this.#minute);
     updateAttribute(this.#$headerMinutes, "aria-valuetext", this.#minute);
+    updateAttribute(this.#$needleHour, "aria-valuenow", this.#hour);
+    updateAttribute(this.#$needleHour, "aria-valuetext", `${this.#hour} o'clock`);
+    updateAttribute(this.#$needleMinute, "aria-valuenow", this.#minute);
+    updateAttribute(this.#$needleMinute, "aria-valuetext", `${this.#minute} minutes`);
   }
   #selectHour(is24) {
     const $hours = this.#$pickerHours.children;
@@ -327,6 +349,20 @@ class TimePicker extends NectaryElement {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onHourDigitClick = (hour) => {
+    this.#hour = hour;
+    this.#render();
+  };
+  #onMinuteDigitClick = (minute) => {
+    this.#minute = minute;
+    this.#render();
+  };
+  #onDigitKeydown = (e, callback) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      callback();
+    }
+  };
 }
 defineCustomElement("sinch-time-picker", TimePicker);
 export {