@vonage/vivid 4.25.0 → 4.27.0

package/shared/definition36.js

@@ -1,8 +1,9 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { d as dividerDefinition } from './definition23.js';
-import { D as DOM, V as VividElement, 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 VisuallyHidden, v as visuallyHiddenDefinition } from './definition66.js';
 import { i as iconDefinition } from './definition28.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from './mixins.js';
+import { D as DOM, V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { F as FormAssociated } from './form-associated.js';
 import { W as WithErrorText } from './with-error-text.js';
@@ -36,6 +37,9 @@ function makeStep(element, direction) {
   const value = parseFloat(element.value);
   const stepUpValue = !isNaN(value) ? value + direction * element.step : element.min > 0 ? element.min : element.max < 0 ? element.max : !element.min ? direction * element.step : 0;
   element.value = Number(stepUpValue.toFixed(12)).toString();
+  element._updatedValueAnnouncement = element.locale.numberField.updatedValueAnnouncement(
+    element._presentationValue
+  );
 }
 const buildNumberPatterns = (decimalSeparator) => {
   const ds = decimalSeparator.source;
@@ -66,7 +70,7 @@ class NumberField extends WithFeedback(
     this.proxy = document.createElement("input");
     this.readOnly = false;
     this.autofocus = false;
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    // eslint-disable-next-line @repo/repo/no-attribute-default-value
     this.step = 1;
     /**
      * Flag to indicate that the value change is from the user input
@@ -74,6 +78,7 @@ class NumberField extends WithFeedback(
      */
     this.isUserInput = false;
     this._presentationValue = "";
+    this._updatedValueAnnouncement = "";
     this.incrementButtonAriaLabel = null;
     this.decrementButtonAriaLabel = null;
   }
@@ -279,6 +284,9 @@ __decorateClass([
 __decorateClass([
   observable
 ], NumberField.prototype, "_presentationValue");
+__decorateClass([
+  observable
+], NumberField.prototype, "_updatedValueAnnouncement");
 __decorateClass([
   attr({ attribute: "increment-button-aria-label" })
 ], NumberField.prototype, "incrementButtonAriaLabel");
@@ -333,29 +341,29 @@ function numberControlButtons(context) {
   const buttonTag = context.tagFor(Button);
   const dividerTag = context.tagFor(Divider);
   return html`
-			<div class="control-buttons"
-			     ?inert="${(x) => x.disabled || x.readOnly}">
-				<${buttonTag} id="subtract" icon="minus-line"
-								?disabled="${(x) => x.disabled || x.readOnly}"
-								aria-label=${(x) => x.decrementButtonAriaLabel || x.locale.numberField.decrementButtonLabel}
-					            shape="${setControlButtonShape}"
-								type="button"
-					            size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
-								tabindex="${getTabIndex}"
-					            @click="${(x) => x.stepDown()}"></${buttonTag}>
-				<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
-				<${buttonTag} id="add" icon="plus-line"
-								?disabled="${(x) => x.disabled || x.readOnly}"
-								aria-label=${(x) => x.incrementButtonAriaLabel || x.locale.numberField.incrementButtonLabel}
-					            shape="${setControlButtonShape}"
-								type="button"
-					            size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
-								tabindex="${getTabIndex}"
-					            @click="${(x) => x.stepUp()}"></${buttonTag}>
-		    </div>
+		<div class="control-buttons" ?inert="${(x) => x.disabled || x.readOnly}">
+			<${buttonTag} id="subtract" icon="minus-line"
+				?disabled="${(x) => x.disabled || x.readOnly}"
+				aria-label=${(x) => x.decrementButtonAriaLabel || x.locale.numberField.decrementButtonLabel(x.step)}
+				shape="${setControlButtonShape}"
+				type="button"
+				size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
+				tabindex="${getTabIndex}"
+				@click="${(x) => x.stepDown()}"></${buttonTag}>
+			<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
+			<${buttonTag} id="add" icon="plus-line"
+				?disabled="${(x) => x.disabled || x.readOnly}"
+				aria-label=${(x) => x.incrementButtonAriaLabel || x.locale.numberField.incrementButtonLabel(x.step)}
+				shape="${setControlButtonShape}"
+				type="button"
+				size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
+				tabindex="${getTabIndex}"
+				@click="${(x) => x.stepUp()}"></${buttonTag}>
+			</div>
 	`;
 }
 const NumberFieldTemplate = (context) => {
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
   return html`
 		<div class="base ${getStateClasses}">
 			${when((x) => x.label, renderLabel())}
@@ -389,6 +397,8 @@ const NumberFieldTemplate = (context) => {
 				${() => numberControlButtons(context)}
 			</div>
 			${(x) => x._getFeedbackTemplate(context)}
+			<${visuallyHiddenTag} id="value-announcement" role="status" aria-atomic="true">
+				${(x) => x._updatedValueAnnouncement}</${visuallyHiddenTag}>
 		</div>
 	`;
 };
@@ -401,7 +411,8 @@ const numberFieldDefinition = defineVividComponent(
     buttonDefinition,
     dividerDefinition,
     iconDefinition,
-    feedbackMessageDefinition
+    feedbackMessageDefinition,
+    visuallyHiddenDefinition
   ],
   {
     styles,

package/shared/definition38.cjs

@@ -2,6 +2,7 @@
 
 const definition = require('./definition11.cjs');
 const vividElement = require('./vivid-element.cjs');
+const localized = require('./localized.cjs');
 const enums = require('./enums.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
@@ -27,7 +28,7 @@ const totalConverter = {
   fromView: (value) => parseInt(value, 10),
   toView: (value) => value.toString()
 };
-class Pagination extends vividElement.VividElement {
+class Pagination extends localized.Localized(vividElement.VividElement) {
   constructor() {
     super();
     this.navIcons = false;
@@ -169,21 +170,25 @@ const paginationButtonRenderer = (buttonTag) => vividElement.html` ${when.when(
   (value) => value !== "...",
   vividElement.html`
 		<${buttonTag} class="vwc-pagination-button"
-									label="${(value) => value}"
-									appearance="${getButtonAppearance}"
-									size="${(_, { parent: x }) => getPaginationSize(x)}"
-									shape="${(_, { parent: x }) => getPaginationShape(x)}"
-									style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
-									tabindex="0"
-									aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
-									@click="${handleSelection}"
-									@keydown="${handleKeyDown}">
+			label="${(value) => value}"
+			appearance="${getButtonAppearance}"
+			size="${(_, { parent: x }) => getPaginationSize(x)}"
+			shape="${(_, { parent: x }) => getPaginationShape(x)}"
+			style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
+			tabindex="0"
+			aria-label="${(value, { parent: x }) => x.locale.pagination.goToPageLabel(value)}"
+			aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
+			@click="${handleSelection}"
+			@keydown="${handleKeyDown}">
 		</${buttonTag}>
 	`
 )}
 ${when.when(
   (value) => value === "...",
-  vividElement.html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+  vividElement.html` <div
+		class="dots size-${(_, { parent: x }) => getPaginationSize(x)}"
+		aria-hidden="true"
+	>
 		...
 	</div>`
 )}`;
@@ -208,12 +213,13 @@ const PaginationTemplate = (context) => {
   return vividElement.html`
 	<div class="${getClasses}">
 		<${buttonTag} class="prev-button" ${ref.ref("prevButton")}
-									label="${(x) => !x.navIcons ? "Previous" : null}"
-									icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
+			label="${(x) => !x.navIcons ? "Previous" : null}"
+			icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
+			size="${getPaginationSize}"
+			shape="${getPaginationShape}"
+			?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
+			@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
+			aria-label="${(x) => x.locale.pagination.previousPageLabel}"
 		></${buttonTag}>
 		<div id="buttons-wrapper" class="buttons-wrapper" ${children.children({
     property: "paginationButtons",
@@ -222,12 +228,13 @@ const PaginationTemplate = (context) => {
 			${repeat.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>
 		<${buttonTag} class="next-button" ${ref.ref("nextButton")}
-									label="${(x) => !x.navIcons ? "Next" : null}"
-									icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
+			label="${(x) => !x.navIcons ? "Next" : null}"
+			icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
+			size="${getPaginationSize}"
+			shape="${getPaginationShape}"
+			?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
+			@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
+			aria-label="${(x) => x.locale.pagination.nextPageLabel}"
 		></${buttonTag}>
 </div>`;
 };

package/shared/definition38.js

@@ -1,5 +1,6 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { L as Localized } from './localized.js';
 import { b as Size, S as Shape } from './enums.js';
 import { e as elements } from './slotted.js';
 import { c as classNames } from './class-names.js';
@@ -25,7 +26,7 @@ const totalConverter = {
   fromView: (value) => parseInt(value, 10),
   toView: (value) => value.toString()
 };
-class Pagination extends VividElement {
+class Pagination extends Localized(VividElement) {
   constructor() {
     super();
     this.navIcons = false;
@@ -167,21 +168,25 @@ const paginationButtonRenderer = (buttonTag) => html` ${when(
   (value) => value !== "...",
   html`
 		<${buttonTag} class="vwc-pagination-button"
-									label="${(value) => value}"
-									appearance="${getButtonAppearance}"
-									size="${(_, { parent: x }) => getPaginationSize(x)}"
-									shape="${(_, { parent: x }) => getPaginationShape(x)}"
-									style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
-									tabindex="0"
-									aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
-									@click="${handleSelection}"
-									@keydown="${handleKeyDown}">
+			label="${(value) => value}"
+			appearance="${getButtonAppearance}"
+			size="${(_, { parent: x }) => getPaginationSize(x)}"
+			shape="${(_, { parent: x }) => getPaginationShape(x)}"
+			style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
+			tabindex="0"
+			aria-label="${(value, { parent: x }) => x.locale.pagination.goToPageLabel(value)}"
+			aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
+			@click="${handleSelection}"
+			@keydown="${handleKeyDown}">
 		</${buttonTag}>
 	`
 )}
 ${when(
   (value) => value === "...",
-  html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+  html` <div
+		class="dots size-${(_, { parent: x }) => getPaginationSize(x)}"
+		aria-hidden="true"
+	>
 		...
 	</div>`
 )}`;
@@ -206,12 +211,13 @@ const PaginationTemplate = (context) => {
   return html`
 	<div class="${getClasses}">
 		<${buttonTag} class="prev-button" ${ref("prevButton")}
-									label="${(x) => !x.navIcons ? "Previous" : null}"
-									icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
+			label="${(x) => !x.navIcons ? "Previous" : null}"
+			icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
+			size="${getPaginationSize}"
+			shape="${getPaginationShape}"
+			?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
+			@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
+			aria-label="${(x) => x.locale.pagination.previousPageLabel}"
 		></${buttonTag}>
 		<div id="buttons-wrapper" class="buttons-wrapper" ${children({
     property: "paginationButtons",
@@ -220,12 +226,13 @@ const PaginationTemplate = (context) => {
 			${repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>
 		<${buttonTag} class="next-button" ${ref("nextButton")}
-									label="${(x) => !x.navIcons ? "Next" : null}"
-									icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
+			label="${(x) => !x.navIcons ? "Next" : null}"
+			icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
+			size="${getPaginationSize}"
+			shape="${getPaginationShape}"
+			?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
+			@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
+			aria-label="${(x) => x.locale.pagination.nextPageLabel}"
 		></${buttonTag}>
 </div>`;
 };

package/shared/definition4.cjs

@@ -11,7 +11,7 @@ const localized = require('./localized.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}";
+const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition4.js

@@ -9,7 +9,7 @@ import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}";
+const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition41.cjs

@@ -24,7 +24,7 @@ class RadioGroup extends mixins.WithFeedback(vividElement.VividElement) {
   constructor() {
     super(...arguments);
     this.errorValidationMessage = "";
-    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.orientation = // eslint-disable-next-line @repo/repo/no-attribute-default-value
     aria.Orientation.horizontal;
     this.slottedRadioButtons = [];
     this.radioErrorHandler = (e) => {

package/shared/definition41.js

@@ -22,7 +22,7 @@ class RadioGroup extends WithFeedback(VividElement) {
   constructor() {
     super(...arguments);
     this.errorValidationMessage = "";
-    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.orientation = // eslint-disable-next-line @repo/repo/no-attribute-default-value
     Orientation.horizontal;
     this.slottedRadioButtons = [];
     this.radioErrorHandler = (e) => {

package/shared/definition42.cjs

@@ -114,7 +114,7 @@ class Radio extends withErrorText.WithErrorText(
   connectedCallback() {
     super.connectedCallback();
     vividElement.DOM.queueUpdate(this.validate);
-    if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
+    if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
       }
@@ -130,7 +130,7 @@ class Radio extends withErrorText.WithErrorText(
   }
   isInsideRadioGroup() {
     const parent = this.closest(
-      "[role=radiogroup]"
+      '[data-vvd-component="radio-group"]'
     );
     return parent !== null;
   }

package/shared/definition42.js

@@ -112,7 +112,7 @@ class Radio extends WithErrorText(
   connectedCallback() {
     super.connectedCallback();
     DOM.queueUpdate(this.validate);
-    if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
+    if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
       }
@@ -128,7 +128,7 @@ class Radio extends WithErrorText(
   }
   isInsideRadioGroup() {
     const parent = this.closest(
-      "[role=radiogroup]"
+      '[data-vvd-component="radio-group"]'
     );
     return parent !== null;
   }