@vonage/vivid-react 3.2.0 → 3.3.1

package/types/index.d.ts

@@ -6,9 +6,12 @@ declare module '@vonage/vivid-react';
 declare namespace JSX {
     interface IntrinsicElements {
         "vvd3-accordion": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-
+            "expand-mode": AccordionExpandMode;
         }>;
         "vvd3-accordion-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "heading-level": 1 | 2 | 3 | 4 | 5 | 6;
+            "expanded": boolean;
+            "id": string;
             "heading": string | undefined;
             "no-indicator": boolean;
             "meta": string | undefined;
@@ -34,15 +37,6 @@ declare namespace JSX {
             "strategy": AlertStrategy | undefined;
             "open": boolean;
         }>;
-        "vvd3-appearance-ui": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-            "appearance": AppearanceUIAppearance | undefined;
-            "hovered": boolean;
-            "active": boolean;
-            "selected": boolean;
-            "disabled": boolean;
-            "readonly": boolean;
-            "text": string | undefined;
-        }>;
         "vvd3-audio-player": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "play-button-aria-label": | string
 		| null;
@@ -92,13 +86,14 @@ declare namespace JSX {
             "text": string | undefined;
         }>;
         "vvd3-button": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-            "title": string;
+            "title": boolean;
             "connotation": ButtonConnotation | undefined;
             "shape": ButtonShape | undefined;
             "appearance": ButtonAppearance | undefined;
             "size": ButtonSize | undefined;
             "stacked": boolean;
             "pending": boolean;
+            "dropdown-indicator": boolean;
             "active": boolean;
             "label": string | undefined;
             "href": string | undefined;
@@ -108,6 +103,12 @@ declare namespace JSX {
             "referrerpolicy": string | undefined;
             "rel": string | undefined;
             "target": '_self' | '_blank' | '_parent' | '_top' | undefined;
+            "form": string;
+            "formaction": string;
+            "formenctype": string;
+            "formmethod": string;
+            "formtarget": '_self' | '_blank' | '_parent' | '_top';
+            "type": 'submit' | 'reset' | 'button';
         }>;
         "vvd3-calendar": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "datetime": Date | string | undefined;
@@ -131,25 +132,43 @@ declare namespace JSX {
             "text": string | undefined;
             "icon": string | undefined;
             "elevation": 0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined;
+        }>;
+        "vvd3-form-associated-checkbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
         }>;
         "vvd3-checkbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "aria-label": string | null;
             "tabindex": string | null;
             "connotation": CheckboxConnotation | undefined;
+            "aria-checked": AriaCheckedStates | null;
+            "readonly": boolean;
         }>;
         "vvd3-combobox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "autocomplete": ComboboxAutocomplete | undefined;
             "appearance": ComboboxAppearance | undefined;
+            "shape": ComboboxShape | undefined;
+            "scale": ComboboxSize | undefined;
             "placement": PopupPlacement | undefined;
             "fixed-dropdown": boolean;
+            "open": boolean;
+            "placeholder": string;
+            "disabled": boolean;
         }>;
         "vvd3-data-grid-cell": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "cell-type": DataGridCellTypes;
+            "grid-column": string;
             "aria-selected": string | null;
             "aria-sort": string | null;
         }>;
         "vvd3-data-grid-row": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "grid-template-columns": string;
+            "row-type": DataGridRowTypes;
             "aria-selected": string | null;
         }>;
         "vvd3-data-grid": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "no-tabbing": boolean;
+            "generate-header": GenerateHeaderOptions;
+            "grid-template-columns": string;
             "selection-mode": DataGridSelectionMode | undefined;
         }>;
         "vvd3-date-picker": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
@@ -193,31 +212,50 @@ declare namespace JSX {
             "dismiss-button-aria-label": | string
 		| null;
             "no-light-dismiss": boolean;
+            "no-dismiss-on-esc": boolean;
+            "no-dismiss-button": boolean;
+            "non-dismissible": boolean;
+            "modal": boolean;
         }>;
         "vvd3-divider": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-
+            "role": DividerRole;
+            "orientation": Orientation;
         }>;
         "vvd3-elevation": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "dp": 0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined;
             "no-shadow": boolean | undefined;
