@vonage/vivid 4.22.0 → 4.23.0

package/shared/definition38.js

@@ -1,6 +1,6 @@
-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 BaseProgress } from './base-progress.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
@@ -31,16 +31,15 @@ const getClasses = ({ connotation, size, paused }) => classNames(
   [`size-${size}`, !!size]
 );
 const progressSegments = 44;
-const ProgressRingTemplate = html`<template
-	role="${(x) => x.ariaLabel ? "presentation" : null}"
->
+const ProgressRingTemplate = html`<template>
 	<div
-		role="progressbar"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-valuenow="${(x) => x.value}"
-		aria-valuemin="${(x) => x.min}"
-		aria-valuemax="${(x) => x.max}"
 		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
+		${delegateAria({
+  role: "progressbar",
+  ariaValueNow: (x) => x.value,
+  ariaValueMin: (x) => x.min,
+  ariaValueMax: (x) => x.max
+})}
 	>
 		${when(
   (x) => typeof x.value === "number",

package/shared/definition39.cjs

@@ -52,16 +52,15 @@ function indeterminate() {
 		<span class="indicator-2"></span>
 	</span>`;
 }
-const ProgressTemplate = vividElement.html`<template
-	role="${(x) => x.ariaLabel ? "presentation" : null}"
->
+const ProgressTemplate = vividElement.html`<template>
 	<div
-		role="progressbar"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-valuenow="${(x) => x.value}"
-		aria-valuemin="${(x) => x.min}"
-		aria-valuemax="${(x) => x.max}"
 		class="${getClasses}"
+		${delegatesAria.delegateAria({
+  role: "progressbar",
+  ariaValueNow: (x) => x.value,
+  ariaValueMin: (x) => x.min,
+  ariaValueMax: (x) => x.max
+})}
 	>
 		<div class="progress">
 			${when.when((x) => typeof x.value === "number", determinate())}

package/shared/definition39.js

@@ -1,6 +1,6 @@
-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 BaseProgress } from './base-progress.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
@@ -50,16 +50,15 @@ function indeterminate() {
 		<span class="indicator-2"></span>
 	</span>`;
 }
-const ProgressTemplate = html`<template
-	role="${(x) => x.ariaLabel ? "presentation" : null}"
->
+const ProgressTemplate = html`<template>
 	<div
-		role="progressbar"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-valuenow="${(x) => x.value}"
-		aria-valuemin="${(x) => x.min}"
-		aria-valuemax="${(x) => x.max}"
 		class="${getClasses}"
+		${delegateAria({
+  role: "progressbar",
+  ariaValueNow: (x) => x.value,
+  ariaValueMin: (x) => x.min,
+  ariaValueMax: (x) => x.max
+})}
 	>
 		<div class="progress">
 			${when((x) => typeof x.value === "number", determinate())}

package/shared/definition4.js

@@ -1,6 +1,6 @@
 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, n as nullableNumberConverter, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { i as iconDefinition } from './definition28.js';
 import { C as Connotation } from './enums.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';

package/shared/definition40.cjs

@@ -3,6 +3,7 @@
 const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition41.cjs');
 const keyCodes = require('./key-codes.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 const aria = require('./aria.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
@@ -18,7 +19,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class RadioGroup extends vividElement.VividElement {
+class RadioGroup extends hostSemantics.HostSemantics(vividElement.VividElement) {
   constructor() {
     super(...arguments);
     this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
@@ -250,10 +251,12 @@ __decorateClass([
 const RadioGroupTemplate = (context) => {
   return vividElement.html`
 		<template
-			role="radiogroup"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
-			aria-orientation="${(x) => x.orientation}"
+			${hostSemantics.applyHostSemantics({
+    role: "radiogroup",
+    ariaDisabled: (x) => x.disabled,
+    ariaReadOnly: (x) => x.readOnly,
+    ariaOrientation: (x) => x.orientation
+  })}
 			@keydown="${(x, c) => x.keydownHandler(c.event)}"
 			@focusin="${(x, c) => x.focusInHandler(c.event)}"
 		>

package/shared/definition40.js

@@ -1,6 +1,7 @@
-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 { R as Radio, r as radioDefinition } from './definition41.js';
 import { i as keyArrowRight, h as keyArrowLeft, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
+import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
 import { O as Orientation } from './aria.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';
@@ -16,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class RadioGroup extends VividElement {
+class RadioGroup extends HostSemantics(VividElement) {
   constructor() {
     super(...arguments);
     this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
@@ -248,10 +249,12 @@ __decorateClass([
 const RadioGroupTemplate = (context) => {
   return html`
 		<template
-			role="radiogroup"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
-			aria-orientation="${(x) => x.orientation}"
+			${applyHostSemantics({
+    role: "radiogroup",
+    ariaDisabled: (x) => x.disabled,
+    ariaReadOnly: (x) => x.readOnly,
+    ariaOrientation: (x) => x.orientation
+  })}
 			@keydown="${(x, c) => x.keydownHandler(c.event)}"
 			@focusin="${(x, c) => x.focusInHandler(c.event)}"
 		>

package/shared/definition41.js

@@ -1,4 +1,4 @@
-import { V as VividElement, D as DOM, 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, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
 import { a as keySpace } from './key-codes.js';
 import { c as classNames } from './class-names.js';

package/shared/definition42.js

@@ -1,5 +1,5 @@
 import { P as Popup, a as PlacementStrategy, p as popupDefinition } from './definition65.js';
-import { V as VividElement, o as observable, a as attr, n as nullableNumberConverter, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, o as observable, a as attr, n as nullableNumberConverter, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, e as keyArrowUp, h as keyArrowLeft, f as keyArrowDown, i as keyArrowRight } from './key-codes.js';
 import { F as FormAssociated } from './form-associated.js';
 import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, g as getMarkersTemplate } from './slider.template.js';