@vonage/vivid 4.21.1 → 4.23.0

package/shared/definition28.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, v as volatile, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { _ as _curry1, a as _curry2, b as _has } from './_has.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -132,7 +132,7 @@ var memoizeWith = /*#__PURE__*/_curry2(function memoizeWith(keyGen, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.6.4";
+const ICONS_VERSION = "4.6.5";
 
 const numberConverter = {
   toView(value) {

package/shared/definition29.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { c as classNames } from './class-names.js';
 
 var __defProp = Object.defineProperty;

package/shared/definition3.cjs

@@ -4,7 +4,7 @@ const vividElement = require('./vivid-element.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
+const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -41,8 +41,9 @@ const getClasses = ({ appearance, shape, tight }) => classNames.classNames(
 );
 const ActionGroupTemplate = vividElement.html`<div
 	class="${getClasses}"
-	role="${(x) => x.role ? x.role : "group"}"
-	aria-label="${(x) => x.ariaLabel}"
+	${delegatesAria.delegateAria({
+  role: (x) => x.role ? x.role : "group"
+})}
 >
 	<slot></slot>
 </div>`;

package/shared/definition3.js

@@ -1,8 +1,8 @@
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
+const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -39,8 +39,9 @@ const getClasses = ({ appearance, shape, tight }) => classNames(
 );
 const ActionGroupTemplate = html`<div
 	class="${getClasses}"
-	role="${(x) => x.role ? x.role : "group"}"
-	aria-label="${(x) => x.ariaLabel}"
+	${delegateAria({
+  role: (x) => x.role ? x.role : "group"
+})}
 >
 	<slot></slot>
 </div>`;

package/shared/definition30.cjs

@@ -6,6 +6,7 @@ const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const affix = require('./affix.cjs');
 const direction = require('./direction.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 const anchored = require('./anchored.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const dom = require('./dom.cjs');
@@ -94,12 +95,11 @@ const _Menu = class _Menu extends anchored.Anchored(delegatesAria.DelegatesAria(
     this.setItems = () => {
       const newItems = this.domChildren();
       this.removeItemListeners();
-      this.menuItems = newItems;
-      const menuItems = this.menuItems.filter(this.isMenuItemElement);
-      if (menuItems.length) {
+      this.menuItems = newItems.filter(this.isMenuItemElement);
+      if (this.menuItems.length) {
         this.focusIndex = 0;
       }
-      menuItems.forEach((item, index) => {
+      this.menuItems.forEach((item, index) => {
         item.setAttribute("tabindex", index === 0 ? "0" : "-1");
         item.addEventListener("expanded-change", this.handleExpandedChanged);
         item.addEventListener("focus", this.handleItemFocus);
@@ -183,7 +183,7 @@ const _Menu = class _Menu extends anchored.Anchored(delegatesAria.DelegatesAria(
     if (autoFocusElement instanceof HTMLElement) {
       autoFocusElement.focus();
     } else {
-      this.setFocus(0, 1);
+      this.setFocus(0);
     }
   }
   /**
@@ -206,16 +206,16 @@ const _Menu = class _Menu extends anchored.Anchored(delegatesAria.DelegatesAria(
     }
     switch (e.key) {
       case keyCodes.keyArrowDown:
-        this.setFocus(this.focusIndex + 1, 1);
+        this.setFocus(this.focusIndex + 1);
         return;
       case keyCodes.keyArrowUp:
-        this.setFocus(this.focusIndex - 1, -1);
+        this.setFocus(this.focusIndex - 1);
         return;
       case keyCodes.keyEnd:
-        this.setFocus(this.menuItems.length - 1, -1);
+        this.setFocus(this.menuItems.length - 1);
         return;
       case keyCodes.keyHome:
-        this.setFocus(0, 1);
+        this.setFocus(0);
         return;
       default:
         return true;
@@ -227,22 +227,18 @@ const _Menu = class _Menu extends anchored.Anchored(delegatesAria.DelegatesAria(
   domChildren() {
     return Array.from(this.children).filter((child) => !child.hasAttribute("hidden")).filter((child) => !child.hasAttribute("slot"));
   }
-  setFocus(focusIndex, adjustment) {
+  setFocus(focusIndex) {
     if (this.menuItems === void 0) {
       return;
     }
-    while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
+    if (focusIndex >= 0 && focusIndex < this.menuItems.length) {
       const child = this.menuItems[focusIndex];
-      if (this.isFocusableElement(child)) {
-        if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
-          this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        }
-        this.focusIndex = focusIndex;
-        child.setAttribute("tabindex", "0");
-        child.focus();
-        break;
+      if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
       }
-      focusIndex += adjustment;
+      this.focusIndex = focusIndex;
+      child.setAttribute("tabindex", "0");
+      child.focus();
     }
   }
   get #triggerBehaviour() {
@@ -291,14 +287,15 @@ const _Menu = class _Menu extends anchored.Anchored(delegatesAria.DelegatesAria(
     if (this.#triggerBehaviour === "auto" && clickedOnNonCheckboxMenuItem) {
       this.open = false;
     }
+    const domChildren = this.domChildren();
     const changedMenuItem = e.target;
-    const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+    const changeItemIndex = domChildren.indexOf(changedMenuItem);
     if (changeItemIndex === -1) {
       return;
     }
     if (changedMenuItem.role === "menuitemradio" && changedMenuItem.checked) {
       for (let i = changeItemIndex - 1; i >= 0; --i) {
-        const item = this.menuItems[i];
+        const item = domChildren[i];
         const role = item.getAttribute("role");
         if (role === MenuItemRole.menuitemradio) {
           item.checked = false;
@@ -307,9 +304,9 @@ const _Menu = class _Menu extends anchored.Anchored(delegatesAria.DelegatesAria(
           break;
         }
       }
-      const maxIndex = this.menuItems.length - 1;
+      const maxIndex = domChildren.length - 1;
       for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
-        const item = this.menuItems[i];
+        const item = domChildren[i];
         const role = item.getAttribute("role");
         if (role === MenuItemRole.menuitemradio) {
           item.checked = false;
@@ -357,11 +354,12 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class MenuItem extends affix.AffixIcon(vividElement.VividElement) {
+class MenuItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.VividElement)) {
   constructor() {
     super();
     // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
     this.role = MenuItemRole.menuitem;
+    this.checked = false;
     this.hasSubmenu = false;
     this.currentDirection = direction.Direction.ltr;
     /**
@@ -652,11 +650,13 @@ const MenuItemTemplate = (context) => {
   const iconTag = context.tagFor(definition.Icon);
   return vividElement.html`
 		<template
-			role="${(x) => x.role ? x.role : MenuItemRole.menuitem}"
-			aria-haspopup="${(x) => x.hasSubmenu ? "menu" : void 0}"
-			aria-checked="${(x) => x.role !== MenuItemRole.menuitem ? x.checked : void 0}"
-			aria-disabled="${(x) => x.disabled}"
-			aria-expanded="${(x) => x.expanded}"
+			${hostSemantics.applyHostSemantics({
+    role: MenuItemRole.menuitem,
+    ariaHasPopup: (x) => x.hasSubmenu ? "menu" : void 0,
+    ariaChecked: (x) => x.role !== MenuItemRole.menuitem ? x.checked : void 0,
+    ariaDisabled: (x) => x.disabled,
+    ariaExpanded: (x) => x.expanded
+  })}
 			@keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
 			@click="${handleClick}"
 			@mouseover="${(x, c) => x.handleMouseOver(c.event)}"
@@ -729,8 +729,7 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return vividElement.html`
-		<template role="presentation"
-							@change="${(x, c) => x._onChange(c.event)}"
+		<template @change="${(x, c) => x._onChange(c.event)}"
 							@focusout="${(x, c) => x._onFocusout(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
@@ -749,8 +748,9 @@ const MenuTemplate = (context) => {
 				</div>
 				<div
 					class="body"
-					role="menu"
-					aria-label="${(x) => x.ariaLabel}"
+					${delegatesAria.delegateAria({
+    role: "menu"
+  })}
 					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
 					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
 				>

package/shared/definition30.js

@@ -1,11 +1,12 @@
 import { P as Popup, p as popupDefinition } from './definition65.js';
 import { I as Icon, i as iconDefinition } from './definition28.js';
-import { D as DOM, V as VividElement, o as observable, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { D as DOM, V as VividElement, o as observable, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown, h as keyArrowLeft, i as keyArrowRight, a as keySpace, k as keyEnter } from './key-codes.js';
 import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { D as Direction, g as getDirection } from './direction.js';
+import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
 import { A as Anchored, a as anchorSlotTemplateFactory } from './anchored.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { i as isHTMLElement } from './dom.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { r as ref } from './ref.js';
@@ -92,12 +93,11 @@ const _Menu = class _Menu extends Anchored(DelegatesAria(VividElement)) {
     this.setItems = () => {
       const newItems = this.domChildren();
       this.removeItemListeners();
-      this.menuItems = newItems;
-      const menuItems = this.menuItems.filter(this.isMenuItemElement);
-      if (menuItems.length) {
+      this.menuItems = newItems.filter(this.isMenuItemElement);
+      if (this.menuItems.length) {
         this.focusIndex = 0;
       }
-      menuItems.forEach((item, index) => {
+      this.menuItems.forEach((item, index) => {
         item.setAttribute("tabindex", index === 0 ? "0" : "-1");
         item.addEventListener("expanded-change", this.handleExpandedChanged);
         item.addEventListener("focus", this.handleItemFocus);
@@ -181,7 +181,7 @@ const _Menu = class _Menu extends Anchored(DelegatesAria(VividElement)) {
     if (autoFocusElement instanceof HTMLElement) {
       autoFocusElement.focus();
     } else {
-      this.setFocus(0, 1);
+      this.setFocus(0);
     }
   }
   /**
@@ -204,16 +204,16 @@ const _Menu = class _Menu extends Anchored(DelegatesAria(VividElement)) {
     }
     switch (e.key) {
       case keyArrowDown:
-        this.setFocus(this.focusIndex + 1, 1);
+        this.setFocus(this.focusIndex + 1);
         return;
       case keyArrowUp:
-        this.setFocus(this.focusIndex - 1, -1);
+        this.setFocus(this.focusIndex - 1);
         return;
       case keyEnd:
-        this.setFocus(this.menuItems.length - 1, -1);
+        this.setFocus(this.menuItems.length - 1);
         return;
       case keyHome:
-        this.setFocus(0, 1);
+        this.setFocus(0);
         return;
       default:
         return true;
@@ -225,22 +225,18 @@ const _Menu = class _Menu extends Anchored(DelegatesAria(VividElement)) {
   domChildren() {
     return Array.from(this.children).filter((child) => !child.hasAttribute("hidden")).filter((child) => !child.hasAttribute("slot"));
   }
-  setFocus(focusIndex, adjustment) {
+  setFocus(focusIndex) {
     if (this.menuItems === void 0) {
       return;
     }
-    while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
+    if (focusIndex >= 0 && focusIndex < this.menuItems.length) {
       const child = this.menuItems[focusIndex];
-      if (this.isFocusableElement(child)) {
-        if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
-          this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        }
-        this.focusIndex = focusIndex;
-        child.setAttribute("tabindex", "0");
-        child.focus();
-        break;
+      if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
       }
-      focusIndex += adjustment;
+      this.focusIndex = focusIndex;
+      child.setAttribute("tabindex", "0");
+      child.focus();
     }
   }
   get #triggerBehaviour() {
@@ -289,14 +285,15 @@ const _Menu = class _Menu extends Anchored(DelegatesAria(VividElement)) {
     if (this.#triggerBehaviour === "auto" && clickedOnNonCheckboxMenuItem) {
       this.open = false;
     }
+    const domChildren = this.domChildren();
     const changedMenuItem = e.target;
-    const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+    const changeItemIndex = domChildren.indexOf(changedMenuItem);
     if (changeItemIndex === -1) {
       return;
     }
     if (changedMenuItem.role === "menuitemradio" && changedMenuItem.checked) {
       for (let i = changeItemIndex - 1; i >= 0; --i) {
-        const item = this.menuItems[i];
+        const item = domChildren[i];
         const role = item.getAttribute("role");
         if (role === MenuItemRole.menuitemradio) {
           item.checked = false;
@@ -305,9 +302,9 @@ const _Menu = class _Menu extends Anchored(DelegatesAria(VividElement)) {
           break;
         }
       }
-      const maxIndex = this.menuItems.length - 1;
+      const maxIndex = domChildren.length - 1;
       for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
-        const item = this.menuItems[i];
+        const item = domChildren[i];
         const role = item.getAttribute("role");
         if (role === MenuItemRole.menuitemradio) {
           item.checked = false;
@@ -355,11 +352,12 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class MenuItem extends AffixIcon(VividElement) {
+class MenuItem extends HostSemantics(AffixIcon(VividElement)) {
   constructor() {
     super();
     // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
     this.role = MenuItemRole.menuitem;
+    this.checked = false;
     this.hasSubmenu = false;
     this.currentDirection = Direction.ltr;
     /**
@@ -650,11 +648,13 @@ const MenuItemTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
   return html`
 		<template
-			role="${(x) => x.role ? x.role : MenuItemRole.menuitem}"
-			aria-haspopup="${(x) => x.hasSubmenu ? "menu" : void 0}"
-			aria-checked="${(x) => x.role !== MenuItemRole.menuitem ? x.checked : void 0}"
-			aria-disabled="${(x) => x.disabled}"
-			aria-expanded="${(x) => x.expanded}"
+			${applyHostSemantics({
+    role: MenuItemRole.menuitem,
+    ariaHasPopup: (x) => x.hasSubmenu ? "menu" : void 0,
+    ariaChecked: (x) => x.role !== MenuItemRole.menuitem ? x.checked : void 0,
+    ariaDisabled: (x) => x.disabled,
+    ariaExpanded: (x) => x.expanded
+  })}
 			@keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
 			@click="${handleClick}"
 			@mouseover="${(x, c) => x.handleMouseOver(c.event)}"
@@ -727,8 +727,7 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return html`
-		<template role="presentation"
-							@change="${(x, c) => x._onChange(c.event)}"
+		<template @change="${(x, c) => x._onChange(c.event)}"
 							@focusout="${(x, c) => x._onFocusout(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
@@ -747,8 +746,9 @@ const MenuTemplate = (context) => {
 				</div>
 				<div
 					class="body"
-					role="menu"
-					aria-label="${(x) => x.ariaLabel}"
+					${delegateAria({
+    role: "menu"
+  })}
 					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
 					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
 				>

package/shared/definition31.cjs

@@ -70,11 +70,13 @@ const NavDisclosureTemplate = (context) => {
   const iconTag = context.tagFor(definition.Icon);
   return vividElement.html`<details class="base" ${ref.ref("details")} ?open=${(x) => x.open}>
 		<summary class="${getClasses}"
-						 role="button"
 						 aria-controls="disclosure-content"
-						 aria-expanded="${(x) => x.open}"
-						 aria-label=${(x) => x.ariaLabel}
-						 aria-current=${(x) => getAriaCurrent(x.ariaCurrent, x.open)}>
+						 ${delegatesAria.delegateAria({
+    role: "button",
+    ariaExpanded: (x) => x.open,
+    ariaCurrent: (x) => getAriaCurrent(x.ariaCurrent, x.open)
+  })}
+		>
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 			${(x) => x.label}
 			<slot name="meta"></slot>

package/shared/definition31.js

@@ -1,7 +1,7 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
@@ -68,11 +68,13 @@ const NavDisclosureTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
   return html`<details class="base" ${ref("details")} ?open=${(x) => x.open}>
 		<summary class="${getClasses}"
-						 role="button"
 						 aria-controls="disclosure-content"
-						 aria-expanded="${(x) => x.open}"
-						 aria-label=${(x) => x.ariaLabel}
-						 aria-current=${(x) => getAriaCurrent(x.ariaCurrent, x.open)}>
+						 ${delegateAria({
+    role: "button",
+    ariaExpanded: (x) => x.open,
+    ariaCurrent: (x) => getAriaCurrent(x.ariaCurrent, x.open)
+  })}
+		>
 			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
 			${(x) => x.label}
 			<slot name="meta"></slot>

package/shared/definition32.js

@@ -1,5 +1,5 @@
 import { i as iconDefinition } from './definition28.js';
-import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { b as AffixIcon } from './affix.js';
 import { T as TextAnchor } from './text-anchor.js';
 import { t as textAnchorTemplate } from './text-anchor.template.js';

package/shared/definition33.cjs

@@ -1,13 +1,18 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 
 const styles = "nav{display:flex;flex-direction:column;gap:4px}";
 
-class Nav extends vividElement.VividElement {
+class Nav extends delegatesAria.DelegatesAria(vividElement.VividElement) {
 }
 
-const NavTemplate = vividElement.html` <nav><slot></slot></nav> `;
+const NavTemplate = vividElement.html`
+	<nav ${delegatesAria.delegateAria()}>
+		<slot></slot>
+	</nav>
+`;
 
 const navDefinition = vividElement.defineVividComponent("nav", Nav, NavTemplate, [], {
   styles

package/shared/definition33.js

@@ -1,11 +1,16 @@
-import { V as VividElement, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 
 const styles = "nav{display:flex;flex-direction:column;gap:4px}";
 
-class Nav extends VividElement {
+class Nav extends DelegatesAria(VividElement) {
 }
 
-const NavTemplate = html` <nav><slot></slot></nav> `;
+const NavTemplate = html`
+	<nav ${delegateAria()}>
+		<slot></slot>
+	</nav>
+`;
 
 const navDefinition = defineVividComponent("nav", Nav, NavTemplate, [], {
   styles

package/shared/definition34.js

@@ -1,5 +1,5 @@
 import { i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';

package/shared/definition35.cjs

@@ -8,15 +8,15 @@ const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const formAssociated = require('./form-associated.cjs');
 const affix = require('./affix.cjs');
-const localized = require('./localized.cjs');
 const keyCodes = require('./key-codes.cjs');
+const localized = require('./localized.cjs');
 const formElements = require('./form-elements.cjs');
 const enums = require('./enums.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 
-const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
+const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
 
 class _NumberField extends vividElement.VividElement {
 }
@@ -397,18 +397,7 @@ const NumberFieldTemplate = (context) => {
 						?spellcheck="${(x) => x.spellcheck}"
 						:value="${(x) => x._presentationValue}"
 						type="text"
-						aria-atomic="${(x) => x.ariaAtomic}"
-						aria-busy="${(x) => x.ariaBusy}"
-						aria-current="${(x) => x.ariaCurrent}"
-						aria-disabled="${(x) => x.ariaDisabled}"
-						aria-haspopup="${(x) => x.ariaHasPopup}"
-						aria-hidden="${(x) => x.ariaHidden}"
-						aria-invalid="${(x) => x.ariaInvalid}"
-						aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
-						aria-label="${(x) => x.ariaLabel}"
-						aria-live="${(x) => x.ariaLive}"
-						aria-relevant="${(x) => x.ariaRelevant}"
-						aria-roledescription="${(x) => x.ariaRoleDescription}"
+						${delegatesAria.delegateAria()}
 						${ref.ref("control")}
 					/>
 				</div>