+            "not-relative": boolean | undefined;
         }>;
         "vvd3-empty-state": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "connotation": EmptyStateConnotation | undefined;
             "headline": string | undefined;
             "icon": string | undefined;
+            "icon-decoration": EmptyStateIconDecoration | undefined;
         }>;
         "vvd3-fab": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "connotation": FabConnotation | undefined;
             "size": FABSize | undefined;
             "label": string | undefined;
+            "autofocus": boolean;
+            "form": string;
+            "formaction": string;
+            "formenctype": string;
+            "formmethod": string;
+            "formtarget": '_self' | '_blank' | '_parent' | '_top';
+            "type": 'submit' | 'reset' | 'button';
         }>;
         "vvd3-form-associated-file-picker": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
 
         }>;
         "vvd3-file-picker": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "single-file": boolean;
             "max-files": number | undefined;
             "max-file-size": number;
             "accept": string | undefined;
             "size": FilePickerSize | undefined;
+            "invalid-file-type-error": string | undefined;
+            "max-files-exceeded-error": string | undefined;
+            "file-too-big-error": string | undefined;
         }>;
         "vvd3-header": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "elevation-shadow": boolean;
@@ -246,19 +284,19 @@ declare namespace JSX {
             "row-spacing": RowSpacing | undefined;
             "auto-sizing": AUTO_SIZING | undefined;
         }>;
-        "vvd3-listbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-            "appearance": LisboxAppearance | undefined;
-            "orientation": 'horizontal' | 'vertical' | undefined;
-            "shape": ListboxShape | undefined;
-        }>;
         "vvd3-menu": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "aria-label": string | null;
             "placement": Placement | undefined;
             "trigger": 'auto' | 'legacy' | 'off' | undefined;
             "auto-dismiss": boolean;
+            "position-strategy": Strategy | undefined;
             "open": boolean;
         }>;
         "vvd3-menu-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "disabled": boolean;
+            "expanded": boolean;
+            "role": MenuItemRole;
+            "checked": boolean;
             "text": string | undefined;
             "text-secondary": string | undefined;
             "connotation": MenuItemConnotation | undefined;
@@ -295,6 +333,7 @@ declare namespace JSX {
             "maxlength": number;
             "minlength": number;
             "size": number;
+            "scale": NumberFieldSize | undefined;
             "step": number;
             "max": number;
             "min": number;
@@ -307,8 +346,14 @@ declare namespace JSX {
             "autoComplete": string | undefined;
         }>;
         "vvd3-listbox-option": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-            "text": string | undefined;
+            "disabled": boolean;
+            "selected": boolean;
+            "value": string;
             "label": string | undefined;
+            "text": string | undefined;
+        }>;
+        "vvd3-delegates-arialistbox-option": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
         }>;
         "vvd3-pagination": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "size": PaginationSize | undefined;
@@ -327,14 +372,25 @@ declare namespace JSX {
             "aria-label": string | null;
             "connotation": ProgressRingConnotation | undefined;
             "size": -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined;
+            "value": boolean;
+        }>;
+        "vvd3-form-associated-radio": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
         }>;
         "vvd3-radio": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "aria-label": string | null;
             "label": string | undefined;
             "connotation": RadioConnotation | undefined;
+            "readonly": boolean;
+            "name": string;
         }>;
         "vvd3-radio-group": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "label": string | undefined;
+            "readonly": boolean;
+            "disabled": boolean;
+            "name": string;
+            "value": string;
+            "orientation": Orientation | 'horizontal' | 'vertical';
         }>;
         "vvd3-form-associated-range-slider": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
 
@@ -353,12 +409,42 @@ declare namespace JSX {
             "aria-end-label": string | null;
             "markers": boolean;
             "connotation": RangeSliderConnotation | undefined;
+            "pin": boolean;
+        }>;
+        "vvd3-option-tag": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "shape": OptionTagShape | undefined;
+            "label": string | undefined;
+            "removable": boolean;
+            "disabled": boolean;
+        }>;
+        "vvd3-form-associated-searchable-select": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-searchable-select": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "appearance": SearchableSelectAppearance | undefined;
+            "shape": SearchableSelectShape | undefined;
+            "fixed-dropdown": boolean;
+            "placeholder": string | undefined;
+            "open": boolean;
+            "multiple": boolean;
+            "external-tags": boolean;
+            "max-lines": number | null;
+            "clearable": boolean;
+        }>;
+        "vvd3-form-associated-select": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "disabled": boolean;
         }>;
         "vvd3-select": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "multiple": boolean;
