@vonage/vivid 4.21.1 → 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

@@ -10,7 +10,7 @@ const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 
-const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
+const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
 
 class _Checkbox extends vividElement.VividElement {
 }
@@ -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,14 +1,14 @@
 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';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 
-const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
+const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
 
 class _Checkbox extends VividElement {
 }
@@ -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.cjs

@@ -19,7 +19,7 @@ const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
 
 class _Combobox extends listbox.Listbox {
 }

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';
@@ -17,7 +17,7 @@ import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
 
 class _Combobox extends Listbox {
 }

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.cjs

@@ -256,6 +256,9 @@ exports.DateRangePicker = class DateRangePicker extends calendarPicker_template.
       );
       __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start, end });
     } catch (_) {
+      const invalidPresentationValue = this._presentationValue;
+      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: "", end: "" });
+      this._presentationValue = invalidPresentationValue;
       return;
     }
   }

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';
@@ -254,6 +254,9 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
       );
       __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start, end });
     } catch (_) {
+      const invalidPresentationValue = this._presentationValue;
+      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: "", end: "" });
+      this._presentationValue = invalidPresentationValue;
       return;
     }
   }

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);
@@ -2239,6 +2242,14 @@ exports.FilePicker = class FilePicker extends localized.Localized(FormAssociated
   get files() {
     return __privateGet(this, _dropzone)?.getAcceptedFiles() ?? [];
   }
+  /**
+   * Files that have been rejected by the file picker for failing validation.
+   *
+   * @public
+   */
+  get rejectedFiles() {
+    return __privateGet(this, _dropzone)?.getRejectedFiles() ?? [];
+  }
   singleFileChanged() {
     __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this);
   }
@@ -2475,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);
@@ -2237,6 +2240,14 @@ let FilePicker = class extends Localized(FormAssociatedFilePicker) {
   get files() {
     return __privateGet(this, _dropzone)?.getAcceptedFiles() ?? [];
   }
+  /**
+   * Files that have been rejected by the file picker for failing validation.
+   *
+   * @public
+   */
+  get rejectedFiles() {
+    return __privateGet(this, _dropzone)?.getRejectedFiles() ?? [];
+  }
   singleFileChanged() {
     __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this);
   }
@@ -2473,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.cjs

@@ -134,7 +134,7 @@ var memoizeWith = /*#__PURE__*/_has._curry2(function memoizeWith(keyGen, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.6.4";
+const ICONS_VERSION = "4.6.5";
 
 const numberConverter = {
   toView(value) {