@westpac/ui 0.52.0 → 0.53.2

package/dist/components/accordion/components/accordion-item/accordion-item.styles.js

@@ -5,7 +5,7 @@ export const styles = tv({
         itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2 group-first:border-t-0',
         headerTitleWrapper: 'flex-1 pr-2 text-left',
         indicator: 'size-3 rotate-90',
-        content: '',
+        content: '[&_:focus-visible]:focus-outline',
         motionContent: ''
     },
     variants: {

package/dist/components/alert/alert.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     slots: {
         base: 'typography-body-10 relative mb-5 xsl:flex',
         icon: 'float-left flex-none',
-        body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
+        body: 'relative flex-1 xsl:top-[0.125rem] [&_:focus-visible]:focus-outline [&_a]:underline',
         heading: 'typography-body-9 mb-1 font-bold',
         close: 'absolute right-0.5 top-0.5 h-5.5 p-1 hover:opacity-80'
     },

package/dist/components/autocomplete/autocomplete.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     slots: {
         base: 'relative flex flex-1 flex-col',
         label: 'block text-left text-sm font-medium text-text',
-        outerWrapper: 'form-control relative flex flex-1 flex-row items-stretch overflow-hidden pr-2 disabled:form-control-disabled group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+        outerWrapper: 'form-control relative flex flex-1 flex-row items-stretch pr-2 disabled:form-control-disabled group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
         input: 'appearance-none bg-[transparent] outline-none',
         clearButton: 'flex cursor-default items-center justify-center text-text-50 hover:text-border-60',
         iconWrapper: 'flex flex-col justify-center'

package/dist/components/badge/badge.styles.d.ts

@@ -25,7 +25,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     soft: {
         true: string;
     };
-}, undefined, "inline-block w-fit whitespace-nowrap border text-center", {
+}, undefined, "inline-block w-fit whitespace-nowrap border text-center [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, {
     color: {
@@ -81,6 +81,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     soft: {
         true: string;
     };
-}, undefined, "inline-block w-fit whitespace-nowrap border text-center", {
+}, undefined, "inline-block w-fit whitespace-nowrap border text-center [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/badge/badge.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'inline-block w-fit whitespace-nowrap border text-center',
+    base: 'inline-block w-fit whitespace-nowrap border text-center [&_:focus-visible]:focus-outline',
     variants: {
         color: {
             danger: 'border-danger bg-danger text-white',
@@ -22,7 +22,7 @@ export const styles = tv({
             'warning-inverted': 'border-none bg-white text-warning'
         },
         type: {
-            pill: 'typography-body-10 flex h-4 min-w-4 w-fit items-center justify-center rounded-xl px-[0.4375rem] font-medium leading-none',
+            pill: 'typography-body-10 inline-flex h-4 w-fit min-w-4 items-center justify-center rounded-xl px-[0.4375rem] font-medium leading-none',
             default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]'
         },
         soft: {

package/dist/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.styles.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:w-[37.5rem] md:rounded-md',
+        base: 'relative flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm focus-visible:focus-outline md:w-[37.5rem] md:rounded-md',
         title: 'typography-body-7 p-7 pb-4 pt-9 font-bold text-text max-md:px-5',
-        body: 'flex-1 overflow-auto px-7 pb-7 text-text max-md:px-5',
+        body: 'flex-1 overflow-auto px-7 pb-7 text-text max-md:px-5 [&_:focus-visible]:focus-outline',
         closeBtn: 'absolute right-3 top-3 p-0',
         buttonWrapper: '-mt-2 flex gap-1 px-7 pb-7 max-md:flex-col max-md:px-5 max-md:pb-5',
         primaryBtn: '',

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.js

@@ -14,7 +14,7 @@ export function BaseBreadcrumbItem({ className, isDisabled = false, isCurrent =
         elementType: FinalTag
     }, ref);
     return React.createElement("li", {
-        className: "inline-flex items-center"
+        className: "inline-flex items-center [&_:focus-visible]:focus-outline"
     }, React.createElement(FinalTag, {
         ...{
             ...itemProps,

package/dist/components/button/button.styles.js

@@ -33,7 +33,7 @@ export const styles = tv({
                 base: 'border border-borderDark bg-light text-muted hover:bg-white active:bg-white'
             },
             link: {
-                base: 'text-link underline'
+                base: 'px-0 text-link underline'
             },
             unstyled: {
                 base: 'p-0 text-left'

package/dist/components/button-dropdown/button-dropdown.component.d.ts

@@ -1,2 +1,2 @@
 import { type ButtonDropdownProps } from './button-dropdown.types.js';
-export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, look, soft, block, shouldFlip, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look, soft, block, dropDownIcon: Icon, shouldFlip, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button-dropdown/button-dropdown.component.js

@@ -6,7 +6,7 @@ import { Button } from '../button/index.js';
 import { DropDownIcon } from '../icon/index.js';
 import { styles as buttonDropdownStyles } from './button-dropdown.styles.js';
 import { ButtonDropdownPanel } from './components/button-dropdown-panel/button-dropdown-panel.component.js';
-export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore: IconBefore, open = false, text, children, size, look = 'hero', soft = false, block = false, shouldFlip }) {
+export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore: IconBefore, open = false, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look = 'hero', soft = false, block = false, dropDownIcon: Icon = DropDownIcon, shouldFlip }) {
     const ref = useRef(null);
     const panelId = useId();
     const styles = buttonDropdownStyles({
@@ -35,15 +35,17 @@ export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore:
     ]);
     return React.createElement(React.Fragment, null, React.createElement(Button, {
         ref: ref,
-        iconAfter: (props)=>React.createElement(DropDownIcon, {
+        iconAfter: !(look === 'link' || look === 'unstyled') ? (props)=>React.createElement(Icon, {
                 "aria-hidden": true,
                 ...props
-            }),
+            }) : undefined,
         iconBefore: IconBefore,
         size: size,
         look: look,
         soft: soft,
         block: block,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelBy,
         "aria-expanded": state.isOpen,
         "aria-controls": panelId,
         className: styles.base(),

package/dist/components/button-dropdown/button-dropdown.types.d.ts

@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { ButtonProps } from '../button/index.js';
+import { IconProps } from '../icon/icon.types.js';
 import { styles } from './button-dropdown.styles.js';
 import { ButtonDropdownPanelProps } from './components/button-dropdown-panel/button-dropdown-panel.types.js';
 type Variants = VariantProps<typeof styles>;
@@ -16,7 +17,7 @@ export type ButtonDropdownProps = {
     /**
      * Look for button
      */
-    look?: 'primary' | 'hero' | 'faint';
+    look?: 'primary' | 'hero' | 'faint' | 'unstyled' | 'link';
     /**
      * State of whether the Popover is open
      */
@@ -28,6 +29,10 @@ export type ButtonDropdownProps = {
     /**
      * Button text
      */
-    text: string;
+    text?: ReactNode;
+    /**
+     * Dropdown icon
+     */
+    dropDownIcon?: (props: IconProps) => ReactNode;
 } & ButtonHTMLAttributes<Element> & Pick<ButtonProps, 'size' | 'iconBefore' | 'block'> & Pick<ButtonDropdownPanelProps, 'shouldFlip'>;
 export {};

package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'my-0.5 rounded border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
-        dialog: ''
+        dialog: '[&_:focus-visible]:focus-outline'
     },
     variants: {
         isFocused: {

package/dist/components/collapsible/collapsible.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'px-0 text-text no-underline hover:underline',
-        content: 'typography-body-10 mb-2 block'
+        content: 'typography-body-10 mb-2 block [&_:focus-visible]:focus-outline'
     },
     variants: {
         open: {

package/dist/components/compacta/compacta.styles.js

@@ -12,7 +12,7 @@ export const styles = tv({
         addBtn: 'h-auto p-0 no-underline hover:underline',
         toggleBtn: 'p-0',
         collapsible: '',
-        content: 'px-3 pb-5 pt-0 md:px-9',
+        content: 'px-3 pb-5 pt-0 md:px-9 [&_:focus-visible]:focus-outline',
         footer: '',
         titlePrimary: 'typography-body-9 font-bold',
         titleSecondary: 'mt-1 items-center',

package/dist/components/date-picker-beta/components/calendar/components/calendar-grid/calendar-grid.component.js

@@ -11,7 +11,7 @@ export function CalendarGrid({ state, weekdayStyle = 'short', ...props }) {
         ...gridProps
     }, React.createElement("thead", headerProps, React.createElement("tr", null, weekDays.map((day, index)=>React.createElement("th", {
             key: index,
-            className: "text-text size-6 text-center text-[0.75rem] font-semibold leading-9"
+            className: "size-6 text-center text-[0.75rem] font-semibold leading-9 text-text"
         }, day.toUpperCase().slice(0, 2))))), React.createElement("tbody", null, [
         ...new Array(weeksInMonth).keys()
     ].map((weekIndex)=>React.createElement("tr", {

package/dist/components/date-picker-beta/components/date-field/components/date-segment/date-segment.styles.d.ts

@@ -11,7 +11,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "font-light disabled:form-control-disabled", {
+}, undefined, "font-light disabled:form-control-disabled focus:focus-outline", {
     responsiveVariants: string[];
 }, {
     isPlaceholder: {
@@ -39,6 +39,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "font-light disabled:form-control-disabled", {
+}, undefined, "font-light disabled:form-control-disabled focus:focus-outline", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/date-picker-beta/components/date-field/components/date-segment/date-segment.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'font-light disabled:form-control-disabled',
+    base: 'font-light disabled:form-control-disabled focus:focus-outline',
     variants: {
         isPlaceholder: {
             true: 'text-text-50 opacity-100',

package/dist/components/date-picker-beta/components/popover/popover.styles.js

@@ -18,7 +18,7 @@ export const styles = tv({
             },
             false: {
                 underlay: '',
-                closeButton: 'border-border pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
+                closeButton: 'pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border border-border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
                 headerLabel: 'hidden',
                 popover: 'absolute mt-1 scale-100 animate-fadeIn rounded border border-border bg-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]'
             }

package/dist/components/filter/components/filter-buttons/filter-buttons.component.js

@@ -34,7 +34,7 @@ export function FilterButtons({ filterButtons, onClick, selectedButton, tag: Tag
             let targetElement;
             let scrollX;
             let scrollBy = true;
-            const buttonPaddingOffset = 20;
+            const buttonPaddingOffset = 26;
             if (direction === 'left') {
                 if (scrollTarget.left === -1) {
                     scrollX = -container.clientWidth;
@@ -190,8 +190,7 @@ export function FilterButtons({ filterButtons, onClick, selectedButton, tag: Tag
         }),
         style: {
             scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
-            overflowX: 'scroll'
+            msOverflowStyle: 'none'
         },
         ...props,
         ref: scrollContainerRef,

package/dist/components/filter/components/filter-buttons/filter-buttons.styles.js

@@ -1,17 +1,17 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative flex justify-start',
-        buttonList: 'flex w-full touch-pan-x gap-1 overflow-x-auto overflow-y-visible whitespace-nowrap',
-        scrollButton: 'absolute rounded-none contrast-more:bg-black'
+        base: 'relative -left-1 flex justify-start',
+        buttonList: 'flex w-full touch-pan-x gap-1 overflow-y-visible overflow-x-scroll whitespace-nowrap p-1',
+        scrollButton: 'absolute inset-y-0 h-auto rounded-none contrast-more:bg-black'
     },
     variants: {
         position: {
             left: {
-                scrollButton: '-left-1 bg-[linear-gradient(90deg,_#fff_66%,_transparent)] pl-0'
+                scrollButton: 'left-0 bg-[linear-gradient(90deg,_#fff_66%,_transparent)] pl-0'
             },
             right: {
-                scrollButton: '-right-1 bg-[linear-gradient(270deg,_#fff_66%,_transparent)] pr-0'
+                scrollButton: '-right-2 bg-[linear-gradient(270deg,_#fff_66%,_transparent)] pr-0'
             }
         },
         hidden: {

package/dist/components/filter/filter.component.js

@@ -2,6 +2,6 @@ import React from 'react';
 export function Filter({ children, ...props }) {
     return React.createElement("div", {
         ...props,
-        className: "flex flex-col gap-3"
+        className: "flex flex-col gap-2"
     }, children);
 }

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.styles.d.ts

@@ -10,7 +10,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-}, undefined, "flex flex-1 flex-col gap-1 overflow-hidden", {
+}, undefined, "flex flex-1 flex-col gap-1 overflow-x-clip", {
     responsiveVariants: string[];
 }, {
     isLink: {
@@ -36,6 +36,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-}, undefined, "flex flex-1 flex-col gap-1 overflow-hidden", {
+}, undefined, "flex flex-1 flex-col gap-1 overflow-x-clip", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex flex-1 flex-col gap-1 overflow-hidden',
+    base: 'flex flex-1 flex-col gap-1 overflow-x-clip',
     variants: {
         isLink: {
             true: 'group/dualaction'

package/dist/components/flexi-cell/flexi-cell.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative flex bg-white transition-colors',
+        base: 'relative flex bg-white transition-colors [&_:focus-visible]:focus-outline',
         topBadgeWrapper: 'absolute right-[-1px] top-[-1px]',
         topBadge: 'rounded-br-none rounded-tl-none'
     },

package/dist/components/footer/footer.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative overflow-hidden border-t border-t-border',
+        base: 'relative overflow-hidden border-t border-t-border [&_:focus-visible]:focus-outline',
         wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-3',
         link: 'float-right block',
         logoWrapper: 'flex justify-end'

package/dist/components/header/header.styles.js

@@ -8,7 +8,7 @@ export const styles = tv({
         largeLogo: 'max-sm:hidden',
         leftContent: 'flex items-center',
         leftButton: 'my-1 rounded-none border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-7 sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-10',
-        rightContent: 'ml-auto flex items-center'
+        rightContent: 'ml-auto flex items-center [&_:focus-visible]:focus-outline'
     },
     variants: {
         logoCenter: {

package/dist/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.d.ts

@@ -7,7 +7,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         before: string;
         after: string;
     };
-}, undefined, "inset-y-0", {
+}, undefined, "inset-y-0 focus-within:z-20", {
     responsiveVariants: string[];
 }, {
     isInset: {
@@ -27,6 +27,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         before: string;
         after: string;
     };
-}, undefined, "inset-y-0", {
+}, undefined, "inset-y-0 focus-within:z-20", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'inset-y-0',
+    base: 'inset-y-0 focus-within:z-20',
     variants: {
         isInset: {
             true: 'absolute',
@@ -15,12 +15,12 @@ export const styles = tv({
         {
             isInset: true,
             position: 'before',
-            className: 'left-0'
+            className: 'left-0 z-[11]'
         },
         {
             isInset: true,
             position: 'after',
-            className: 'right-0'
+            className: 'right-0 z-[11]'
         }
     ]
 }, {

package/dist/components/input-group/input-group.component.js

@@ -1,4 +1,5 @@
 'use client';
+import { clsx } from 'clsx';
 import React, { Children, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
 import { ErrorMessage, Hint, Label } from '../index.js';
 import { InputGroupSupportingText } from './components/index.js';
@@ -78,7 +79,8 @@ export function InputGroup({ label, hideLabel, size = 'medium', hint, errorMessa
                     'aria-label': ariaLabel,
                     ...width !== 'full' ? {
                         width: width
-                    } : {}
+                    } : {},
+                    className: clsx(child.props.className, 'focus:z-10')
                 });
             }
         });

package/dist/components/modal/components/modal-dialog/modal-dialog.styles.js

@@ -31,7 +31,7 @@ export const styles = tv({
         },
         isFocusVisible: {
             true: {
-                close: 'focus-outline'
+                close: '!outline-offset-[-3px] focus-outline'
             },
             false: {
                 close: 'outline-none'

package/dist/components/pagination/components/pagination-item/pagination-item.component.js

@@ -1,15 +1,21 @@
 import React from 'react';
+import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { styles } from './pagination-item.styles.js';
 export function PaginationItem({ className, firstItem = false, lastItem = false, tag: Tag = 'a', children, active, disabled = false, ...props }) {
+    const ref = React.useRef(null);
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const { buttonProps } = useButton(props, ref);
+    const finalButtonProps = mergeProps(focusProps, buttonProps);
     return React.createElement(Tag, {
         className: styles({
             className,
             firstItem,
             lastItem,
             active,
-            disabled
+            disabled,
+            isFocusVisible
         }),
-        ...props,
+        ...finalButtonProps,
         disabled: disabled,
         "aria-disabled": disabled ? 'true' : 'false',
         "aria-current": active ? 'page' : undefined,

package/dist/components/pagination/components/pagination-item/pagination-item.styles.d.ts

@@ -1,4 +1,8 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
     firstItem: {
         true: string;
         false: string;
@@ -18,6 +22,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
 }, undefined, "typography-body-10 relative block min-w-7 border border-border px-2 py-1.5 text-center text-text", {
     responsiveVariants: string[];
 }, {
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
     firstItem: {
         true: string;
         false: string;
@@ -35,6 +43,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
     firstItem: {
         true: string;
         false: string;

package/dist/components/pagination/components/pagination-item/pagination-item.styles.js

@@ -2,6 +2,10 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     base: 'typography-body-10 relative block min-w-7 border border-border px-2 py-1.5 text-center text-text',
     variants: {
+        isFocusVisible: {
+            true: 'z-10 focus-outline',
+            false: ''
+        },
         firstItem: {
             true: 'rounded-l',
             false: 'ml-[-1px]'
@@ -11,7 +15,7 @@ export const styles = tv({
             false: ''
         },
         active: {
-            true: 'z-10 border-hero bg-hero text-white',
+            true: 'border-hero bg-hero text-white',
             false: 'hover:bg-light'
         },
         disabled: {

package/dist/components/pagination/components/pagination-presentational/pagination-presentational.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'flex flex-col items-center',
-        ul: 'flex overflow-hidden',
+        ul: 'flex',
         emptyItem: 'typography-body-10 relative block min-w-7 cursor-default border-y border-border px-2 py-1.5 text-center text-text'
     },
     variants: {}

package/dist/components/panel/components/panel-footer/panel-footer.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'border-0 border-t border-border bg-light px-2 py-[0.625rem] sm:px-4'
+        base: 'border-0 border-t border-border bg-light px-2 py-[0.625rem] sm:px-4 [&_:focus-visible]:focus-outline'
     },
     variants: {}
 }, {

package/dist/components/panel/panel.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'group/panel overflow-hidden rounded border border-hero',
+        base: 'group/panel overflow-hidden rounded border border-hero [&_:focus-visible]:focus-outline',
         header: 'px-2 py-[0.625rem] sm:px-4'
     },
     variants: {

package/dist/components/popover/components/panel/panel.styles.js

@@ -9,8 +9,8 @@ export const styles = tv({
       `,
         closeBtn: 'absolute right-1 top-1 h-3 p-0 hover:opacity-80',
         content: 'w-[17.625rem] rounded-[3px] bg-white py-4 pl-3 pr-5',
-        heading: 'typography-body-9 mb-2 font-medium text-text',
-        body: 'typography-body-10 text-text'
+        heading: 'typography-body-9 mb-2 font-medium text-text focus-visible:focus-outline',
+        body: 'typography-body-10 text-text focus-visible:focus-outline'
     },
     variants: {
         placement: {

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.js

@@ -1,11 +1,12 @@
-import { AnimatePresence, LazyMotion, m } from 'motion/react';
-import React, { useId, useMemo } from 'react';
+import { LazyMotion, m, useAnimate } from 'motion/react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { useFocusRing } from 'react-aria';
 import { Circle, VisuallyHidden } from '../../../index.js';
 import { ProgressRopeStep } from '../index.js';
 import { styles as progressRopeGroupStyles } from './progress-rope-group-step.styles.js';
 const loadAnimations = ()=>import('./progress-rope-group-step.utils.js').then((res)=>res.default);
 export function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep, children, firstItem, opened, onToggle, tag: Tag }) {
+    const [scope, animate] = useAnimate();
     const id = useId();
     const stepsContainerID = `progress-rope-group-steps-container-${id}`;
     const current = useMemo(()=>{
@@ -55,6 +56,32 @@ export function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep,
         state,
         isFocusVisible
     });
+    const [overflowVisible, setOverflowVisible] = useState(false);
+    useEffect(()=>{
+        if (opened) {
+            animate(scope.current, {
+                height: 'auto'
+            }, {
+                duration: 0.2,
+                ease: 'easeInOut',
+                onComplete: ()=>{
+                    setOverflowVisible(true);
+                }
+            });
+        } else {
+            animate(scope.current, {
+                height: 0
+            }, {
+                duration: 0.2,
+                ease: 'easeInOut',
+                onPlay: ()=>{
+                    setOverflowVisible(false);
+                }
+            });
+        }
+    }, [
+        opened
+    ]);
     return React.createElement(Tag, null, React.createElement("button", {
         "aria-expanded": opened,
         className: styles.circleWrapper({}),
@@ -66,23 +93,13 @@ export function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep,
         "aria-hidden": "true"
     }), children, React.createElement(VisuallyHidden, null, visuallyHiddenMessage)), React.createElement(LazyMotion, {
         features: loadAnimations
-    }, React.createElement(AnimatePresence, {
-        initial: false
-    }, opened && React.createElement(m.div, {
+    }, React.createElement(m.div, {
+        ref: scope,
         initial: {
-            height: 0,
-            overflow: 'hidden'
-        },
-        animate: {
-            height: 'auto'
-        },
-        exit: {
-            height: 0,
-            overflow: 'hidden'
+            height: opened ? 'auto' : 0
         },
-        transition: {
-            duration: 0.2,
-            ease: 'easeInOut'
+        style: {
+            overflow: overflowVisible ? 'visible' : 'hidden'
         }
     }, React.createElement("ol", {
         className: styles.stepsWrapper({}),
@@ -97,6 +114,7 @@ export function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep,
             onClick: (furthestVisitedStep || 0) >= step.index ? step.onClick : undefined,
             current: step.index === currentKey,
             visited: (furthestVisitedStep || 0) > step.index,
-            furthest: furthestVisitedStep === step.index
-        }, step.text))))))));
+            furthest: furthestVisitedStep === step.index,
+            tabIndex: opened ? 0 : -1
+        }, step.text)))))));
 }

package/dist/components/repeater/repeater.styles.js

@@ -5,7 +5,7 @@ export const styles = tv({
         list: 'm-0 flex list-none flex-col pl-0',
         item: 'relative',
         itemIndex: 'mb-3 font-bold',
-        content: '',
+        content: '[&_:focus-visible]:focus-outline',
         removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
         footer: 'flex justify-between pt-[0.875rem]',
         addBtn: 'h-auto p-0 no-underline hover:underline'