+            "open": boolean;
+            "scale": SelectSize | undefined;
             "appearance": SelectAppearance | undefined;
             "shape": SelectShape | undefined;
             "fixed-dropdown": boolean;
             "placeholder": string | undefined;
+        }>;
+        "vvd3-delegates-ariaselect": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
         }>;
         "vvd3-selectable-box": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "aria-label": string | null;
@@ -375,12 +461,6 @@ declare namespace JSX {
             "open": boolean;
             "trailing": boolean;
         }>;
-        "vvd3-slider": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-            "aria-label": string | null;
-            "aria-valuetext": string | null;
-            "markers": boolean;
-            "connotation": SliderConnotation | undefined;
-        }>;
         "vvd3-split-button": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "connotation": SplitButtonConnotation | undefined;
             "shape": SplitButtonShape | undefined;
@@ -395,24 +475,51 @@ declare namespace JSX {
             "indicator-aria-label": | string
 		| null;
         }>;
-        "vvd3-switch": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-            "label": string | undefined;
-            "connotation": SwitchConnotation | undefined;
+        "vvd3-form-associated-slider": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-slider": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "readonly": boolean;
+            "min": number;
+            "max": number;
+            "step": number;
+            "orientation": Orientation;
+            "mode": SliderMode;
+            "aria-label": string | null;
+            "aria-valuetext": string | null;
+            "markers": boolean;
+            "pin": boolean;
+            "connotation": SliderConnotation | undefined;
         }>;
         "vvd3-tab": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "disabled": boolean;
             "connotation": TabConnotation | undefined;
             "shape": TabShape | undefined;
             "label": string | undefined;
+            "removable": boolean;
             "tabIndex": number;
             "aria-selected": string | null;
         }>;
+        "vvd3-form-associated-switch": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-switch": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-label": string | null;
+            "label": string | undefined;
+            "connotation": SwitchConnotation | undefined;
+            "readonly": boolean;
+        }>;
         "vvd3-tab-panel": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
 
         }>;
         "vvd3-tabs": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "orientation": TabsOrientation;
+            "activeid": string;
+            "activeindicator": boolean;
             "connotation": TabsConnotation | undefined;
-            "gutters": Gutters | undefined;
+            "gutters": TabsGutters | undefined;
             "scrollable-panel": boolean;
+            "tabs-layout": 'align-start' | 'stretch' | undefined;
         }>;
         "vvd3-tag": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "connotation": TagConnotation | undefined;
@@ -431,14 +538,47 @@ declare namespace JSX {
             "text": string | undefined;
             "connotation": TextAnchorConnotation | undefined;
             "appearance": TextAnchorAppearance | undefined;
+        }>;
+        "vvd3-form-associated-text-area": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
         }>;
         "vvd3-text-area": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "readOnly": boolean;
+            "resize": TextAreaResize;
+            "autofocus": boolean;
+            "form": string;
+            "list": string;
+            "maxlength": number;
+            "minlength": number;
+            "name": string;
+            "placeholder": string;
+            "cols": number;
+            "rows": number;
+            "spellcheck": boolean;
             "wrap": TextAreaWrap | undefined;
+        }>;
+        "vvd3-form-associated-text-field": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
         }>;
         "vvd3-text-field": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "readonly": boolean;
+            "autofocus": boolean;
+            "placeholder": string;
+            "type": TextFieldType;
+            "list": string;
+            "maxlength": number;
+            "minlength": number;
+            "pattern": string;
+            "size": number;
+            "spellcheck": boolean;
             "appearance": TextFieldAppearance | undefined;
             "shape": TextFieldShape | undefined;
             "autoComplete": string | undefined;
+            "scale": TextFieldSize | undefined;
+            "inputmode": string;
+        }>;
+        "vvd3-delegates-ariatextbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
         }>;
         "vvd3-form-associated-time-picker": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
 
