etudes 6.0.0 → 6.1.1

package/components/Accordion.js

@@ -131,7 +131,7 @@ export const Accordion = forwardRef(({ children, style, autoCollapseSections = f
             return;
         handleSelectionChange(prevSelection, selection);
     }, [JSON.stringify(selection)]);
-    return (_jsx("div", { ...props, ref: ref, "data-component": 'accordion', style: styles(style, fixedStyles.root), children: _jsx(Each, { in: sections, children: (section, sectionIndex) => {
+    return (_jsx("div", { ...props, ref: ref, style: styles(style, fixedStyles.root), children: _jsx(Each, { in: sections, children: (section, sectionIndex) => {
                 const { collectionPadding = 0, items, itemLength = 50, itemPadding = 0, isSelectionTogglable, layout = 'list', maxVisible = -1, numSegments = 1 } = section;
                 const allVisible = layout === 'list' ? items.length : Math.ceil(items.length / numSegments);
                 const numVisible = maxVisible < 0 ? allVisible : Math.min(allVisible, maxVisible);
@@ -141,34 +141,40 @@ export const Accordion = forwardRef(({ children, style, autoCollapseSections = f
                         marginTop: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,
                     } : {
                         marginLeft: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,
-                    }), children: [HeaderComponent ? (_jsx(HeaderComponent, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'header', index: sectionIndex, isCollapsed: isCollapsed, section: section, style: styles(fixedStyles.header), onClick: () => toggleSectionAt(sectionIndex), onCustomEvent: (name, info) => onHeaderCustomEvent?.(sectionIndex, name, info) })) : (cloneStyledElement(components.header ?? _jsx(AccordionHeader, {}), {
-                            className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }),
-                            style: styles(fixedStyles.header),
-                            onClick: () => toggleSectionAt(sectionIndex),
-                        }, _jsx("span", { dangerouslySetInnerHTML: { __html: section.label } }), isCollapsed ? components.collapseIcon ?? components.expandIcon : components.expandIcon)), _jsx(Collection, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'collection', isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection[sectionIndex] ?? [], selectionMode: selectionMode, style: styles(orientation === 'vertical' ? {
+                    }), children: [HeaderComponent ? (_jsx(HeaderComponent, { "aria-expanded": !isCollapsed, className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), index: sectionIndex, isCollapsed: isCollapsed, role: 'button', section: section, style: styles(fixedStyles.header), onClick: () => toggleSectionAt(sectionIndex), onCustomEvent: (name, info) => onHeaderCustomEvent?.(sectionIndex, name, info) })) : (cloneStyledElement(components.header ?? _jsx(AccordionHeader, {}), {
+                            'aria-expanded': !isCollapsed,
+                            'className': clsx({ collapsed: isCollapsed, expanded: !isCollapsed }),
+                            'style': styles(fixedStyles.header),
+                            'role': 'button',
+                            'onClick': () => toggleSectionAt(sectionIndex),
+                        }, _jsx("span", { dangerouslySetInnerHTML: { __html: section.label } }), isCollapsed ? components.collapseIcon ?? components.expandIcon : components.expandIcon)), _jsx("div", { hidden: isCollapsed, role: 'region', style: styles(orientation === 'vertical' ? {
                                 width: '100%',
-                                height: isCollapsed ? '0px' : `${maxLength}px`,
-                                marginTop: isCollapsed ? '0px' : `${collectionPadding}px`,
+                                height: isCollapsed ? '0' : `${maxLength}px`,
+                                marginTop: isCollapsed ? '0' : `${collectionPadding}px`,
                                 overflowY: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
                             } : {
-                                marginLeft: isCollapsed ? '0px' : `${collectionPadding}px`,
+                                marginLeft: isCollapsed ? '0' : `${collectionPadding}px`,
                                 overflowX: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
-                                width: isCollapsed ? '0px' : `${maxLength}px`,
+                                width: isCollapsed ? '0' : `${maxLength}px`,
                                 height: '100%',
-                            }), onActivateAt: itemIndex => {
-                                onActivateAt?.(itemIndex, sectionIndex);
-                            }, onDeselectAt: itemIndex => {
-                                handleDeselectAt?.(itemIndex, sectionIndex);
-                            }, onItemCustomEvent: (itemIndex, name, info) => {
-                                onItemCustomEvent?.(itemIndex, sectionIndex, name, info);
-                            }, onSelectAt: itemIndex => {
-                                handleSelectAt?.(itemIndex, sectionIndex);
-                            } })] }));
+                            }), children: _jsx(Collection, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection[sectionIndex] ?? [], selectionMode: selectionMode, style: styles(orientation === 'vertical' ? {
+                                    width: '100%',
+                                } : {
+                                    height: '100%',
+                                }), onActivateAt: itemIndex => {
+                                    onActivateAt?.(itemIndex, sectionIndex);
+                                }, onCustomEvent: (itemIndex, name, info) => {
+                                    onItemCustomEvent?.(itemIndex, sectionIndex, name, info);
+                                }, onDeselectAt: itemIndex => {
+                                    handleDeselectAt?.(itemIndex, sectionIndex);
+                                }, onSelectAt: itemIndex => {
+                                    handleSelectAt?.(itemIndex, sectionIndex);
+                                } }) })] }));
             } }) }));
 });
-export const AccordionHeader = ({ children, ...props }) => (_jsx("button", { ...props, "data-child": 'header', children: children }));
-export const AccordionExpandIcon = ({ children, ...props }) => (_jsx("figure", { ...props, "data-child": 'expand-icon', children: children }));
-export const AccordionCollapseIcon = ({ children, ...props }) => (_jsx("figure", { ...props, "data-child": 'collapse-icon', children: children }));
+export const AccordionHeader = ({ children, ...props }) => (_jsx("button", { ...props, children: children }));
+export const AccordionExpandIcon = ({ children, ...props }) => (_jsx("figure", { ...props, children: children }));
+export const AccordionCollapseIcon = ({ children, ...props }) => (_jsx("figure", { ...props, children: children }));
 function sortIndices(indices) {
     return indices.sort((a, b) => a - b);
 }

