@vonage/vivid 4.22.0 → 4.23.0

package/shared/definition44.cjs

@@ -7,6 +7,7 @@ const definition$2 = require('./definition38.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const scrollIntoView = require('./scrollIntoView.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const formAssociated = require('./form-associated.cjs');
 const affix = require('./affix.cjs');
 const localized = require('./localized.cjs');
@@ -55,8 +56,8 @@ const TagGapPx = 8;
 const InputMinWidthPx = 100;
 const PageSize = 10;
 const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
-exports.SearchableSelect = class SearchableSelect extends affix.AffixIconWithTrailing(
-  localized.Localized(FormAssociatedSearchableSelect)
+exports.SearchableSelect = class SearchableSelect extends delegatesAria.DelegatesAria(
+  affix.AffixIconWithTrailing(localized.Localized(FormAssociatedSearchableSelect))
 ) {
   constructor() {
     super(...arguments);
@@ -1001,12 +1002,14 @@ function renderFieldset(context) {
 						id="control"
 						class="control"
 						autocomplete="off"
-						aria-autocomplete="list"
-						aria-expanded="${(x) => x.open}"
-						aria-haspopup="listbox"
 						aria-controls="listbox"
+						${delegatesAria.delegateAria({
+    role: "combobox",
+    ariaAutoComplete: "list",
+    ariaHasPopup: "listbox",
+    ariaExpanded: (x) => x.open
+  })}
 						placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
-						role="combobox"
 						type="text"
 						?disabled="${(x) => x.disabled}"
 						:value="${(x) => x._inputValue}"

package/shared/definition44.js

@@ -2,9 +2,10 @@ import { B as Button, c as chevronTemplateFactory, b as buttonDefinition } from
 import { P as Popup, p as popupDefinition } from './definition65.js';
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { P as ProgressRing, p as progressRingDefinition } from './definition38.js';
-import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { s as scrollIntoView } from './scrollIntoView.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { F as FormAssociated } from './form-associated.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
@@ -53,8 +54,8 @@ const TagGapPx = 8;
 const InputMinWidthPx = 100;
 const PageSize = 10;
 const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
-let SearchableSelect = class extends AffixIconWithTrailing(
-  Localized(FormAssociatedSearchableSelect)
+let SearchableSelect = class extends DelegatesAria(
+  AffixIconWithTrailing(Localized(FormAssociatedSearchableSelect))
 ) {
   constructor() {
     super(...arguments);
@@ -999,12 +1000,14 @@ function renderFieldset(context) {
 						id="control"
 						class="control"
 						autocomplete="off"
-						aria-autocomplete="list"
-						aria-expanded="${(x) => x.open}"
-						aria-haspopup="listbox"
 						aria-controls="listbox"
+						${delegateAria({
+    role: "combobox",
+    ariaAutoComplete: "list",
+    ariaHasPopup: "listbox",
+    ariaExpanded: (x) => x.open
+  })}
 						placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
-						role="combobox"
 						type="text"
 						?disabled="${(x) => x.disabled}"
 						:value="${(x) => x._inputValue}"

package/shared/definition45.cjs

@@ -6,15 +6,16 @@ const definition$3 = require('./definition36.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const listbox = require('./listbox.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 const formAssociated = require('./form-associated.cjs');
 const numbers = require('./numbers.cjs');
 const affix = require('./affix.cjs');
 const strings = require('./strings.cjs');
 const keyCodes = require('./key-codes.cjs');
 const formElements = require('./form-elements.cjs');
-const index = require('./index.cjs');
-const definition$1 = require('./definition11.cjs');
 const option = require('./option.cjs');
+const definition$1 = require('./definition11.cjs');
+const index = require('./index.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
@@ -41,7 +42,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.Select = class Select extends affix.AffixIconWithTrailing(FormAssociatedSelect) {
+exports.Select = class Select extends hostSemantics.HostSemantics(
+  affix.AffixIconWithTrailing(FormAssociatedSelect)
+) {
   constructor() {
     super(...arguments);
     this.activeIndex = -1;
@@ -852,11 +855,14 @@ const SelectTemplate = (context) => {
   return vividElement.html`
 		<template
 			class="base"
-			role="combobox"
-			aria-haspopup="${(x) => x.collapsible ? "listbox" : "false"}"
+			${hostSemantics.applyHostSemantics({
+    role: "combobox",
+    ariaLabel: (x) => x.ariaLabel ?? x.label,
+    ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
+    ariaExpanded: (x) => x.open,
+    ariaDisabled: (x) => x.disabled
+  })}
 			aria-controls="${(x) => x.listboxId}"
-			aria-expanded="${(x) => x.open}"
-			aria-disabled="${(x) => x.disabled}"
 			aria-activedescendant="${(x) => x._activeDescendant}"
 			tabindex="${(x) => !x.disabled ? "0" : null}"
 			@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"

package/shared/definition45.js

@@ -1,18 +1,19 @@
 import { P as Popup, p as popupDefinition } from './definition65.js';
 import { i as iconDefinition } from './definition28.js';
 import { l as listboxOptionDefinition } from './definition36.js';
-import { D as DOM, O as Observable, o as observable, a as attr, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { D as DOM, O as Observable, o as observable, a as attr, v as volatile, 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 { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
 import { F as FormAssociated } from './form-associated.js';
 import { i as inRange } from './numbers.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { u as uniqueId } from './strings.js';
 import { a as keySpace, b as keyEscape, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome, k as keyEnter } from './key-codes.js';
 import { F as FormElementSuccessText, a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { c as chevronTemplateFactory } from './definition11.js';
 import { L as ListboxOption } from './option.js';
+import { c as chevronTemplateFactory } from './definition11.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { r as ref } from './ref.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
@@ -39,7 +40,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let Select = class extends AffixIconWithTrailing(FormAssociatedSelect) {
+let Select = class extends HostSemantics(
+  AffixIconWithTrailing(FormAssociatedSelect)
+) {
   constructor() {
     super(...arguments);
     this.activeIndex = -1;
@@ -850,11 +853,14 @@ const SelectTemplate = (context) => {
   return html`
 		<template
 			class="base"
-			role="combobox"
-			aria-haspopup="${(x) => x.collapsible ? "listbox" : "false"}"
+			${applyHostSemantics({
+    role: "combobox",
+    ariaLabel: (x) => x.ariaLabel ?? x.label,
+    ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
+    ariaExpanded: (x) => x.open,
+    ariaDisabled: (x) => x.disabled
+  })}
 			aria-controls="${(x) => x.listboxId}"
-			aria-expanded="${(x) => x.open}"
-			aria-disabled="${(x) => x.disabled}"
 			aria-activedescendant="${(x) => x._activeDescendant}"
 			tabindex="${(x) => !x.disabled ? "0" : null}"
 			@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"

package/shared/definition46.cjs

@@ -86,7 +86,12 @@ function checkbox(context) {
     (x) => x.controlType !== "radio",
     vividElement.html`
 		<${checkboxTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			${delegatesAria.delegateAria(
+      {
+        ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
+      },
+      { onlySpecified: true }
+    )}
 			@change="${(x) => handleControlChange(x)}"
 			class="control checkbox"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
@@ -101,7 +106,12 @@ function radio(context) {
     (x) => x.controlType === "radio",
     vividElement.html`
 		<${radioTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			${delegatesAria.delegateAria(
+      {
+        ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
+      },
+      { onlySpecified: true }
+    )}
 			@change="${(x) => handleControlChange(x)}"
 			class="control radio"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
@@ -111,13 +121,15 @@ function radio(context) {
   )} `;
 }
 const SelectableBoxTemplate = (context) => {
-  return vividElement.html`<template role="presentation">
+  return vividElement.html`<template>
 		<div
 			class="${getClasses}"
 			tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
-			role="${(x) => x.clickableBox || x.clickable ? "button" : null}"
-			aria-pressed="${(x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null}"
-			aria-label="${(x) => x.clickableBox || x.clickable ? x.ariaLabel : null}"
+			${delegatesAria.delegateAria({
+    role: (x) => x.clickableBox || x.clickable ? "button" : null,
+    ariaPressed: (x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null,
+    ariaLabel: (x) => x.clickableBox || x.clickable ? x.ariaLabel : null
+  })}
 			@keydown="${(x, c) => x._handleKeydown(c.event)}"
 			@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
 		>

package/shared/definition46.js

@@ -1,7 +1,7 @@
 import { C as Checkbox, c as checkboxDefinition } from './definition15.js';
 import { R as Radio, r as radioDefinition } from './definition41.js';
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { C as Connotation } from './enums.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -84,7 +84,12 @@ function checkbox(context) {
     (x) => x.controlType !== "radio",
     html`
 		<${checkboxTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			${delegateAria(
+      {
+        ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
+      },
+      { onlySpecified: true }
+    )}
 			@change="${(x) => handleControlChange(x)}"
 			class="control checkbox"
 			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
@@ -99,7 +104,12 @@ function radio(context) {
     (x) => x.controlType === "radio",
     html`
 		<${radioTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			${delegateAria(
+      {
+        ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
+      },
+      { onlySpecified: true }
+    )}
 			@change="${(x) => handleControlChange(x)}"
 			class="control radio"
 			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
@@ -109,13 +119,15 @@ function radio(context) {
   )} `;
 }
 const SelectableBoxTemplate = (context) => {
-  return html`<template role="presentation">
+  return html`<template>
 		<div
 			class="${getClasses}"
 			tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
-			role="${(x) => x.clickableBox || x.clickable ? "button" : null}"
-			aria-pressed="${(x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null}"
-			aria-label="${(x) => x.clickableBox || x.clickable ? x.ariaLabel : null}"
+			${delegateAria({
+    role: (x) => x.clickableBox || x.clickable ? "button" : null,
+    ariaPressed: (x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null,
+    ariaLabel: (x) => x.clickableBox || x.clickable ? x.ariaLabel : null
+  })}
 			@keydown="${(x, c) => x._handleKeydown(c.event)}"
 			@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
 		>

package/shared/definition47.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 { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';

package/shared/definition48.js

@@ -1,5 +1,5 @@
 import { p as popupDefinition } from './definition65.js';
-import { V as VividElement, a as attr, o as observable, n as nullableNumberConverter, v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, n as nullableNumberConverter, v as volatile, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, f as keyArrowDown, h as keyArrowLeft, e as keyArrowUp, i as keyArrowRight } from './key-codes.js';
 import { D as Direction, g as getDirection } from './direction.js';
 import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, S as SliderTemplate } from './slider.template.js';

package/shared/definition49.cjs

@@ -83,7 +83,9 @@ function actionButton(context) {
 		<button
 			${ref.ref("_action")}
 			class="control ${getClasses}"
-			aria-label="${(x) => x.ariaLabel}"
+			${delegatesAria.delegateAria({
+    ariaExpanded: null
+  })}
 			?disabled="${(x) => x.disabled}"
 			@click="${(x) => x.$emit("action-click", void 0, {
     bubbles: false
@@ -102,7 +104,12 @@ function indicatorButton(context) {
 			class="indicator ${getClasses}"
 			?disabled="${(x) => x.disabled}"
 			aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
-			aria-expanded="${(x) => x.ariaExpanded}"
+			${delegatesAria.delegateAria(
+    {
+      ariaExpanded: (x) => x.ariaExpanded
+    },
+    { onlySpecified: true }
+  )}
 			@click="${(x) => x.$emit("indicator-click", void 0, {
     bubbles: false
   })}"
@@ -112,7 +119,7 @@ function indicatorButton(context) {
 	`;
 }
 const SplitButtonTemplate = (context) => {
-  return vividElement.html` <template role="presentation">
+  return vividElement.html` <template>
 		<div class="base" role="group">
 			${actionButton(context)} ${indicatorButton(context)}
 			<slot></slot>

package/shared/definition49.js

@@ -1,7 +1,7 @@
 import { i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { 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 { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
@@ -81,7 +81,9 @@ function actionButton(context) {
 		<button
 			${ref("_action")}
 			class="control ${getClasses}"
-			aria-label="${(x) => x.ariaLabel}"
+			${delegateAria({
+    ariaExpanded: null
+  })}
 			?disabled="${(x) => x.disabled}"
 			@click="${(x) => x.$emit("action-click", void 0, {
     bubbles: false
@@ -100,7 +102,12 @@ function indicatorButton(context) {
 			class="indicator ${getClasses}"
 			?disabled="${(x) => x.disabled}"
 			aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
-			aria-expanded="${(x) => x.ariaExpanded}"
+			${delegateAria(
+    {
+      ariaExpanded: (x) => x.ariaExpanded
+    },
+    { onlySpecified: true }
+  )}
 			@click="${(x) => x.$emit("indicator-click", void 0, {
     bubbles: false
   })}"
@@ -110,7 +117,7 @@ function indicatorButton(context) {
 	`;
 }
 const SplitButtonTemplate = (context) => {
-  return html` <template role="presentation">
+  return html` <template>
 		<div class="base" role="group">
 			${actionButton(context)} ${indicatorButton(context)}
 			<slot></slot>

package/shared/definition5.cjs

@@ -287,8 +287,13 @@ function renderSlider(context) {
 function renderTimestamp() {
   return vividElement.html` <div class="time-stamp">
 		<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
-		<span>/</span>
-		<span class="total-time">${(x) => formatTime(x.duration)}</span>
+		${when.when(
+    (x) => x.duration && x.duration !== Infinity,
+    vividElement.html`
+				<span>/</span>
+				<span class="total-time">${(x) => formatTime(x.duration)}</span>
+			`
+  )}
 	</div>`;
 }
 function handlePlaybackRateClick(playbackRate, context) {

package/shared/definition5.js

@@ -1,7 +1,7 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { S as Slider, s as sliderDefinition } from './definition48.js';
 import { e as Menu, M as MenuItem, c as menuDefinition, m as menuItemDefinition } from './definition30.js';
-import { O as Observable, V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { O as Observable, V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { M as MediaSkipBy } from './enums.js';
 import { L as Localized } from './localized.js';
 import { g as getPlaybackRatesArray } from './playbackRates.js';
@@ -285,8 +285,13 @@ function renderSlider(context) {
 function renderTimestamp() {
   return html` <div class="time-stamp">
 		<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
-		<span>/</span>
-		<span class="total-time">${(x) => formatTime(x.duration)}</span>
+		${when(
+    (x) => x.duration && x.duration !== Infinity,
+    html`
+				<span>/</span>
+				<span class="total-time">${(x) => formatTime(x.duration)}</span>
+			`
+  )}
 	</div>`;
 }
 function handlePlaybackRateClick(playbackRate, context) {

package/shared/definition50.cjs

@@ -105,14 +105,15 @@ const getClasses = (_) => classNames.classNames(
   ]
 );
 const SwitchTemplate = vividElement.html`
-	<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+	<template>
 		<div
 			class="${getClasses}"
-			role="switch"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-checked="${(x) => x.checked}"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
+			${delegatesAria.delegateAria({
+  role: "switch",
+  ariaChecked: (x) => x.checked,
+  ariaDisabled: (x) => x.disabled,
+  ariaReadOnly: (x) => x.readOnly
+})}
 			tabindex="${(x) => x.disabled ? null : 0}"
 			@keypress="${(x, c) => x.keypressHandler(c.event)}"
 			@click="${(x) => x.clickHandler()}"

package/shared/definition50.js

@@ -1,6 +1,6 @@
 import { 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 { D as DelegatesAria } from './delegates-aria.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 { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
 import { a as keySpace, k as keyEnter } from './key-codes.js';
 import { c as classNames } from './class-names.js';
@@ -103,14 +103,15 @@ const getClasses = (_) => classNames(
   ]
 );
 const SwitchTemplate = html`
-	<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+	<template>
 		<div
 			class="${getClasses}"
-			role="switch"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-checked="${(x) => x.checked}"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
+			${delegateAria({
+  role: "switch",
+  ariaChecked: (x) => x.checked,
+  ariaDisabled: (x) => x.disabled,
+  ariaReadOnly: (x) => x.readOnly
+})}
 			tabindex="${(x) => x.disabled ? null : 0}"
 			@keypress="${(x, c) => x.keypressHandler(c.event)}"
 			@click="${(x) => x.clickHandler()}"

package/shared/definition51.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 
-class TabPanel extends vividElement.VividElement {
+class TabPanel extends hostSemantics.HostSemantics(vividElement.VividElement) {
 }
 
 const TabPanelTemplate = vividElement.html`
-	<template slot="tabpanel" role="tabpanel">
+	<template slot="tabpanel" ${hostSemantics.applyHostSemantics({ role: "tabpanel" })}>
 		<slot></slot>
 	</template>
 `;

package/shared/definition51.js

@@ -1,10 +1,11 @@
-import { V as VividElement, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
 
-class TabPanel extends VividElement {
+class TabPanel extends HostSemantics(VividElement) {
 }
 
 const TabPanelTemplate = html`
-	<template slot="tabpanel" role="tabpanel">
+	<template slot="tabpanel" ${applyHostSemantics({ role: "tabpanel" })}>
 		<slot></slot>
 	</template>
 `;

package/shared/definition52.cjs

@@ -3,6 +3,7 @@
 const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
 const affix = require('./affix.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 const localized = require('./localized.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -17,7 +18,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tab extends affix.AffixIconWithTrailing(localized.Localized(vividElement.VividElement)) {
+class Tab extends hostSemantics.HostSemantics(
+  affix.AffixIconWithTrailing(localized.Localized(vividElement.VividElement))
+) {
   constructor() {
     super(...arguments);
     this.removable = false;
@@ -92,9 +95,10 @@ const TabTemplate = (context) => {
   return vividElement.html`
 		<template
 			slot="tab"
-			role="tab"
-			aria-disabled="${(x) => x.disabled}"
-			aria-selected="${(x) => x.ariaSelected}"
+			${hostSemantics.applyHostSemantics({
+    role: "tab",
+    ariaDisabled: (x) => x.disabled
+  })}
 			@keydown="${(x, c) => x._onKeyDown(c.event)}"
 		>
 			<div class="${getClasses}">

package/shared/definition52.js

@@ -1,6 +1,7 @@
 import { i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
 import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';
 
@@ -15,7 +16,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tab extends AffixIconWithTrailing(Localized(VividElement)) {
+class Tab extends HostSemantics(
+  AffixIconWithTrailing(Localized(VividElement))
+) {
   constructor() {
     super(...arguments);
     this.removable = false;
@@ -90,9 +93,10 @@ const TabTemplate = (context) => {
   return html`
 		<template
 			slot="tab"
-			role="tab"
-			aria-disabled="${(x) => x.disabled}"
-			aria-selected="${(x) => x.ariaSelected}"
+			${applyHostSemantics({
+    role: "tab",
+    ariaDisabled: (x) => x.disabled
+  })}
 			@keydown="${(x, c) => x._onKeyDown(c.event)}"
 		>
 			<div class="${getClasses}">

package/shared/definition53.js

@@ -1,6 +1,6 @@
 import { t as tabDefinition } from './definition52.js';
 import { t as tabPanelDefinition } from './definition51.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 { i as keyArrowRight, h as keyArrowLeft, f as keyArrowDown, e as keyArrowUp, d as keyEnd, g as keyHome } from './key-codes.js';
 import { u as uniqueId } from './strings.js';
 import { l as limit } from './numbers.js';

package/shared/definition54.cjs

@@ -13,9 +13,10 @@ const getClasses = (_) => classNames.classNames("base");
 const TagGroupTemplate = vividElement.html`
 	<div
 		class="${getClasses}"
-		role="listbox"
-		aria-orientation="horizontal"
-		aria-label="${(x) => x.ariaLabel}"
+		${delegatesAria.delegateAria({
+  role: "listbox",
+  ariaOrientation: "horizontal"
+})}
 	>
 		<slot></slot>
 	</div>

package/shared/definition54.js

@@ -1,5 +1,5 @@
-import { V as VividElement, 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, 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{display:flex;flex-wrap:wrap;gap:8px}";
@@ -11,9 +11,10 @@ const getClasses = (_) => classNames("base");
 const TagGroupTemplate = html`
 	<div
 		class="${getClasses}"
-		role="listbox"
-		aria-orientation="horizontal"
-		aria-label="${(x) => x.ariaLabel}"
+		${delegateAria({
+  role: "listbox",
+  ariaOrientation: "horizontal"
+})}
 	>
 		<slot></slot>
 	</div>