@vonage/vivid 4.22.0 → 4.23.0

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>

package/shared/definition35.js

@@ -1,13 +1,13 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { D as Divider, d as dividerDefinition } from './definition23.js';
-import { V as VividElement, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { i as iconDefinition } from './definition28.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { F as FormAssociated } from './form-associated.js';
 import { b as AffixIcon } from './affix.js';
-import { L as Localized } from './localized.js';
 import { f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
+import { L as Localized } from './localized.js';
 import { F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
 import { S as Shape } from './enums.js';
 import { c as classNames } from './class-names.js';
@@ -395,18 +395,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}"
+						${delegateAria()}
 						${ref("control")}
 					/>
 				</div>

package/shared/definition36.cjs

@@ -4,6 +4,7 @@ const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
 const option = require('./option.cjs');
 const affix = require('./affix.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
@@ -20,10 +21,12 @@ const ListboxOptionTemplate = (context) => {
   const iconTag = context.tagFor(definition.Icon);
   return vividElement.html`
 		<template
-			role="option"
-			aria-checked="${(x) => x.checked}"
-			aria-selected="${(x) => x.selected}"
-			aria-disabled="${(x) => x.disabled}"
+			${hostSemantics.applyHostSemantics({
+    role: "option",
+    ariaChecked: (x) => x.checked,
+    ariaSelected: (x) => x.selected,
+    ariaDisabled: (x) => x.disabled
+  })}
 			style="${(x) => x._isNotMatching ? "display: none" : ""}"
 		>
 			<div class="${getClasses}">
@@ -51,7 +54,7 @@ const ListboxOptionTemplate = (context) => {
 	`;
 };
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_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(--_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: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--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))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
+const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_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(--_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: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-cta-500);--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))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
 
 const listboxOptionDefinition = vividElement.defineVividComponent(
   "option",

package/shared/definition36.js

@@ -1,7 +1,8 @@
 import { I as Icon, 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 { L as ListboxOption } from './option.js';
 import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { a as applyHostSemantics } from './host-semantics.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
@@ -18,10 +19,12 @@ const ListboxOptionTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
   return html`
 		<template
-			role="option"
-			aria-checked="${(x) => x.checked}"
-			aria-selected="${(x) => x.selected}"
-			aria-disabled="${(x) => x.disabled}"
+			${applyHostSemantics({
+    role: "option",
+    ariaChecked: (x) => x.checked,
+    ariaSelected: (x) => x.selected,
+    ariaDisabled: (x) => x.disabled
+  })}
 			style="${(x) => x._isNotMatching ? "display: none" : ""}"
 		>
 			<div class="${getClasses}">
@@ -49,7 +52,7 @@ const ListboxOptionTemplate = (context) => {
 	`;
 };
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_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(--_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: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--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))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
+const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_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(--_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: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-cta-500);--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))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
 
 const listboxOptionDefinition = defineVividComponent(
   "option",

package/shared/definition37.js

@@ -1,5 +1,5 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
-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 { b as Size, S as Shape } from './enums.js';
 import { e as elements } from './slotted.js';
 import { c as classNames } from './class-names.js';

package/shared/definition38.cjs

@@ -33,16 +33,15 @@ const getClasses = ({ connotation, size, paused }) => classNames.classNames(
   [`size-${size}`, !!size]
 );
 const progressSegments = 44;
-const ProgressRingTemplate = vividElement.html`<template
-	role="${(x) => x.ariaLabel ? "presentation" : null}"
->
+const ProgressRingTemplate = vividElement.html`<template>
 	<div
-		role="progressbar"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-valuenow="${(x) => x.value}"
-		aria-valuemin="${(x) => x.min}"
-		aria-valuemax="${(x) => x.max}"
 		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
+		${delegatesAria.delegateAria({
+  role: "progressbar",
+  ariaValueNow: (x) => x.value,
+  ariaValueMin: (x) => x.min,
+  ariaValueMax: (x) => x.max
+})}
 	>
 		${when.when(
   (x) => typeof x.value === "number",