@vonage/vivid 4.22.0 → 4.24.0

package/shared/definition11.js

@@ -1,9 +1,10 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { P as ProgressRing, p as progressRingDefinition } from './definition38.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 { b as Size } from './enums.js';
+import { d as delegateAria } from './delegates-aria.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
@@ -183,21 +184,8 @@ function renderButtonContent(context) {
 		name="${(x) => x.name}"
 		type="${(x) => getButtonType(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}"
 		title="${(x) => x.title}"
+		${delegateAria()}
 		${ref("control")}
 	>
 		${buttonContent(context)}
@@ -214,26 +202,14 @@ function renderAnchorContent(context) {
 		rel="${(x) => x.rel}"
 		target="${(x) => x.target}"
 		type="${(x) => x.type}"
-		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-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoleDescription}"
+		${delegateAria()}
 		${ref("control")}
 	>
 		${buttonContent(context)}
 	</a>`;
 }
 const buttonTemplate = (context) => {
-  return html` <template role="presentation">
+  return html` <template>
 		${when((x) => !x.href, html`${renderButtonContent(context)}`)}
 		${when((x) => x.href, html`${renderAnchorContent(context)}`)}
 	</template>`;

package/shared/definition12.cjs

@@ -2,10 +2,11 @@
 
 const vividElement = require('./vivid-element.cjs');
 const calendarEvent = require('./calendar-event.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
+const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{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));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
 
 const getClasses = ({ connotation, appearance }) => classNames.classNames(
   "base",
@@ -25,8 +26,10 @@ const getStyles = ({ start, duration, overlapCount }) => {
 const CalendarEventTemplate = vividElement.html` <div
 	style="${getStyles}"
 	class="${getClasses}"
-	role="button"
 	tabindex="0"
+	${delegatesAria.delegateAria({
+  role: "button"
+})}
 >
 	${when.when((x) => x.heading, vividElement.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
 	${when.when((x) => x.description, vividElement.html`<p>${(x) => x.description}</p>`)}

package/shared/definition12.js

@@ -1,9 +1,10 @@
-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';
 
-const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
+const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{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));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
 
 const getClasses = ({ connotation, appearance }) => classNames(
   "base",
@@ -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.cjs

@@ -1190,7 +1190,10 @@ const DataGridCellTemplate = (context) => {
 			@click="${(x) => x._handleInteraction()}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
-			<div class="base">
+			<div
+				class="base"
+				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
+			>
 				<slot></slot>
 				${(_) => renderSortIcons(context)}
 			</div>

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';
@@ -1188,7 +1188,10 @@ const DataGridCellTemplate = (context) => {
 			@click="${(x) => x._handleInteraction()}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
-			<div class="base">
+			<div
+				class="base"
+				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
+			>
 				<slot></slot>
 				${(_) => renderSortIcons(context)}
 			</div>

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

@@ -267,6 +267,11 @@ function headline() {
 function subtitle() {
   return vividElement.html` <div class="subtitle">${(x) => x.subtitle}</div> `;
 }
+function renderHeaderText() {
+  return vividElement.html`
+		<div class="header-text">${headline()} ${subtitle()}</div>
+	`;
+}
 function renderDismissButton(buttonTag) {
   return vividElement.html`
 	<${buttonTag}
@@ -286,8 +291,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">
@@ -295,8 +301,9 @@ const DialogTemplate = (context) => {
 							<slot name="graphic">
 								${when.when((x) => x.icon, icon(iconTag))}
 							</slot>
-							${when.when((x) => x.headline, headline())}
-							${when.when((x) => x.subtitle, subtitle())}
+							${when.when((x) => x.headline && x.subtitle, renderHeaderText())}
+							${when.when((x) => x.headline && !x.subtitle, headline())}
+							${when.when((x) => x.subtitle && !x.headline, subtitle())}
 							${when.when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
 					</div>
 					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >

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';
@@ -265,6 +265,11 @@ function headline() {
 function subtitle() {
   return html` <div class="subtitle">${(x) => x.subtitle}</div> `;
 }
+function renderHeaderText() {
+  return html`
+		<div class="header-text">${headline()} ${subtitle()}</div>
+	`;
+}
 function renderDismissButton(buttonTag) {
   return html`
 	<${buttonTag}
@@ -284,8 +289,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">
@@ -293,8 +299,9 @@ const DialogTemplate = (context) => {
 							<slot name="graphic">
 								${when((x) => x.icon, icon(iconTag))}
 							</slot>
-							${when((x) => x.headline, headline())}
-							${when((x) => x.subtitle, subtitle())}
+							${when((x) => x.headline && x.subtitle, renderHeaderText())}
+							${when((x) => x.headline && !x.subtitle, headline())}
+							${when((x) => x.subtitle && !x.headline, subtitle())}
 							${when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
 					</div>
 					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >

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

@@ -3,6 +3,7 @@
 const definition$1 = require('./definition28.cjs');
 const definition = require('./definition11.cjs');
 const vividElement = require('./vivid-element.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
 const localized = require('./localized.cjs');
@@ -2166,7 +2167,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
+var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, getCustomValidationError_fn, formatNumbersInMessage_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
 const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
   return `<div class="dz-preview dz-file-preview">
@@ -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);
@@ -2347,7 +2350,11 @@ exports.FilePicker = class FilePicker extends localized.Localized(FormAssociated
     }
     return true;
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
   validate() {
+    if (this.proxy) {
+      this.proxy.setCustomValidity(__privateMethod(this, _FilePicker_instances, getCustomValidationError_fn).call(this) ?? "");
+    }
     super.validate(this.control);
   }
   formResetCallback() {
@@ -2410,6 +2417,7 @@ handleFilesChanged_fn = function() {
   }
   this.$emit("change");
   __privateMethod(this, _FilePicker_instances, updateFormValue_fn).call(this);
+  this.validate();
   requestAnimationFrame(() => __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this));
 };
 updateFormValue_fn = function() {
@@ -2428,6 +2436,12 @@ updateFormValue_fn = function() {
 setValueToAFakePathLikeNativeInput_fn = function() {
   this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
 };
+getCustomValidationError_fn = function() {
+  if (this.rejectedFiles.length > 0) {
+    return this.locale.filePicker.invalidFilesError;
+  }
+  return null;
+};
 formatNumbersInMessage_fn = function(message) {
   if (this.locale.common.useCommaAsDecimalSeparator) {
     return message.replace(/(\d+)\.(\d+)/g, "$1,$2");
@@ -2483,8 +2497,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>