@@ -464,9 +604,12 @@ declare namespace JSX {
         }>;
         "vvd3-tree-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "text": string | undefined;
+            "expanded": boolean;
+            "selected": boolean;
+            "disabled": boolean;
         }>;
         "vvd3-tree-view": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-
+            "render-collapsed-nodes": boolean;
         }>;
         "vvd3-video-player": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "poster": string | undefined;
@@ -475,6 +618,94 @@ declare namespace JSX {
             "loop": boolean;
             "playback-rates": string;
             "skip-by": MediaSkipBy;
+        }>;
+        "vvd3-inline-time-picker": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-anchor": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "download": string;
+            "href": string;
+            "hreflang": string;
+            "ping": string;
+            "referrerpolicy": string;
+            "rel": string;
+            "target": '_self' | '_blank' | '_parent' | '_top';
+            "type": string;
+        }>;
+        "vvd3-delegates-arialink": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-expanded": 'true' | 'false' | string | null;
+        }>;
+        "vvd3-vivid-foundation-button": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "autofocus": boolean;
+            "form": string;
+            "formaction": string;
+            "formenctype": string;
+            "formmethod": string;
+            "formnovalidate": boolean;
+            "formtarget": '_self' | '_blank' | '_parent' | '_top';
+            "type": 'submit' | 'reset' | 'button';
+        }>;
+        "vvd3-delegates-ariabutton": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-expanded": 'true' | 'false' | string | null;
+            "aria-pressed": 'true' | 'false' | 'mixed' | string | null;
+        }>;
+        "vvd3-listbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "disabled": boolean;
+        }>;
+        "vvd3-delegates-arialistbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
+        }>;
+        "vvd3-a-riaglobal-states-and-properties": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-atomic": 'true' | 'false' | string | null;
+            "aria-busy": 'true' | 'false' | string | null;
+            "aria-controls": string | null;
+            "aria-current": | 'page'
+		| 'step'
+		| 'location'
+		| 'date'
+		| 'time'
+		| 'true'
+		| 'false'
+		| string
+		| null;
+            "aria-describedby": string | null;
+            "aria-details": string | null;
+            "aria-disabled": 'true' | 'false' | string | null;
+            "aria-errormessage": string | null;
+            "aria-flowto": string | null;
+            "aria-haspopup": | 'false'
+		| 'true'
+		| 'menu'
+		| 'listbox'
+		| 'tree'
+		| 'grid'
+		| 'dialog'
+		| string
+		| null;
+            "aria-hidden": 'false' | 'true' | string | null;
+            "aria-invalid": 'false' | 'true' | 'grammar' | 'spelling' | string | null;
+            "aria-keyshortcuts": string | null;
+            "aria-label": string | null;
+            "aria-labelledby": string | null;
+            "aria-live": 'assertive' | 'off' | 'polite' | string | null;
+            "aria-owns": string | null;
+            "aria-relevant": | 'additions'
+		| 'additions text'
+		| 'all'
+		| 'removals'
+		| 'text'
+		| string
+		| null;
+            "aria-roledescription": string | null;
+        }>;
+        "vvd3-base-progress": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "value": number | null;
+            "min": number;
+            "max": number;
+            "paused": boolean;
+        }>;
+        "vvd3-vivid-element": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
         }>;
         "vvd3-date-picker-base": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "min": string;

package/v3/VwcARIAGlobalStatesAndProperties/index.d.ts

