@vonage/vivid 4.22.0 → 4.24.0

package/shared/definition26.js

@@ -1,6 +1,7 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { B as Button, b as buttonDefinition } from './definition11.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 { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
 import { L as Localized } from './localized.js';
@@ -2164,7 +2165,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
+var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, getCustomValidationError_fn, formatNumbersInMessage_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
 const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
   return `<div class="dz-preview dz-file-preview">
@@ -2179,7 +2180,9 @@ const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
   <${buttonTag} class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed" aria-label="${locale.filePicker.removeFileLabel}"></${buttonTag}>
 </div>`;
 };
-let FilePicker = class extends Localized(FormAssociatedFilePicker) {
+let FilePicker = class extends DelegatesAria(
+  Localized(FormAssociatedFilePicker)
+) {
   constructor() {
     super();
     __privateAdd(this, _FilePicker_instances);
@@ -2345,7 +2348,11 @@ let FilePicker = class extends Localized(FormAssociatedFilePicker) {
     }
     return true;
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
   validate() {
+    if (this.proxy) {
+      this.proxy.setCustomValidity(__privateMethod(this, _FilePicker_instances, getCustomValidationError_fn).call(this) ?? "");
+    }
     super.validate(this.control);
   }
   formResetCallback() {
@@ -2408,6 +2415,7 @@ handleFilesChanged_fn = function() {
   }
   this.$emit("change");
   __privateMethod(this, _FilePicker_instances, updateFormValue_fn).call(this);
+  this.validate();
   requestAnimationFrame(() => __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this));
 };
 updateFormValue_fn = function() {
@@ -2426,6 +2434,12 @@ updateFormValue_fn = function() {
 setValueToAFakePathLikeNativeInput_fn = function() {
   this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
 };
+getCustomValidationError_fn = function() {
+  if (this.rejectedFiles.length > 0) {
+    return this.locale.filePicker.invalidFilesError;
+  }
+  return null;
+};
 formatNumbersInMessage_fn = function(message) {
   if (this.locale.common.useCommaAsDecimalSeparator) {
     return message.replace(/(\d+)\.(\d+)/g, "$1,$2");
@@ -2481,8 +2495,10 @@ const FilePickerTemplate = (context) => {
 				${ref("control")}
 				class="${getClasses}"
 				tabindex="0"
-				role="button"
 				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+				${delegateAria({
+    role: "button"
+  })}
 			>
 				<slot class="main"></slot>
 			</div>

package/shared/definition27.cjs

@@ -2,6 +2,7 @@
 
 const definition = require('./definition64.cjs');
 const vividElement = require('./vivid-element.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
@@ -15,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Header extends vividElement.VividElement {
+class Header extends delegatesAria.DelegatesAria(vividElement.VividElement) {
   constructor() {
     super(...arguments);
     this.elevationShadow = false;
@@ -39,7 +40,7 @@ const headerTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   return vividElement.html`
     <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
-      <header class="base" part="base">
+      <header class="base" part="base" ${delegatesAria.delegateAria()}>
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
         <div class="container" part="${getPartAlternate}">

package/shared/definition27.js

@@ -1,5 +1,6 @@
 import { E as Elevation, e as elevationDefinition } from './definition64.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 { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
@@ -13,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Header extends VividElement {
+class Header extends DelegatesAria(VividElement) {
   constructor() {
     super(...arguments);
     this.elevationShadow = false;
@@ -37,7 +38,7 @@ const headerTemplate = (context) => {
   const elevationTag = context.tagFor(Elevation);
   return html`
     <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
-      <header class="base" part="base">
+      <header class="base" part="base" ${delegateAria()}>
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
         <div class="container" part="${getPartAlternate}">

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';

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

@@ -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,5 +1,5 @@
-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(--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}";
@@ -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,7 +354,7 @@ 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
@@ -653,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)}"
@@ -730,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}
@@ -750,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,7 +352,7 @@ 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
@@ -651,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)}"
@@ -728,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}
@@ -748,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,8 +8,8 @@ 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');
@@ -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>