package/components/BurgerButton.js

@@ -31,12 +31,13 @@ export const BurgerButton = forwardRef(({ children, className, style, isActive =
         }),
     });
     const fixedStyles = getFixedStyles({ isSplit, isActive, isTailHidden });
-    return (_jsx("button", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'burger-button', style: styles(style, fixedStyles.root), onClick: onClick, children: _jsx(Repeat, { count: isSplit ? 2 : 1, children: j => (_jsx("div", { "data-child": 'joint', style: styles(fixedStyles.joint, fixedStyles[`joint${j}`]), children: _jsx(Repeat, { count: 3, children: i => cloneStyledElement(components.bar ?? _jsx(BurgerButtonBar, {}), {
-                        className: clsx(fixedClassNames.bar),
-                        style: styles(fixedStyles.bar, fixedStyles[`bar${j}${i}`]),
+    return (_jsx("button", { ...props, ref: ref, "aria-expanded": isActive, className: clsx(className, fixedClassNames.root), style: styles(style, fixedStyles.root), onClick: onClick, children: _jsx(Repeat, { count: isSplit ? 2 : 1, children: j => (_jsx("div", { "aria-hidden": true, style: styles(fixedStyles.section, fixedStyles[`section${j}`]), children: _jsx(Repeat, { count: 3, children: i => cloneStyledElement(components.bar ?? _jsx(BurgerButtonBar, {}), {
+                        'aria-hidden': true,
+                        'className': clsx(fixedClassNames.bar),
+                        'style': styles(fixedStyles.bar, fixedStyles[`bar${j}${i}`]),
                     }) }) })) }) }));
 });
-export const BurgerButtonBar = ({ ...props }) => (_jsx("span", { ...props, "data-child": 'bar' }));
+export const BurgerButtonBar = ({ ...props }) => (_jsx("span", { ...props }));
 function getFixedStyles({ isActive = false, isSplit = false, isTailHidden = false }) {
     return asStyleDict({
         root: {
@@ -45,16 +46,16 @@ function getFixedStyles({ isActive = false, isSplit = false, isTailHidden = fals
             display: 'block',
             outline: 'none',
         },
-        joint: {
+        section: {
             height: '100%',
             position: 'absolute',
             width: isSplit ? '50%' : '100%',
         },
-        joint0: {
+        section0: {
             left: '0',
             top: '0',
         },
-        joint1: {
+        section1: {
             right: '0',
             top: '0',
         },

package/components/Button.js

@@ -3,13 +3,13 @@ import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 export function Button({ children, className, href, isDisabled = false, label, opensInNewTab, to, type, ...props }) {
     if (href) {
-        return (_jsx("a", { ...props, className: clsx(className, { disabled: isDisabled }), "data-component": 'button', href: href, rel: opensInNewTab ? 'noopener,noreferrer' : undefined, target: opensInNewTab ? '_blank' : undefined, children: children ?? label }));
+        return (_jsx("a", { ...props, "aria-disabled": isDisabled, "aria-label": label, className: clsx(className, { disabled: isDisabled }), href: href, rel: opensInNewTab ? 'noopener,noreferrer' : undefined, target: opensInNewTab ? '_blank' : undefined, children: children ?? label }));
     }
     else if (to) {
-        return (_jsx(Link, { ...props, className: clsx(className, { disabled: isDisabled }), "data-component": 'button', to: to, children: children ?? label }));
+        return (_jsx(Link, { ...props, "aria-disabled": isDisabled, "aria-label": label, className: clsx(className, { disabled: isDisabled }), to: to, children: children ?? label }));
     }
     else {
-        return (_jsx("button", { ...props, className: className, "data-component": 'button', disabled: isDisabled, type: type, children: children ?? label }));
+        return (_jsx("button", { ...props, "aria-disabled": isDisabled, "aria-label": label, className: className, disabled: isDisabled, type: type, children: children ?? label }));
     }
 }
 Object.defineProperty(Button, 'displayName', { value: 'Button', writable: false });

package/components/Carousel.js

@@ -150,7 +150,7 @@ export const Carousel = forwardRef(({ autoAdvanceInterval = 0, index = 0, isDrag
     }, [orientation, isDragEnabled]);
     useTimeout(() => handleIndexChange((index + items.length + 1) % items.length), (isPointerDown || autoAdvanceInterval <= 0) ? -1 : autoAdvanceInterval, [isPointerDown, index, items.length]);
     const fixedStyles = getFixedStyles({ isPointerDown, orientation });
-    return (_jsx("div", { ...props, ref: ref, "data-component": 'carousel', onClick: event => handleClick(event), onPointerDown: event => handlePointerDown(event), onPointerLeave: event => handlePointerUp(event), onPointerUp: event => handlePointerUp(event), children: _jsx("div", { ref: viewportRef, "data-child": 'viewport', style: styles(fixedStyles.viewport), children: _jsx(Each, { in: items, children: ({ style: itemStyle, ...itemProps }, idx) => (_jsx("div", { style: styles(fixedStyles.itemContainer), children: _jsx(ItemComponent, { "data-child": 'item', exposure: tracksItemExposure ? exposures?.[idx] : undefined, style: styles(itemStyle, fixedStyles.item), ...itemProps }) })) }) }) }));
+    return (_jsx("div", { ...props, ref: ref, role: 'region', onClick: event => handleClick(event), onPointerDown: event => handlePointerDown(event), onPointerLeave: event => handlePointerUp(event), onPointerUp: event => handlePointerUp(event), children: _jsx("div", { ref: viewportRef, style: styles(fixedStyles.viewport), children: _jsx(Each, { in: items, children: ({ style: itemStyle, ...itemProps }, idx) => (_jsx("div", { style: styles(fixedStyles.itemContainer), children: _jsx(ItemComponent, { "aria-hidden": idx !== index, exposure: tracksItemExposure ? exposures?.[idx] : undefined, style: styles(itemStyle, fixedStyles.item), ...itemProps }) })) }) }) }));
 });
 function getFixedStyles({ isPointerDown = false, orientation = 'horizontal' }) {
     return asStyleDict({

package/components/Collection.d.ts

@@ -133,7 +133,7 @@ export type CollectionProps<T> = HTMLAttributes<HTMLDivElement> & {
      * @param eventName User-defined name of the dispatched custom event.
      * @param eventInfo Optional user-defined info of the dispatched custom event.
      */
-    onItemCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void;
+    onCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void;
     /**
      * Handler invoked when an item is selected. The order of handlers invoked
      * when any selection changes take place is:

package/components/Collection.js

@@ -9,7 +9,7 @@ import { asStyleDict, styles } from '../utils/index.js';
  * on the provided `ItemComponent`. This component supports different layouts in
  * both horizontal and vertical orientations.
  */
-export const Collection = forwardRef(({ className, style, isSelectionTogglable = false, itemLength, itemPadding = 0, items, layout = 'list', numSegments = 1, orientation = 'vertical', selection: externalSelection, selectionMode = 'none', onActivateAt, onDeselectAt, onItemCustomEvent, onSelectAt, onSelectionChange, ItemComponent, ...props }, ref) => {
+export const Collection = forwardRef(({ className, style, isSelectionTogglable = false, itemLength, itemPadding = 0, items, layout = 'list', numSegments = 1, orientation = 'vertical', selection: externalSelection, selectionMode = 'none', onActivateAt, onDeselectAt, onCustomEvent, onSelectAt, onSelectionChange, ItemComponent, ...props }, ref) => {
     const isIndexOutOfRange = (index) => {
         if (isNaN(index))
             return true;
@@ -87,7 +87,7 @@ export const Collection = forwardRef(({ className, style, isSelectionTogglable =
             return;
         handleSelectionChange(prevSelection, selection);
     }, [JSON.stringify(selection)]);
-    return (_jsx("div", { ...props, ref: ref, className: clsx(className), "data-component": 'collection', style: styles(style, fixedStyles.root), children: ItemComponent && (_jsx(Each, { in: items, children: (val, idx) => (_jsx(ItemComponent, { className: clsx({ selected: isSelectedAt(idx) }), "data-child": 'item', "data-index": idx, index: idx, isSelected: isSelectedAt(idx), item: val, orientation: orientation, style: styles(fixedStyles.item, {
+    return (_jsx("div", { ...props, ref: ref, "aria-multiselectable": selectionMode === 'multiple', className: clsx(className), role: layout === 'grid' ? 'grid' : (selectionMode === 'none' ? 'list' : 'listbox'), style: styles(style, fixedStyles.root), children: ItemComponent && (_jsx(Each, { in: items, children: (val, idx) => (_jsx(ItemComponent, { "aria-selected": isSelectedAt(idx), className: clsx({ selected: isSelectedAt(idx) }), index: idx, isSelected: isSelectedAt(idx), item: val, orientation: orientation, role: layout === 'grid' ? 'gridcell' : (selectionMode === 'none' ? 'listitem' : 'option'), style: styles(fixedStyles.item, {
                     pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',
                     ...idx >= items.length - 1 ? {} : {
                         ...layout === 'list' ? {
@@ -98,7 +98,7 @@ export const Collection = forwardRef(({ className, style, isSelectionTogglable =
                             },
                         } : {},
                     },
-                }), onClick: () => activateAt(idx), onCustomEvent: (name, info) => onItemCustomEvent?.(idx, name, info) })) })) }));
+                }), onClick: () => activateAt(idx), onCustomEvent: (name, info) => onCustomEvent?.(idx, name, info) })) })) }));
 });
 function sortIndices(indices) {
     return indices.sort((a, b) => a - b);

package/components/Counter.js

@@ -50,7 +50,7 @@ export const Counter = forwardRef(({ children, style, allowsInput = true, max =
         addButton: CounterAddButton,
         subscribeButton: CounterSubtractButton,
     });
-    return (_jsxs("div", { ...props, ref: ref, "data-component": 'counter', style: styles(style, FIXED_STYLES.root), children: [cloneStyledElement(components.subscribeButton ?? _jsx(CounterSubtractButton, {}), {
+    return (_jsxs("div", { ...props, ref: ref, style: styles(style, FIXED_STYLES.root), children: [cloneStyledElement(components.subscribeButton ?? _jsx(CounterSubtractButton, {}), {
                 className: clsx({ disabled: isSubtractingDisabled }),
                 style: styles(FIXED_STYLES.subtract),
                 onClick: () => handleSubtract(),
@@ -74,9 +74,9 @@ export const Counter = forwardRef(({ children, style, allowsInput = true, max =
                 onClick: () => handleAdd(),
             })] }));
 });
-export const CounterTextField = ({ ...props }) => (_jsx(TextField, { ...props, "data-child": 'text-field' }));
-export const CounterAddButton = ({ children, ...props }) => (_jsx("button", { ...props, "data-child": 'add-button', children: children }));
-export const CounterSubtractButton = ({ children, ...props }) => (_jsx("button", { ...props, "data-child": 'subtract-button', children: children }));
+export const CounterTextField = ({ ...props }) => (_jsx(TextField, { ...props }));
+export const CounterAddButton = ({ children, ...props }) => (_jsx("button", { ...props, children: children }));
+export const CounterSubtractButton = ({ children, ...props }) => (_jsx("button", { ...props, children: children }));
 const FIXED_STYLES = asStyleDict({
     root: styles({
         display: 'flex',

package/components/CoverImage.js

@@ -23,7 +23,7 @@ export const CoverImage = forwardRef(({ children, style, alt, aspectRatio: exter
         content: CoverImageContent,
         viewport: CoverImageViewport,
     });
-    return (_jsxs("div", { ...props, ref: rootRef, "data-component": 'cover-image', style: styles(style, FIXED_STYLES.root), children: [_jsx(Image, { alt: alt, "data-child": 'image', sizes: sizes, src: src, srcSet: srcSet, style: styles(FIXED_STYLES.viewport, {
+    return (_jsxs("div", { ...props, ref: rootRef, style: styles(style, FIXED_STYLES.root), children: [_jsx(Image, { alt: alt, sizes: sizes, src: src, srcSet: srcSet, style: styles(FIXED_STYLES.viewport, {
                     height: `${imageSize.height}px`,
                     maxWidth: 'unset',
                     width: `${imageSize.width}px`,
@@ -35,8 +35,8 @@ export const CoverImage = forwardRef(({ children, style, alt, aspectRatio: exter
                 }),
             }), components.content] }));
 });
-export const CoverImageViewport = ({ children, ...props }) => (_jsx("div", { ...props, "data-child": 'viewport', children: children }));
-export const CoverImageContent = ({ children, ...props }) => (_jsx("div", { ...props, "data-child": 'content', children: children }));
+export const CoverImageViewport = ({ children, ...props }) => (_jsx("div", { ...props, children: children }));
+export const CoverImageContent = ({ children, ...props }) => (_jsx("div", { ...props, children: children }));
 const FIXED_STYLES = asStyleDict({
     root: {
         overflow: 'hidden',

package/components/CoverVideo.js

@@ -24,7 +24,7 @@ export const CoverVideo = forwardRef(({ className, children, style, aspectRatio:
         content: CoverVideoContent,
         viewport: CoverVideoViewport,
     });
-    return (_jsxs("div", { ...props, ref: rootRef, className: className, "data-component": 'cover-video', style: styles(style, FIXED_STYLES.root), children: [_jsx(Video, { autoLoop: autoLoop, autoPlay: autoPlay, "data-child": 'video', hasControls: hasControls, isMuted: isMuted, playsInline: playsInline, posterSrc: posterSrc, src: src, style: styles(FIXED_STYLES.viewport, {
+    return (_jsxs("div", { ...props, ref: rootRef, className: className, style: styles(style, FIXED_STYLES.root), children: [_jsx(Video, { autoLoop: autoLoop, autoPlay: autoPlay, hasControls: hasControls, isMuted: isMuted, playsInline: playsInline, posterSrc: posterSrc, src: src, style: styles(FIXED_STYLES.viewport, {
                     width: `${videoSize.width}px`,
                     height: `${videoSize.height}px`,
                     maxWidth: 'unset',
@@ -36,8 +36,8 @@ export const CoverVideo = forwardRef(({ className, children, style, aspectRatio:
                 }),
             }), components.content] }));
 });
-export const CoverVideoViewport = ({ children, ...props }) => (_jsx("div", { ...props, "data-child": 'viewport', children: children }));
-export const CoverVideoContent = ({ children, ...props }) => (_jsx("div", { ...props, "data-child": 'content', children: children }));
+export const CoverVideoViewport = ({ children, ...props }) => (_jsx("div", { ...props, children: children }));
+export const CoverVideoContent = ({ children, ...props }) => (_jsx("div", { ...props, children: children }));
 const FIXED_STYLES = asStyleDict({
     root: {
         overflow: 'hidden',

package/components/Dial.js

@@ -15,7 +15,7 @@ export const Dial = forwardRef(({ children, style, angle = 0, knobLength = 30, k
         knob: DialKnob,
     });
     const fixedStyles = getFixedStyles({ angle, diameter });
-    return (_jsxs("div", { ...props, ref: ref, "data-component": 'dial', style: styles(style, fixedStyles.root), children: [_jsx("div", { style: fixedStyles.trackContainer, children: _jsx("svg", { height: diameter, style: fixedStyles.svgContainer, viewBox: `0 0 ${diameter} ${diameter}`, width: diameter, children: cloneStyledElement(components.track ?? _jsx(DialTrack, {}), {
+    return (_jsxs("div", { ...props, ref: ref, style: styles(style, fixedStyles.root), children: [_jsx("div", { style: fixedStyles.trackContainer, children: _jsx("svg", { height: diameter, style: fixedStyles.svgContainer, viewBox: `0 0 ${diameter} ${diameter}`, width: diameter, children: cloneStyledElement(components.track ?? _jsx(DialTrack, {}), {
                         cx: radius,
                         cy: radius,
                         fill: 'none',
@@ -28,8 +28,8 @@ export const Dial = forwardRef(({ children, style, angle = 0, knobLength = 30, k
                         strokeWidth: knobThickness,
                     }) }) })] }));
 });
-export const DialTrack = ({ ...props }) => (_jsx("circle", { ...props, "data-child": 'track' }));
-export const DialKnob = ({ ...props }) => (_jsx("path", { ...props, "data-child": 'knob' }));
+export const DialTrack = ({ ...props }) => (_jsx("circle", { ...props }));
+export const DialKnob = ({ ...props }) => (_jsx("path", { ...props }));
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
     const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
     return {

package/components/Dropdown.js

@@ -85,14 +85,16 @@ export const Dropdown = forwardRef(({ children, className, style, collapsesOnSel
             window.removeEventListener('click', clickOutsideHandler);
         };
     }, [isCollapsed]);
-    return (_jsx("div", { ...props, ref: ref, className: clsx(className, { collapsed: isCollapsed, expanded: !isCollapsed }), "data-component": 'dropdown', style: styles(style, fixedStyles.root), children: _jsxs("div", { ref: bodyRef, style: styles(fixedStyles.body), children: [ToggleComponent ? (_jsx(ToggleComponent, { "data-child": 'toggle', style: styles(fixedStyles.toggle), onClick: () => toggle(), onCustomEvent: (name, info) => onToggleCustomEvent?.(name, info) })) : (cloneStyledElement(components.toggle ?? _jsx(DropdownToggle, {}), {
-                    style: styles(fixedStyles.toggle),
-                    onClick: () => toggle(),
-                }, _jsx("span", { dangerouslySetInnerHTML: { __html: label?.(selection) ?? (selection.length > 0 ? selection.map(t => items[t].label).join(', ') : '') } }), isCollapsed ? components.collapseIcon ?? components.expandIcon : components.expandIcon)), _jsx(Collection, { "data-child": 'collection', isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection, selectionMode: selectionMode, style: styles(fixedStyles.collection), onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler })] }) }));
+    return (_jsx("div", { ...props, ref: ref, className: clsx(className, { collapsed: isCollapsed, expanded: !isCollapsed }), style: styles(style, fixedStyles.root), children: _jsxs("div", { ref: bodyRef, style: styles(fixedStyles.body), children: [ToggleComponent ? (_jsx(ToggleComponent, { "aria-expanded": !isCollapsed, "aria-haspopup": 'listbox', style: styles(fixedStyles.toggle), onClick: () => toggle(), onCustomEvent: (name, info) => onToggleCustomEvent?.(name, info) })) : (cloneStyledElement(components.toggle ?? _jsx(DropdownToggle, {}), {
+                    'aria-haspopup': 'listbox',
+                    'aria-expanded': !isCollapsed,
+                    'style': styles(fixedStyles.toggle),
+                    'onClick': () => toggle(),
+                }, _jsx("span", { dangerouslySetInnerHTML: { __html: label?.(selection) ?? (selection.length > 0 ? selection.map(t => items[t].label).join(', ') : '') } }), isCollapsed ? components.collapseIcon ?? components.expandIcon : components.expandIcon)), _jsx(Collection, { isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection, selectionMode: selectionMode, style: styles(fixedStyles.collection), onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler })] }) }));
 });
-export const DropdownToggle = ({ children, ...props }) => (_jsx("button", { ...props, "data-child": 'toggle', children: children }));
-export const DropdownExpandIcon = ({ children, ...props }) => (_jsx("figure", { ...props, "data-child": 'expand-icon', children: children }));
-export const DropdownCollapseIcon = ({ children, ...props }) => (_jsx("figure", { ...props, "data-child": 'collapse-icon', children: children }));
+export const DropdownToggle = ({ children, ...props }) => (_jsx("button", { ...props, children: children }));
+export const DropdownExpandIcon = ({ children, ...props }) => (_jsx("figure", { ...props, "aria-hidden": true, children: children }));
+export const DropdownCollapseIcon = ({ children, ...props }) => (_jsx("figure", { ...props, "aria-hidden": true, children: children }));
 function sortIndices(indices) {
     return indices.sort((a, b) => a - b);
 }

package/components/FlatSVG.js

@@ -39,6 +39,6 @@ export const FlatSVG = forwardRef(({ svg, shouldStripClasses = true, shouldStrip
         const xml = parser.parse(svg);
         return builder.build(xml);
     };
-    return (_jsx("figure", { ...props, ref: ref, dangerouslySetInnerHTML: { __html: sanitizedMarkup() }, "data-component": 'flat-svg' }));
+    return (_jsx("figure", { ...props, ref: ref, dangerouslySetInnerHTML: { __html: sanitizedMarkup() }, role: 'img' }));
 });
 Object.defineProperty(FlatSVG, 'displayName', { value: 'FlatSVG', writable: false });

package/components/Image.js

@@ -42,6 +42,6 @@ export const Image = forwardRef(({ alt, loadingMode = 'preload', sizes, src: fal
     useEffect(() => {
         onSizeChange?.(size);
     }, [size]);
-    return (_jsx("img", { ...props, ref: ref, alt: alt, "data-component": 'image', loading: loadingMode === 'lazy' ? 'lazy' : 'eager', sizes: sizesValue, src: fallbackSrc, srcSet: srcSetValue }));
+    return (_jsx("img", { ...props, ref: ref, alt: alt, loading: loadingMode === 'lazy' ? 'lazy' : 'eager', sizes: sizesValue, src: fallbackSrc, srcSet: srcSetValue }));
 });
 Object.defineProperty(Image, 'displayName', { value: 'Image', writable: false });

package/components/MasonryGrid.js

@@ -45,6 +45,7 @@ export const MasonryGrid = forwardRef(({ alignSections = false, children, classN
                     continue;
                 const base = computeBaseFromElement(child, sections);
                 const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base);
+                child.role = 'gridcell';
                 child.style.position = 'absolute';
                 child.style.width = `calc(${100 / numSections * base}% - ${horizontalSpacing * (numSections - 1) / numSections * base}px + ${horizontalSpacing * (base - 1)}px)`;
                 child.style.height = '';
@@ -137,7 +138,7 @@ export const MasonryGrid = forwardRef(({ alignSections = false, children, classN
     }, [children]);
     const fixedClassNames = getFixedClassNames({ orientation });
     const fixedStyles = getFixedStyles({ orientation, minHeight, minWidth });
-    return (_jsx("div", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'masonry-grid', children: _jsx("div", { ref: bodyRef, style: fixedStyles.body, children: children }) }));
+    return (_jsx("div", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), role: 'grid', children: _jsx("div", { ref: bodyRef, style: fixedStyles.body, children: children }) }));
 });
 function getFixedClassNames({ orientation = 'horizontal' }) {
     return asClassNameDict({

package/components/OptionButton.js

@@ -12,6 +12,6 @@ export const OptionButton = forwardRef(({ index = 0, isDisabled = false, options
         const nextValue = typeof nextOption === 'string' ? nextOption : nextOption?.value;
         onChange?.(nextValue, nextIndex);
     };
-    return (_jsx("button", { ...props, ref: ref, "data-component": 'cycle-button', disabled: isDisabled, onClick: onClick, children: label }));
+    return (_jsx("button", { ...props, ref: ref, "aria-disabled": isDisabled, "aria-label": label, disabled: isDisabled, onClick: onClick, children: label }));
 });
 Object.defineProperty(OptionButton, 'displayName', { value: 'OptionButton', writable: false });

package/components/Panorama.js

@@ -54,7 +54,7 @@ export const Panorama = forwardRef(({ angle: externalAngle = 0, speed = 1, src,
         onImageSizeChange?.(imageSize);
     }, [imageSize?.width, imageSize?.height]);
     const fixedStyles = getFixedStyles({ src, displacement });
-    return (_jsx("div", { ...props, ref: ref, "data-component": 'panorama', children: _jsx("div", { ref: bodyRef, style: fixedStyles.body }) }));
+    return (_jsx("div", { ...props, ref: ref, "aria-valuenow": angle, role: 'slider', children: _jsx("div", { ref: bodyRef, style: fixedStyles.body }) }));
 });
 function getFixedStyles({ src = '', displacement = NaN }) {
     return asStyleDict({

package/components/PanoramaSlider.js

@@ -53,7 +53,7 @@ export const PanoramaSlider = forwardRef(({ className, style, angle = 0, autoDim
         indicator: PanoramaSliderIndicator,
     });
     const fixedStyles = getFixedStyles({ autoDimension, panoramaRect, aspectRatio, reticleWidth });
-    return (_jsxs("div", { ...props, ref: ref, className: clsx(className, { dragging: isDragging }), "data-component": 'panorama-slider', style: styles(style, fixedStyles.root), children: [_jsx(Panorama, { ref: panoramaRef, angle: angle, speed: speed, src: src, style: fixedStyles.panorama, zeroAnchor: adjustedZeroAnchor, onAngleChange: onAngleChange, onDragEnd: dragEndHandler, onDragStart: dragStartHandler, onImageSizeChange: setImageSize, onLoadImageComplete: onLoadImageComplete, onLoadImageError: onLoadImageError, onLoadImageStart: onLoadImageStart, onPositionChange: onPositionChange }), _jsx("div", { style: fixedStyles.body, children: _jsxs("div", { style: fixedStyles.controls, children: [cloneStyledElement(components.track ?? _jsx(PanoramaSliderTrack, {}), {
+    return (_jsxs("div", { ...props, ref: ref, className: clsx(className, { dragging: isDragging }), style: styles(style, fixedStyles.root), children: [_jsx(Panorama, { ref: panoramaRef, angle: angle, speed: speed, src: src, style: fixedStyles.panorama, zeroAnchor: adjustedZeroAnchor, onAngleChange: onAngleChange, onDragEnd: dragEndHandler, onDragStart: dragStartHandler, onImageSizeChange: setImageSize, onLoadImageComplete: onLoadImageComplete, onLoadImageError: onLoadImageError, onLoadImageStart: onLoadImageStart, onPositionChange: onPositionChange }), _jsx("div", { style: fixedStyles.body, children: _jsxs("div", { style: fixedStyles.controls, children: [cloneStyledElement(components.track ?? _jsx(PanoramaSliderTrack, {}), {
                             className: clsx({ dragging: isDragging }),
                             style: styles(fixedStyles.track),
                         }), cloneStyledElement(components.reticle ?? _jsx(PanoramaSliderReticle, {}), {
@@ -67,9 +67,9 @@ export const PanoramaSlider = forwardRef(({ className, style, angle = 0, autoDim
                 style: styles(fixedStyles.indicator),
             })] }));
 });
-export const PanoramaSliderTrack = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref, "data-child": 'track' })));
-export const PanoramaSliderReticle = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref, "data-child": 'reticle' })));
-export const PanoramaSliderIndicator = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref, "data-child": 'indicator' })));
+export const PanoramaSliderTrack = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref })));
+export const PanoramaSliderReticle = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref })));
+export const PanoramaSliderIndicator = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref })));
 function getFixedStyles({ autoDimension = 'width', panoramaRect = Rect.make(), aspectRatio = 0, reticleWidth = 0 }) {
     return asStyleDict({
         root: {

package/components/RangeSlider.js

@@ -90,7 +90,7 @@ export const RangeSlider = forwardRef(({ children, className, decimalPlaces = 2,
         label: RangeSliderLabel,
     });
     const fixedStyles = getFixedStyles({ orientation, highlightLength, start, knobPadding, knobWidth, knobHeight });
-    return (_jsx("div", { ...props, ref: ref, className: clsx(className, orientation), "data-component": 'range-slider', children: _jsxs("div", { ref: bodyRef, style: fixedStyles.body, children: [cloneStyledElement(components.gutter ?? _jsx(RangeSliderGutter, {}), {
+    return (_jsx("div", { ...props, ref: ref, "aria-valuemax": maxValue, "aria-valuemin": minValue, className: clsx(className, orientation), role: 'slider', children: _jsxs("div", { ref: bodyRef, style: fixedStyles.body, children: [cloneStyledElement(components.gutter ?? _jsx(RangeSliderGutter, {}), {
                     style: styles(fixedStyles.gutter),
                 }), cloneStyledElement(components.highlight ?? _jsx(RangeSliderHighlight, {}), {
                     style: styles(fixedStyles.highlight),
@@ -144,10 +144,10 @@ export const RangeSlider = forwardRef(({ children, className, decimalPlaces = 2,
                     style: styles(fixedStyles.label),
                 }, Number(endValue.toFixed(decimalPlaces)).toLocaleString()))] }) }));
 });
-export const RangeSliderGutter = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref, "data-child": 'gutter' })));
-export const RangeSliderLabel = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref, "data-child": 'label' })));
-export const RangeSliderHighlight = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref, "data-child": 'highlight' })));
-export const RangeSliderKnob = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref, "data-child": 'knob' })));
+export const RangeSliderGutter = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref })));
+export const RangeSliderLabel = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref })));
+export const RangeSliderHighlight = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref })));
+export const RangeSliderKnob = forwardRef(({ ...props }, ref) => (_jsx("div", { ...props, ref: ref })));
 function getFixedStyles({ orientation = 'horizontal', knobWidth = 0, knobHeight = 0, highlightLength = 0, start = 0, knobPadding = 0 }) {
     return asStyleDict({
         body: {

package/components/SelectableButton.js

@@ -16,6 +16,6 @@ export const SelectableButton = forwardRef(({ children, className, isDeselectabl
             onSelect?.();
         }
     };
-    return (_jsx("button", { ...props, ref: ref, className: clsx(className, { active: isSelected, disabled: isDisabled || (isSelected && !isDeselectable) }), "data-component": 'selectable-button', disabled: isDisabled || (isSelected && !isDeselectable), onClick: onClick, children: children ?? label }));
+    return (_jsx("button", { ...props, ref: ref, "aria-disabled": isDisabled, "aria-label": label, "aria-selected": isSelected, className: clsx(className, { active: isSelected, disabled: isDisabled || (isSelected && !isDeselectable) }), disabled: isDisabled || (isSelected && !isDeselectable), onClick: onClick, children: children ?? label }));
 });
 Object.defineProperty(SelectableButton, 'displayName', { value: 'SelectableButton', writable: false });

package/components/Slider.js

@@ -84,7 +84,7 @@ export const Slider = forwardRef(({ children, className, isInverted = false, isT
     });
     const fixedClassNames = getFixedClassNames({ orientation, isAtEnd, isAtStart, isDragging, isReleasing });
     const fixedStyles = getFixedStyles({ orientation, isDragging, naturalPosition, knobHeight, knobWidth, isTrackInteractive });
-    return (_jsx("div", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'slider', children: _jsxs("div", { ref: bodyRef, style: fixedStyles.body, children: [cloneStyledElement(components.track ?? _jsx(SliderTrack, {}), {
+    return (_jsx("div", { ...props, ref: ref, "aria-orientation": orientation, "aria-valuenow": position, className: clsx(className, fixedClassNames.root), role: 'slider', children: _jsxs("div", { ref: bodyRef, style: fixedStyles.body, children: [cloneStyledElement(components.track ?? _jsx(SliderTrack, {}), {
                     className: clsx('start', fixedClassNames.track),
                     style: styles(fixedStyles.track, orientation === 'vertical' ? {
                         height: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,
@@ -112,9 +112,9 @@ export const Slider = forwardRef(({ children, className, isInverted = false, isT
                         style: styles(fixedStyles.label),
                     }, labelProvider(position))) })] }) }));
 });
-export const SliderTrack = ({ ...props }) => (_jsx("div", { ...props, "data-child": 'track' }));
-export const SliderKnob = ({ ...props }) => (_jsx("div", { ...props, "data-child": 'knob' }));
-export const SliderLabel = ({ ...props }) => (_jsx("div", { ...props, "data-child": 'label' }));
+export const SliderTrack = ({ ...props }) => (_jsx("div", { ...props }));
+export const SliderKnob = ({ ...props }) => (_jsx("div", { ...props }));
+export const SliderLabel = ({ ...props }) => (_jsx("div", { ...props }));
 function getFixedClassNames({ orientation = 'vertical', isAtEnd = false, isAtStart = false, isDragging = false, isReleasing = false }) {
     return asClassNameDict({
         root: clsx(orientation, {

package/components/StepwiseSlider.js

@@ -106,7 +106,7 @@ export const StepwiseSlider = forwardRef(({ children, className, index: external
             onPositionChange?.(nearestPosition, true);
         }
     }, [isDragging]);
-    return (_jsx("div", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'stepwise-slider', children: _jsxs("div", { ref: bodyRef, style: fixedStyles.body, children: [cloneStyledElement(components.track ?? _jsx(StepwiseSliderTrack, {}), {
+    return (_jsx("div", { ...props, ref: ref, "aria-valuenow": index, className: clsx(className, fixedClassNames.root), role: 'slider', children: _jsxs("div", { ref: bodyRef, style: fixedStyles.body, children: [cloneStyledElement(components.track ?? _jsx(StepwiseSliderTrack, {}), {
                     className: clsx('start', fixedClassNames.track),
                     style: styles(fixedStyles.track, orientation === 'vertical' ? {
                         height: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,
@@ -134,9 +134,9 @@ export const StepwiseSlider = forwardRef(({ children, className, index: external
                         style: styles(fixedStyles.label),
                     }, labelProvider(position, getNearestIndexByPosition(position, steps)))) })] }) }));
 });
-export const StepwiseSliderTrack = ({ ...props }) => (_jsx("div", { ...props, "data-child": 'track' }));
-export const StepwiseSliderKnob = ({ ...props }) => (_jsx("div", { ...props, "data-child": 'knob' }));
-export const StepwiseSliderLabel = ({ ...props }) => (_jsx("div", { ...props, "data-child": 'label' }));
+export const StepwiseSliderTrack = ({ ...props }) => (_jsx("div", { ...props }));
+export const StepwiseSliderKnob = ({ ...props }) => (_jsx("div", { ...props }));
+export const StepwiseSliderLabel = ({ ...props }) => (_jsx("div", { ...props }));
 /**
  * Generates a set of steps compatible with this component.
  *

package/components/SwipeContainer.js

@@ -62,6 +62,6 @@ export const SwipeContainer = forwardRef(({ children, isEnabled = true, threshol
         setDragEndPosition(undefined);
         setDragStartTime(NaN);
     };
-    return (_jsx("div", { ...props, ref: ref, "data-component": 'swipe-container', onMouseDown: event => onDragStart(event.clientX, event.clientY), onMouseLeave: () => onDragCancel(), onMouseMove: event => onDragMove(event.clientX, event.clientY), onMouseUp: () => onDragEnd(), onTouchEnd: () => onDragEnd(), onTouchMove: event => onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY), onTouchStart: event => onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY), children: children }));
+    return (_jsx("div", { ...props, ref: ref, onMouseDown: event => onDragStart(event.clientX, event.clientY), onMouseLeave: () => onDragCancel(), onMouseMove: event => onDragMove(event.clientX, event.clientY), onMouseUp: () => onDragEnd(), onTouchEnd: () => onDragEnd(), onTouchMove: event => onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY), onTouchStart: event => onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY), children: children }));
 });
 Object.defineProperty(SwipeContainer, 'displayName', { value: 'SwipeContainer', writable: false });

package/components/TextField.d.ts

@@ -2,6 +2,7 @@ import { type HTMLAttributes } from 'react';
 export type TextFieldProps = HTMLAttributes<HTMLInputElement> & {
     emptyValue?: string;
     isDisabled?: boolean;
+    isRequired?: boolean;
     placeholder?: string;
     value?: string;
     formatter?: (prevValue: string, newValue: string) => string;
@@ -12,6 +13,7 @@ export type TextFieldProps = HTMLAttributes<HTMLInputElement> & {
 export declare const TextField: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & {
     emptyValue?: string;
     isDisabled?: boolean;
+    isRequired?: boolean;
     placeholder?: string;
     value?: string;
     formatter?: (prevValue: string, newValue: string) => string;

package/components/TextField.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef, useEffect } from 'react';
 import { usePrevious } from '../hooks/usePrevious.js';
-export const TextField = forwardRef(({ className, emptyValue = '', isDisabled = false, placeholder, value: externalValue, formatter, onFocus, onUnfocus, onValueChange, ...props }, ref) => {
+export const TextField = forwardRef(({ className, emptyValue = '', isDisabled = false, isRequired = false, placeholder, value: externalValue, formatter, onFocus, onUnfocus, onValueChange, ...props }, ref) => {
     const handleValueChange = (newValue) => {
         const formatted = (newValue !== emptyValue) ? (formatter?.(value, newValue) ?? newValue) : emptyValue;
         if (formatted === value)
@@ -16,6 +16,6 @@ export const TextField = forwardRef(({ className, emptyValue = '', isDisabled =
             return;
         handleValueChange(value);
     }, [value]);
-    return (_jsx("input", { ...props, ref: ref, className: clsx(className, { disabled: isDisabled }), "data-component": 'text-field', disabled: isDisabled, placeholder: placeholder, type: 'text', value: value, onBlur: ({ target }) => onUnfocus?.(target.value), onChange: ({ target }) => handleValueChange(target.value), onFocus: ({ target }) => onFocus?.(target.value) }));
+    return (_jsx("input", { ...props, ref: ref, "aria-disabled": isDisabled, "aria-placeholder": placeholder, "aria-required": isRequired, className: clsx(className, { disabled: isDisabled }), disabled: isDisabled, placeholder: placeholder, required: isRequired, type: 'text', value: value, onBlur: ({ target }) => onUnfocus?.(target.value), onChange: ({ target }) => handleValueChange(target.value), onFocus: ({ target }) => onFocus?.(target.value) }));
 });
 Object.defineProperty(TextField, 'displayName', { value: 'TextField', writable: false });

package/components/Video.js

@@ -60,6 +60,6 @@ export const Video = forwardRef(({ autoLoop = true, autoPlay = true, hasControls
             return;
         videoRef.current.pause();
     };
-    return (_jsx("video", { ...props, ref: ref, autoPlay: autoPlay, controls: hasControls, "data-component": 'video', loop: autoLoop, muted: isMuted, playsInline: playsInline, poster: posterSrc, onCanPlay: canPlayHandler, onEnded: endHandler, onPause: pauseHandler, onPlay: playHandler, children: _jsx("source", { src: src }) }));
+    return (_jsx("video", { ...props, ref: ref, autoPlay: autoPlay, controls: hasControls, loop: autoLoop, muted: isMuted, playsInline: playsInline, poster: posterSrc, onCanPlay: canPlayHandler, onEnded: endHandler, onPause: pauseHandler, onPlay: playHandler, children: _jsx("source", { src: src }) }));
 });
 Object.defineProperty(Video, 'displayName', { value: 'Video', writable: false });

package/components/WithTooltip.js

@@ -10,14 +10,13 @@ export function WithTooltip({ children, className, style, alignment: externalAli
         const dialog = document.createElement('span');
         dialog.className = clsx(className);
         dialog.innerHTML = hint;
-        dialog.setAttribute('data-component', 'tooltip');
+        dialog.role = 'tooltip';
         const alignment = externalAlignment ?? (targetRef.current ? computeAlignment(targetRef.current, threshold) : 'tl');
         const fullDialogSize = computeMaxSize(dialog);
         const fixedStyles = getFixedStyles({ alignment, arrowSize: Size.make(arrowWidth, arrowHeight), gap, maxDialogWidth: maxWidth, fullDialogWidth: fullDialogSize.width, targetWidth: targetRect.width });
         const dialogStyle = styles(style, fixedStyles.dialog);
         Object.keys(dialogStyle).forEach(rule => dialog.style[rule] = dialogStyle[rule]);
         const arrow = document.createElement('span');
-        arrow.setAttribute('data-child', 'arrow');
         Object.keys(fixedStyles.arrow).forEach(rule => arrow.style[rule] = fixedStyles.arrow[rule]);
         dialog.appendChild(arrow);
         return dialog;
@@ -26,11 +25,13 @@ export function WithTooltip({ children, className, style, alignment: externalAli
         if (!dialogRef.current)
             return;
         dialogRef.current.style.opacity = '1';
+        dialogRef.current.ariaHidden = 'false';
     };
     const mouseLeaveHandler = () => {
         if (!dialogRef.current)
             return;
         dialogRef.current.style.opacity = '0';
+        dialogRef.current.ariaHidden = 'true';
     };
     const targetRef = useRef(null);
     const dialogRef = useRef();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "6.0.0",
+  "version": "6.1.1",
   "description": "A study of headless React components",
   "type": "module",
   "scripts": {