@@ -0,0 +1,122 @@
+import React, { ReactNode } from 'react';
+/** Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+The following global states and properties are supported by all roles and by all base markup elements.
+https://www.w3.org/TR/wai-aria-1.1/#global_states
+
+This is intended to be used as a mixin. Be sure you extend FASTElement.
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/a-riaglobal-states-and-properties
+* @param {'true' | 'false' | string | null} ariaAtomic - Indicates whether assistive technologies will present all, or only parts of,
+the changed region based on the change notifications defined by the aria-relevant attribute.
+https://www.w3.org/TR/wai-aria-1.1/#aria-atomic **attribute** `aria-atomic`
+* @param {'true' | 'false' | string | null} ariaBusy - Indicates an element is being modified and that assistive technologies MAY want to wait
+until the modifications are complete before exposing them to the user.
+https://www.w3.org/TR/wai-aria-1.1/#aria-busy **attribute** `aria-busy`
+* @param {string | null} ariaControls - Identifies the element (or elements) whose contents or presence are controlled by the current element.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-controls **attribute** `aria-controls`
+* @param {| 'page'
+        | 'step'
+        | 'location'
+        | 'date'
+        | 'time'
+        | 'true'
+        | 'false'
+        | string
+        | null} ariaCurrent - Indicates the element that represents the current item within a container or set of related elements.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-current **attribute** `aria-current`
+* @param {string | null} ariaDescribedby - Identifies the element (or elements) that describes the object.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-describedby **attribute** `aria-describedby`
+* @param {string | null} ariaDetails - Identifies the element that provides a detailed, extended description for the object.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-details **attribute** `aria-details`
+* @param {'true' | 'false' | string | null} ariaDisabled - Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-disabled **attribute** `aria-disabled`
+* @param {string | null} ariaErrormessage - Identifies the element that provides an error message for the object.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage **attribute** `aria-errormessage`
+* @param {string | null} ariaFlowto - Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+allows assistive technology to override the general default of reading in document source order.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-flowto **attribute** `aria-flowto`
+* @param {| 'false'
+        | 'true'
+        | 'menu'
+        | 'listbox'
+        | 'tree'
+        | 'grid'
+        | 'dialog'
+        | string
+        | null} ariaHaspopup - Indicates the availability and type of interactive popup element,
+such as menu or dialog, that can be triggered by an element.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup **attribute** `aria-haspopup`
+* @param {'false' | 'true' | string | null} ariaHidden - Indicates whether the element is exposed to an accessibility API
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-hidden **attribute** `aria-hidden`
+* @param {'false' | 'true' | 'grammar' | 'spelling' | string | null} ariaInvalid - Indicates the entered value does not conform to the format expected by the application.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-invalid **attribute** `aria-invalid`
+* @param {string | null} ariaKeyshortcuts - Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts **attribute** `aria-keyshortcuts`
+* @param {string | null} ariaLabel - Defines a string value that labels the current element.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-label **attribute** `aria-label`
+* @param {string | null} ariaLabelledby - Identifies the element (or elements) that labels the current element.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby **attribute** `aria-labelledby`
+* @param {'assertive' | 'off' | 'polite' | string | null} ariaLive - Indicates that an element will be updated, and describes the types of updates the user agents,
+assistive technologies, and user can expect from the live region.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-live **attribute** `aria-live`
+* @param {string | null} ariaOwns - Identifies an element (or elements) in order to define a visual,
+functional, or contextual parent/child relationship between DOM elements
+where the DOM hierarchy cannot be used to represent the relationship.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-owns **attribute** `aria-owns`
+* @param {| 'additions'
+        | 'additions text'
+        | 'all'
+        | 'removals'
+        | 'text'
+        | string
+        | null} ariaRelevant - Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-relevant **attribute** `aria-relevant`
+* @param {string | null} ariaRoledescription - Defines a human-readable, author-localized description for the role of an element.
+
+https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription **attribute** `aria-roledescription`
+*/
+declare const VwcARIAGlobalStatesAndProperties: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        ariaAtomic?: any;
+        ariaBusy?: any;
+        ariaControls?: string | null | undefined;
+        ariaCurrent?: any;
+        ariaDescribedby?: string | null | undefined;
+        ariaDetails?: string | null | undefined;
+        ariaDisabled?: any;
+        ariaErrormessage?: string | null | undefined;
+        ariaFlowto?: string | null | undefined;
+        ariaHaspopup?: any;
+        ariaHidden?: any;
+        ariaInvalid?: any;
+        ariaKeyshortcuts?: string | null | undefined;
+        ariaLabel?: string | null | undefined;
+        ariaLabelledby?: string | null | undefined;
+        ariaLive?: any;
+        ariaOwns?: string | null | undefined;
+        ariaRelevant?: any;
+        ariaRoledescription?: string | null | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcARIAGlobalStatesAndProperties;