@vonage/vivid 4.22.0 → 4.23.0

package/shared/definition12.js

@@ -1,5 +1,6 @@
-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 { C as CalendarEvent } from './calendar-event.js';
+import { d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
@@ -23,8 +24,10 @@ const getStyles = ({ start, duration, overlapCount }) => {
 const CalendarEventTemplate = html` <div
 	style="${getStyles}"
 	class="${getClasses}"
-	role="button"
 	tabindex="0"
+	${delegateAria({
+  role: "button"
+})}
 >
 	${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
 	${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}

package/shared/definition13.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 { d as Sticky } from './enums.js';
 import { C as CalendarEvent } from './calendar-event.js';
 import { b as _has, _ as _curry1, a as _curry2 } from './_has.js';

package/shared/definition14.js

@@ -1,6 +1,6 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { E as Elevation, e as elevationDefinition } from './definition64.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { A as Appearance } from './enums.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition15.cjs

@@ -159,15 +159,16 @@ const getClasses = ({
 );
 const CheckboxTemplate = (context) => {
   const iconTag = context.tagFor(definition.Icon);
-  return vividElement.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+  return vividElement.html`<template>
 		<div
 			class="${getClasses}"
-			role="checkbox"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-checked="${(x) => x.indeterminate ? "mixed" : x.checked}"
-			aria-required="${(x) => x.required}"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
+			${delegatesAria.delegateAria({
+    role: "checkbox",
+    ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,
+    ariaRequired: (x) => x.required,
+    ariaDisabled: (x) => x.disabled,
+    ariaReadOnly: (x) => x.readOnly
+  })}
 			tabindex="${(x) => x.tabindex !== null ? x.tabindex : x.disabled ? null : 0}"
 			@keypress="${(x, c) => x.keypressHandler(c.event)}"
 			@click="${(x, c) => x.clickHandler(c.event)}"

package/shared/definition15.js

@@ -1,7 +1,7 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.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 { C as CheckableFormAssociated } from './form-associated.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { c as classNames } from './class-names.js';
@@ -157,15 +157,16 @@ const getClasses = ({
 );
 const CheckboxTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
-  return html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+  return html`<template>
 		<div
 			class="${getClasses}"
-			role="checkbox"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-checked="${(x) => x.indeterminate ? "mixed" : x.checked}"
-			aria-required="${(x) => x.required}"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
+			${delegateAria({
+    role: "checkbox",
+    ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,
+    ariaRequired: (x) => x.required,
+    ariaDisabled: (x) => x.disabled,
+    ariaReadOnly: (x) => x.readOnly
+  })}
 			tabindex="${(x) => x.tabindex !== null ? x.tabindex : x.disabled ? null : 0}"
 			@keypress="${(x, c) => x.keypressHandler(c.event)}"
 			@click="${(x, c) => x.clickHandler(c.event)}"

package/shared/definition16.js

@@ -2,7 +2,7 @@ import { i as iconDefinition } from './definition28.js';
 import { P as Popup, p as popupDefinition } from './definition65.js';
 import { l as listboxOptionDefinition } from './definition36.js';
 import { s as styles$1 } from './text-field.js';
-import { D as DOM, O as Observable, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { D as DOM, O as Observable, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { L as Listbox } from './listbox.js';
 import { F as FormAssociated } from './form-associated.js';

package/shared/definition17.js

@@ -1,5 +1,5 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
-import { V as VividElement, D as DOM, O as Observable, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, D as DOM, O as Observable, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { R as RepeatDirective } from './repeat.js';
 import { d as keyEnd, g as keyHome, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, i as keyArrowRight, h as keyArrowLeft, b as keyEscape, m as keyFunction2, k as keyEnter, a as keySpace } from './key-codes.js';
 import { c as children } from './children.js';

package/shared/definition18.js

@@ -4,7 +4,7 @@ import { t as textFieldDefinition } from './definition57.js';
 import { d as dividerDefinition } from './definition23.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
 import { M as MinMaxCalendarPicker, C as CalendarPicker, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
-import { v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { v as volatile, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
 import { S as SingleDatePickerMixin } from './single-date-picker.js';
 import { e as errorText, f as formElements } from './form-elements.js';

package/shared/definition19.js

@@ -2,7 +2,7 @@ import { b as buttonDefinition } from './definition11.js';
 import { p as popupDefinition } from './definition65.js';
 import { t as textFieldDefinition } from './definition57.js';
 import { d as dividerDefinition } from './definition23.js';
-import { a as attr, o as observable, v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { a as attr, o as observable, v as volatile, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
 import { f as formatPresentationDate, p as parsePresentationDate, M as MinMaxCalendarPicker, C as CalendarPicker, i as isValidDateStr, b as compareDateStr, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
 import { e as errorText, f as formElements } from './form-elements.js';

package/shared/definition2.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { A as AccordionItem, a as accordionItemDefinition } from './definition.js';
 import { d as keyEnd, g as keyHome, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
 import { w as wrapInBounds } from './numbers.js';

package/shared/definition20.js

@@ -4,7 +4,7 @@ import { t as textFieldDefinition } from './definition57.js';
 import { d as dividerDefinition } from './definition23.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
 import { i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, C as CalendarPicker, d as currentDateStr, b as compareDateStr, V as ValidDateFilter, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
-import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { b as isValidTimeStr, f as formatPresentationTime, p as parsePresentationTime, c as TimeSelectionPicker, d as compareTimeStr, V as ValidTimeFilter, a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition } from './time-selection-picker.template.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
 import { S as SingleDatePickerMixin } from './single-date-picker.js';

package/shared/definition21.js

@@ -1,6 +1,6 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { T as TextField, t as textFieldDefinition } from './definition57.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 { I as Icon, i as iconDefinition } from './definition28.js';
 import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';

package/shared/definition22.cjs

@@ -286,8 +286,9 @@ const DialogTemplate = (context) => {
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => x._onKeyDown(c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
-				aria-label="${(x) => x.ariaLabel}"
-				?aria-modal="${(x) => x._openedAsModal}"
+				${delegatesAria.delegateAria({
+    ariaModal: (x) => String(x._openedAsModal)
+  })}
 		>
 			<slot name="main">
 				<div class="main-wrapper">

package/shared/definition22.js

@@ -1,9 +1,9 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { E as Elevation, e as elevationDefinition } from './definition64.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -284,8 +284,9 @@ const DialogTemplate = (context) => {
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => x._onKeyDown(c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
-				aria-label="${(x) => x.ariaLabel}"
-				?aria-modal="${(x) => x._openedAsModal}"
+				${delegateAria({
+    ariaModal: (x) => String(x._openedAsModal)
+  })}
 		>
 			<slot name="main">
 				<div class="main-wrapper">

package/shared/definition23.cjs

@@ -44,8 +44,10 @@ const getClasses = ({ orientation }) => classNames.classNames("base", [`${orient
 const getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 const DividerTemplate = vividElement.html` <span
 	class="${getClasses}"
-	aria-orientation="${getAriaOrientation}"
-	role="${(x) => x.role}"
+	${delegatesAria.delegateAria({
+  role: (x) => x.role || DividerRole.separator,
+  ariaOrientation: getAriaOrientation
+})}
 ></span>`;
 
 const dividerDefinition = vividElement.defineVividComponent(

package/shared/definition23.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 { O as Orientation } from './aria.js';
 import { c as classNames } from './class-names.js';
 
@@ -42,8 +42,10 @@ const getClasses = ({ orientation }) => classNames("base", [`${orientation}`, Bo
 const getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 const DividerTemplate = html` <span
 	class="${getClasses}"
-	aria-orientation="${getAriaOrientation}"
-	role="${(x) => x.role}"
+	${delegateAria({
+  role: (x) => x.role || DividerRole.separator,
+  ariaOrientation: getAriaOrientation
+})}
 ></span>`;
 
 const dividerDefinition = defineVividComponent(

package/shared/definition24.js

@@ -1,5 +1,5 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';

package/shared/definition25.cjs

@@ -4,6 +4,7 @@ const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
 const affix = require('./affix.cjs');
 const button = require('./button.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');
 
@@ -62,20 +63,7 @@ const FabTemplate = (context) => {
 			name="${(x) => x.name}"
 			type="${(x) => x.type}"
 			value="${(x) => x.value}"
-			aria-atomic="${(x) => x.ariaAtomic}"
-			aria-busy="${(x) => x.ariaBusy}"
-			aria-current="${(x) => x.ariaCurrent}"
-			aria-disabled="${(x) => x.ariaDisabled}"
-			aria-expanded="${(x) => x.ariaExpanded}"
-			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-pressed="${(x) => x.ariaPressed}"
-			aria-relevant="${(x) => x.ariaRelevant}"
-			aria-roledescription="${(x) => x.ariaRoleDescription}"
+			${delegatesAria.delegateAria()}
 			${ref.ref("control")}
 		>
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}

package/shared/definition25.js

@@ -1,7 +1,8 @@
 import { i as iconDefinition } from './definition28.js';
-import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { V as VividFoundationButton } from './button.js';
+import { d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
 
@@ -60,20 +61,7 @@ const FabTemplate = (context) => {
 			name="${(x) => x.name}"
 			type="${(x) => x.type}"
 			value="${(x) => x.value}"
-			aria-atomic="${(x) => x.ariaAtomic}"
-			aria-busy="${(x) => x.ariaBusy}"
-			aria-current="${(x) => x.ariaCurrent}"
-			aria-disabled="${(x) => x.ariaDisabled}"
-			aria-expanded="${(x) => x.ariaExpanded}"
-			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-pressed="${(x) => x.ariaPressed}"
-			aria-relevant="${(x) => x.ariaRelevant}"
-			aria-roledescription="${(x) => x.ariaRoleDescription}"
+			${delegateAria()}
 			${ref("control")}
 		>
 			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}

package/shared/definition26.cjs

@@ -4,6 +4,7 @@ const definition$1 = require('./definition28.cjs');
 const definition = require('./definition11.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const formAssociated = require('./form-associated.cjs');
 const localized = require('./localized.cjs');
 const formElements = require('./form-elements.cjs');
@@ -2181,7 +2182,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>`;
 };
-exports.FilePicker = class FilePicker extends localized.Localized(FormAssociatedFilePicker) {
+exports.FilePicker = class FilePicker extends delegatesAria.DelegatesAria(
+  localized.Localized(FormAssociatedFilePicker)
+) {
   constructor() {
     super();
     __privateAdd(this, _FilePicker_instances);
@@ -2483,8 +2486,10 @@ const FilePickerTemplate = (context) => {
 				${ref.ref("control")}
 				class="${getClasses}"
 				tabindex="0"
-				role="button"
 				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+				${delegatesAria.delegateAria({
+    role: "button"
+  })}
 			>
 				<slot class="main"></slot>
 			</div>

package/shared/definition26.js

@@ -1,7 +1,8 @@
 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 { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { F as FormAssociated } from './form-associated.js';
 import { L as Localized } from './localized.js';
 import { a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
@@ -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);
@@ -2481,8 +2484,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>`;