@clicoh/orion-library 1.0.19 → 1.1.0-beta.2

package/dist/components/02-molecules/Menu/MenuItem.jsx

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import Link from 'next/link';
 import { FaChevronDown, FaRegStar, FaStar } from 'react-icons/fa';
 import { Show } from '../../00-base';
-import { Paragraph } from '../../01-atoms';
 /**
  * MenuItem component for rendering a navigation menu item with optional toggle functionality.
  *
@@ -29,23 +28,42 @@ import { Paragraph } from '../../01-atoms';
  *
  * @returns {ReactNode} The rendered MenuItem component.
  */
-export function MenuItem({ text, path, toggle, onClickToggle, icon, isActive, target, level = 1, isOpen = false, isFavorite = false, onFavoriteToggle, orientation = 'vertical', }) {
+export function MenuItem({ text, path, toggle, onClickToggle, icon, isActive, target, level = 1, isOpen = false, isFavorite = false, onFavoriteToggle, getFavoriteAriaLabel, orientation = 'vertical', submenuId, toggleId, }) {
     const isHorizontalTop = orientation === 'horizontal' && level === 1;
-    const linkStyleMap = clsx('link relative flex w-full cursor-pointer items-center justify-between gap-2', level === 1 && 'h-14 pl-12', level === 2 && 'h-10 pl-12', level >= 3 && 'text-gray-1 h-10 pl-16', isHorizontalTop && [
-        'text-gray-2 transition-colors',
-        !isActive && 'hover:text-gray-1',
-        isActive && 'text-gray-1',
+    const linkStyleMap = clsx('link focus-visible:ring-lavender relative flex w-full cursor-pointer items-center justify-between gap-2 focus-visible:ring-2 focus-visible:outline-none', level === 1 && 'h-14 pl-12', level === 2 && 'h-10 pl-12', level >= 3 && 'text-gray-1 dark:text-gray-3 h-10 pl-16', isHorizontalTop && [
+        'text-gray-1 dark:text-gray-3 transition-colors',
+        !isActive && 'hover:text-gray-1 dark:hover:text-white',
+        isActive && 'text-gray-1 dark:text-white',
         'before:bg-lavender before:absolute before:-bottom-2.5 before:left-0 before:block before:h-0.5 before:w-full before:transition-opacity',
         !isActive && 'before:opacity-0 hover:before:opacity-100',
         isActive && 'before:opacity-100',
     ], !isHorizontalTop && [
-        'hover:bg-gray-6 hover:text-lavender',
-        level === 1 && isOpen && 'bg-gray-6 text-lavender',
+        'hover:bg-gray-6 hover:text-lavender dark:hover:bg-gray-1 dark:hover:text-lavender-dark',
+        isActive &&
+            'bg-gray-6 text-lavender dark:bg-gray-1 dark:text-lavender-dark',
+        level === 1 &&
+            isOpen &&
+            'bg-gray-6 text-lavender dark:bg-gray-1 dark:text-lavender-dark',
     ]);
-    const handleToggleClick = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        onClickToggle();
+    const handleToggleKeyDown = (event) => {
+        const openKey = orientation === 'horizontal' ? 'ArrowDown' : 'ArrowRight';
+        if (event.key === openKey && toggle) {
+            event.preventDefault();
+            if (!isOpen) {
+                onClickToggle();
+            }
+            window.requestAnimationFrame(() => {
+                document
+                    .getElementById(submenuId ?? '')
+                    ?.querySelector('.link')
+                    ?.focus();
+            });
+        }
+        else if (event.key === 'Escape' && toggle && isOpen) {
+            event.preventDefault();
+            onClickToggle();
+            event.currentTarget.focus();
+        }
     };
     const handleFavoriteClick = (event) => {
         event.preventDefault();
@@ -56,37 +74,50 @@ export function MenuItem({ text, path, toggle, onClickToggle, icon, isActive, ta
     const canShowFavorite = isLink && Boolean(onFavoriteToggle);
     return (<Show>
       <Show.When isTrue={isLink}>
-        <Link href={path} className={clsx('slide-over__close', linkStyleMap)} target={target ?? '_self'}>
-          <MenuItemContent text={text} icon={icon} toggle={toggle} handleToggleClick={handleToggleClick} level={level} hideIcon={isHorizontalTop} showFavorite={canShowFavorite} isFavorite={isFavorite} handleFavoriteClick={handleFavoriteClick}/>
-        </Link>
+        <div className={clsx('menu-item-row flex w-full items-center', !isHorizontalTop && [
+            'hover:bg-gray-6 dark:hover:bg-gray-1',
+            isActive && 'bg-gray-6 dark:bg-gray-1',
+        ])}>
+          <Link href={path} className={clsx('slide-over__close flex-1', linkStyleMap)} target={target ?? '_self'} aria-current={isActive ? 'page' : undefined}>
+            <MenuItemContent text={text} icon={icon} toggle={toggle} level={level} hideIcon={isHorizontalTop}/>
+          </Link>
+          <Show>
+            <Show.When isTrue={canShowFavorite}>
+              <FavoriteStar isFavorite={isFavorite} ariaLabel={getFavoriteAriaLabel?.({
+            text,
+            path,
+            isFavorite,
+        })} onClick={handleFavoriteClick} size={level >= 3 ? 14 : 16}/>
+            </Show.When>
+          </Show>
+        </div>
       </Show.When>
       <Show.Else>
-        <span className={linkStyleMap} onClick={handleToggleClick}>
-          <MenuItemContent text={text} icon={icon} toggle={toggle} handleToggleClick={handleToggleClick} level={level} hideIcon={isHorizontalTop} showFavorite={false} isFavorite={false} handleFavoriteClick={handleFavoriteClick}/>
-        </span>
+        <button type="button" id={toggleId} className={clsx(linkStyleMap, 'bg-transparent text-inherit')} aria-expanded={toggle ? isOpen : undefined} aria-controls={toggle ? submenuId : undefined} onClick={toggle ? onClickToggle : undefined} onKeyDown={handleToggleKeyDown}>
+          <MenuItemContent text={text} icon={icon} toggle={toggle} level={level} hideIcon={isHorizontalTop}/>
+        </button>
       </Show.Else>
     </Show>);
 }
-function MenuItemContent({ text, icon, toggle, handleToggleClick, level, hideIcon, showFavorite, isFavorite, handleFavoriteClick, }) {
+function MenuItemContent({ text, icon, toggle, level, hideIcon, }) {
     return (<>
       {level === 1 && !!icon && !hideIcon && (<span className="icon">{icon}</span>)}
-      <Paragraph size={level >= 3 ? 'body-2' : 'body-1'}>{text}</Paragraph>
-      {!!toggle && (<span onClick={handleToggleClick} className="toggle cursor-pointer p-2 transition-transform duration-500">
-          <FaChevronDown size={level >= 3 ? 12 : 16}/>
+      <span className={level >= 3 ? 'text-xs' : 'text-sm'}>{text}</span>
+      {!!toggle && (<span className="toggle p-2 transition-transform duration-500">
+          <FaChevronDown aria-hidden size={level >= 3 ? 12 : 16}/>
         </span>)}
-      {!!showFavorite && (<FavoriteStar isFavorite={isFavorite} onClick={handleFavoriteClick} size={level >= 3 ? 14 : 16}/>)}
     </>);
 }
-function FavoriteStar({ isFavorite, onClick, size, }) {
-    return (<button type="button" onClick={onClick} aria-pressed={isFavorite} aria-label={isFavorite ? 'Quitar de favoritos' : 'Marcar como favorito'} className="favorite group ml-auto flex shrink-0 cursor-pointer items-center justify-center p-2">
+function FavoriteStar({ isFavorite, ariaLabel, onClick, size, }) {
+    return (<button type="button" onClick={onClick} aria-pressed={isFavorite} aria-label={ariaLabel} className="favorite focus-visible:ring-lavender group ml-auto flex shrink-0 cursor-pointer items-center justify-center p-2 focus-visible:ring-2 focus-visible:outline-none">
       <Show>
         <Show.When isTrue={isFavorite}>
-          <FaStar size={size} className="text-[#FFC34C]"/>
+          <FaStar aria-hidden size={size} className="text-warning dark:text-warning-dark"/>
         </Show.When>
         <Show.Else>
           <span className="relative inline-flex" style={{ width: size, height: size }}>
-            <FaStar size={size} aria-hidden className="absolute inset-0 hidden text-[#FFE58F] group-hover:block"/>
-            <FaRegStar size={size} className="text-gray-3 group-hover:text-[#FFC34C] relative"/>
+            <FaStar size={size} aria-hidden className="text-warning-1 dark:text-warning-dark-1 absolute inset-0 hidden group-hover:block"/>
+            <FaRegStar aria-hidden size={size} className="text-gray-3 group-hover:text-warning dark:text-gray-2 dark:group-hover:text-warning-dark relative"/>
           </span>
         </Show.Else>
       </Show>

package/dist/components/02-molecules/Menu/MenuItem.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MenuItem.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuItem.tsx"],"names":[],"mappings":"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"}

package/dist/components/02-molecules/Menu/MenuList.d.ts

@@ -5,11 +5,14 @@ type MenuListProps = {
     orientation: ComponentProps<typeof List>['orientation'];
     menu: ({
         submenu?: MenuListProps['menu'];
-    } & Omit<ComponentProps<typeof MenuItem>, 'toggle' | 'onClickToggle' | 'callback' | 'onFavoriteToggle' | 'orientation'>)[];
+    } & Omit<ComponentProps<typeof MenuItem>, 'toggle' | 'onClickToggle' | 'callback' | 'onFavoriteToggle' | 'getFavoriteAriaLabel' | 'orientation'>)[];
     level?: number;
     isToggle?: boolean;
     parentOpen?: boolean;
     onFavoriteToggle?: ComponentProps<typeof MenuItem>['onFavoriteToggle'];
+    getFavoriteAriaLabel?: ComponentProps<typeof MenuItem>['getFavoriteAriaLabel'];
+    onEscape?: () => void;
+    parentToggleId?: string;
 };
 /**
  * MenuList component for rendering a list of menu items with optional submenus.
@@ -36,6 +39,6 @@ type MenuListProps = {
  *
  * @returns {ReactNode} The rendered MenuList component.
  */
-export declare function MenuList({ menu, orientation, level, isToggle, parentOpen, onFavoriteToggle, }: MenuListProps): ReactNode;
+export declare function MenuList({ menu, orientation, level, isToggle, parentOpen, onFavoriteToggle, getFavoriteAriaLabel, onEscape, parentToggleId, }: MenuListProps): ReactNode;
 export {};
 //# sourceMappingURL=MenuList.d.ts.map

package/dist/components/02-molecules/Menu/MenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuList.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC;IACxD,IAAI,EAAE,CAAC;QAAE,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI,CAC/C,cAAc,CAAC,OAAO,QAAQ,CAAC,EAC/B,QAAQ,GAAG,eAAe,GAAG,UAAU,GAAG,kBAAkB,GAAG,aAAa,CAC7E,CAAC,EAAE,CAAC;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;CACxE,CAAC;AAuCF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAW,EACX,KAAS,EACT,QAAgB,EAChB,UAAiB,EACjB,gBAAgB,GACjB,EAAE,aAAa,GAAG,SAAS,CA+F3B"}
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuList.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC;IACxD,IAAI,EAAE,CAAC;QAAE,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI,CAC/C,cAAc,CAAC,OAAO,QAAQ,CAAC,EAC7B,QAAQ,GACR,eAAe,GACf,UAAU,GACV,kBAAkB,GAClB,sBAAsB,GACtB,aAAa,CAChB,CAAC,EAAE,CAAC;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACvE,oBAAoB,CAAC,EAAE,cAAc,CACnC,OAAO,QAAQ,CAChB,CAAC,sBAAsB,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AA4CF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAW,EACX,KAAS,EACT,QAAgB,EAChB,UAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,QAAQ,EACR,cAAc,GACf,EAAE,aAAa,GAAG,SAAS,CA8J3B"}

package/dist/components/02-molecules/Menu/MenuList.jsx

@@ -1,7 +1,7 @@
 'use client';
 import clsx from 'clsx';
 import { usePathname } from 'next/navigation';
-import { useEffect, useState, } from 'react';
+import { useEffect, useId, useState, } from 'react';
 import { Each } from '../../00-base';
 import { List } from '../../01-atoms';
 import { MenuItem } from './MenuItem';
@@ -9,13 +9,13 @@ const styleMap = {
     horizontal: 'menu--horizontal',
     vertical: 'menu--vertical',
 };
-const styleMapLinkHorizontal = clsx('[.menu--horizontal_&>.link]:px-2 [.menu--horizontal_&>.link]:py-3');
-const styleMapLinkVertical = clsx('[.menu--vertical_&>.link]:py-2 [.menu--vertical_&>.link]:pr-4');
+const styleMapLinkHorizontal = clsx('[.menu--horizontal_&>.link]:px-2 [.menu--horizontal_&>.link]:py-3', '[.menu--horizontal_&>.menu-item-row>.link]:px-2 [.menu--horizontal_&>.menu-item-row>.link]:py-3');
+const styleMapLinkVertical = clsx('[.menu--vertical_&>.link]:py-2 [.menu--vertical_&>.link]:pr-4', '[.menu--vertical_&>.menu-item-row>.link]:py-2 [.menu--vertical_&>.menu-item-row>.link]:pr-4', '[.menu--vertical_&>.menu-item-row>.favorite]:mr-4');
 const styleMapLink = clsx(styleMapLinkHorizontal, styleMapLinkVertical);
-const styleMapIcon = clsx('[.menu--vertical_&>.link>.icon]:absolute [.menu--vertical_&>.link>.icon]:left-4');
+const styleMapIcon = clsx('[.menu--vertical_&>.link>.icon]:absolute [.menu--vertical_&>.link>.icon]:left-4', '[.menu--vertical_&>.menu-item-row>.link>.icon]:absolute [.menu--vertical_&>.menu-item-row>.link>.icon]:left-4');
 const styleMapToggle = clsx('[.menu--horizontal_&:hover>.link>.toggle]:rotate-180 [.menu--vertical_&.open>.link>.toggle]:rotate-180');
 const styleMapSubmenuHorizontal = (level) => clsx('[.menu--horizontal_&>.submenu]:invisible [.menu--horizontal_&>.submenu]:absolute [.menu--horizontal_&>.submenu]:w-max [.menu--horizontal_&>.submenu]:max-w-full [.menu--horizontal_&>.submenu]:min-w-32 [.menu--horizontal_&>.submenu]:rounded-sm [.menu--horizontal_&>.submenu]:opacity-0 [.menu--horizontal_&>.submenu]:shadow-md', level > 1 &&
-    '[.menu--horizontal_&>.submenu]:top-0 [.menu--horizontal_&>.submenu]:left-full', '[.menu--horizontal_&:hover>.submenu]:visible [.menu--horizontal_&:hover>.submenu]:opacity-100');
+    '[.menu--horizontal_&>.submenu]:top-0 [.menu--horizontal_&>.submenu]:left-full', '[.menu--horizontal_&:hover>.submenu]:visible [.menu--horizontal_&:hover>.submenu]:opacity-100', '[.menu--horizontal_&.open>.submenu]:visible [.menu--horizontal_&.open>.submenu]:opacity-100');
 const styleMapSubmenuVertical = clsx('[.menu--vertical_&>.submenu]:grid [.menu--vertical_&>.submenu]:[grid-template-rows:0fr] [.menu--vertical_&>.submenu]:transition-[grid-template-rows] [.menu--vertical_&>.submenu]:duration-300 [.menu--vertical_&>.submenu]:ease-in-out', '[.menu--vertical_&.open>.submenu]:[grid-template-rows:1fr]');
 const styleMapSubmenu = (level) => clsx(styleMapSubmenuHorizontal(level), styleMapSubmenuVertical);
 /**
@@ -43,9 +43,10 @@ const styleMapSubmenu = (level) => clsx(styleMapSubmenuHorizontal(level), styleM
  *
  * @returns {ReactNode} The rendered MenuList component.
  */
-export function MenuList({ menu, orientation, level = 1, isToggle = false, parentOpen = true, onFavoriteToggle, }) {
+export function MenuList({ menu, orientation, level = 1, isToggle = false, parentOpen = true, onFavoriteToggle, getFavoriteAriaLabel, onEscape, parentToggleId, }) {
     const pathname = usePathname();
     const [showItems, setShowItems] = useState(menu.map(() => false));
+    const generatedId = useId();
     useEffect(() => {
         if (!parentOpen) {
             setShowItems(menu.map(() => false));
@@ -54,18 +55,61 @@ export function MenuList({ menu, orientation, level = 1, isToggle = false, paren
     const toggleShowItems = (index) => {
         setShowItems((prevItems) => prevItems.map((item, i) => (i === index ? !item : false)));
     };
-    if (level === 1) {
-        orientation === 'vertical' ? (isToggle = true) : (isToggle = false);
-    }
-    return (<List orientation={orientation} className={clsx('menu', level === 1 && styleMap[orientation], orientation === 'horizontal' && 'gap-2', `level-${level}`)}>
+    const effectiveToggle = level === 1 ? orientation === 'vertical' : isToggle;
+    const handleKeyDown = (event) => {
+        const target = event.target;
+        if (target.closest('ul') !== event.currentTarget ||
+            target.closest('.favorite')) {
+            return;
+        }
+        const items = Array.from(event.currentTarget.children)
+            .map((child) => child.querySelector(':scope > .link, :scope > .menu-item-row > .link'))
+            .filter((element) => element instanceof HTMLElement);
+        const currentItem = target.closest('.link');
+        const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            if (currentIndex >= 0 && showItems[currentIndex]) {
+                toggleShowItems(currentIndex);
+                currentItem?.focus();
+            }
+            else {
+                onEscape?.();
+                document.getElementById(parentToggleId ?? '')?.focus();
+            }
+            return;
+        }
+        let nextIndex;
+        const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+        const previousKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+        if (event.key === nextKey) {
+            nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        }
+        else if (event.key === previousKey) {
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        }
+        else if (event.key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (event.key === 'End') {
+            nextIndex = items.length - 1;
+        }
+        if (nextIndex !== undefined) {
+            event.preventDefault();
+            items[nextIndex]?.focus();
+        }
+    };
+    return (<List orientation={orientation} className={clsx('menu', level === 1 && styleMap[orientation], orientation === 'horizontal' && 'gap-2', `level-${level}`)} onKeyDown={handleKeyDown}>
       <Each of={menu} render={({ submenu, ...menuItem }, index) => {
             const hasSubmenu = (submenu?.length ?? 0) > 0;
-            return (<li key={`${menuItem.path ?? ''}::${menuItem.text}::${index}`} onClick={() => orientation === 'horizontal' && toggleShowItems(index)} className={clsx('relative', level > 1 && 'w-full', showItems[index] && 'open', styleMapLink, styleMapIcon, styleMapToggle, styleMapSubmenu(level))}>
-              <MenuItem {...menuItem} isActive={orientation === 'horizontal' && menuItem.path === pathname} onClickToggle={() => toggleShowItems(index)} toggle={hasSubmenu} level={level} isOpen={showItems[index]} onFavoriteToggle={onFavoriteToggle} orientation={orientation}/>
-              {!!hasSubmenu && (<div className={clsx('submenu', level > 1 && 'top-0 left-full')}>
-                  {isToggle ? (<div className="min-h-0 overflow-hidden">
-                      <MenuList orientation="vertical" menu={submenu} level={level + 1} isToggle={isToggle} parentOpen={showItems[index]} onFavoriteToggle={onFavoriteToggle}/>
-                    </div>) : (<MenuList orientation="vertical" menu={submenu} level={level + 1} isToggle={isToggle} onFavoriteToggle={onFavoriteToggle}/>)}
+            const submenuId = `${generatedId}-submenu-${index}`;
+            const toggleId = `${generatedId}-toggle-${index}`;
+            return (<li key={`${menuItem.path ?? ''}::${menuItem.text}::${index}`} className={clsx('relative', level > 1 && 'w-full', showItems[index] && 'open', styleMapLink, styleMapIcon, styleMapToggle, styleMapSubmenu(level))}>
+              <MenuItem {...menuItem} isActive={menuItem.path === pathname} onClickToggle={() => toggleShowItems(index)} toggle={hasSubmenu} level={level} isOpen={showItems[index]} onFavoriteToggle={onFavoriteToggle} getFavoriteAriaLabel={getFavoriteAriaLabel} orientation={orientation} submenuId={submenuId} toggleId={toggleId}/>
+              {!!hasSubmenu && (<div id={submenuId} className={clsx('submenu dark:bg-black-1 bg-white text-black dark:text-white', level > 1 && 'top-0 left-full')}>
+                  {effectiveToggle ? (<div className="min-h-0 overflow-hidden">
+                      <MenuList orientation="vertical" menu={submenu} level={level + 1} isToggle={effectiveToggle} parentOpen={showItems[index]} onFavoriteToggle={onFavoriteToggle} getFavoriteAriaLabel={getFavoriteAriaLabel} onEscape={() => toggleShowItems(index)} parentToggleId={toggleId}/>
+                    </div>) : (<MenuList orientation="vertical" menu={submenu} level={level + 1} isToggle={effectiveToggle} onFavoriteToggle={onFavoriteToggle} getFavoriteAriaLabel={getFavoriteAriaLabel} onEscape={() => toggleShowItems(index)} parentToggleId={toggleId}/>)}
                 </div>)}
             </li>);
         }}/>

package/dist/components/02-molecules/Menu/MenuList.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MenuList.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Menu/MenuList.tsx"],"names":[],"mappings":"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"}

package/dist/components/02-molecules/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type RefObject } from 'react';
 type ModalProps = {
     header: string | ReactNode;
     subHeader?: string | ReactNode;
@@ -7,6 +7,10 @@ type ModalProps = {
     cancelButton?: TButton;
     size?: 'base' | 'lg' | 'xl';
     handleCloseIcon: TButton['callback'];
+    closeButtonAriaLabel?: string;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
 };
 export type TButton = {
     text: string;

package/dist/components/02-molecules/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAIf,KAAK,UAAU,GAAG;IAChB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,WAAW,EAAE,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,YAAY,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACvD,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,KAAK,iGAmHhB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAKf,KAAK,UAAU,GAAG;IAChB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,WAAW,EAAE,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,YAAY,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACvD,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,KAAK,iGAmJhB,CAAC"}

package/dist/components/02-molecules/Modal/Modal.jsx

@@ -1,8 +1,9 @@
 'use client';
 import clsx from 'clsx';
-import { forwardRef, useEffect, useImperativeHandle, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
 import { IoCloseSharp } from 'react-icons/io5';
 import { Button, Paragraph } from '../../01-atoms';
+import { useDialogFocus } from './useDialogFocus';
 const enteringClasses = 'ease-out duration-300 opacity-0';
 const leavingClasses = 'ease-in duration-200 opacity-75';
 /**
@@ -40,14 +41,18 @@ const leavingClasses = 'ease-in duration-200 opacity-75';
  *
  * @returns {ReactNode} The rendered Modal component.
  */
-export const Modal = forwardRef(function ({ header, subHeader, children, confirmButton, cancelButton, size = 'base', handleCloseIcon, }, ref) {
+export const Modal = forwardRef(function ({ header, subHeader, children, confirmButton, cancelButton, size = 'base', handleCloseIcon, closeButtonAriaLabel, initialFocusRef, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, }, ref) {
     const [isOpen, setIsOpen] = useState(false);
-    const handlerClose = (callback) => {
+    const dialogRef = useRef(null);
+    const generatedId = useId();
+    const titleId = `${generatedId}-title`;
+    const descriptionId = `${generatedId}-description`;
+    const handlerClose = useCallback((callback) => {
         callback((closeAction) => {
             setIsOpen(false);
             setTimeout(closeAction, 200);
         });
-    };
+    }, []);
     const handlerOverlayClick = (event) => {
         if (event.target === event.currentTarget) {
             handlerClose(handleCloseIcon);
@@ -59,27 +64,37 @@ export const Modal = forwardRef(function ({ header, subHeader, children, confirm
     useEffect(() => {
         setIsOpen(true);
     }, []);
+    useDialogFocus({
+        containerRef: dialogRef,
+        initialFocusRef,
+        isOpen,
+        onEscape: () => handlerClose(handleCloseIcon),
+    });
     return (<>
       <div className="relative z-50">
-        <div className={clsx('bg-gray-1 bg-opacity-75 pointer-events-none fixed inset-0 transition-opacity', !isOpen ? enteringClasses : leavingClasses)}/>
+        <div className={clsx('bg-gray-1 bg-opacity-75 pointer-events-none fixed inset-0 transition-opacity dark:bg-black/75', !isOpen ? enteringClasses : leavingClasses)}/>
 
         <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
           <div onClick={(e) => handlerOverlayClick(e)} className="flex min-h-full items-end justify-center px-8 py-4 sm:items-center">
-            <div className={clsx('relative transform rounded-lg bg-white text-center shadow-xl transition-all sm:my-8 sm:w-full sm:text-left', {
+            <div ref={dialogRef} role="dialog" aria-modal="true" aria-labelledby={ariaLabelledBy ?? titleId} aria-describedby={ariaDescribedBy ?? (subHeader ? descriptionId : undefined)} tabIndex={-1} className={clsx('relative transform rounded-lg bg-white text-center text-black shadow-xl transition-all outline-none sm:my-8 sm:w-full sm:text-left dark:bg-black dark:text-white', {
             'sm:max-w-lg': size === 'base',
             'sm:max-w-3xl': size === 'lg',
             'sm:max-w-5xl': size === 'xl',
         }, !isOpen
             ? `${enteringClasses} pointer-events-none translate-y-4 sm:translate-y-0 sm:scale-95`
             : `translate-y-0 sm:scale-100`)}>
-              <div className="bg-gray-6 flex justify-between rounded-t-lg px-6 py-4">
+              <div className="bg-gray-6 dark:bg-black-1 flex justify-between rounded-t-lg px-6 py-4">
                 <div>
-                  <Paragraph size="subtitle-1">{header}</Paragraph>
-                  {!!subHeader && (<Paragraph className="mt-1" size="body-2">
+                  <Paragraph id={titleId} size="subtitle-1">
+                    {header}
+                  </Paragraph>
+                  {!!subHeader && (<Paragraph id={descriptionId} className="text-gray-1 dark:text-gray-3 mt-1" size="body-2">
                       {subHeader}
                     </Paragraph>)}
                 </div>
-                <IoCloseSharp size={20} className="pa-2 cursor-pointer" onClick={() => handlerClose(handleCloseIcon)}/>
+                <button type="button" aria-label={closeButtonAriaLabel} className="hover:text-gray-1 focus-visible:ring-lavender dark:hover:text-gray-3 rounded-sm p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none" onClick={() => handlerClose(handleCloseIcon)}>
+                  <IoCloseSharp aria-hidden size={20}/>
+                </button>
               </div>
               <div className={clsx('px-6', cancelButton || confirmButton ? 'pt-8 pb-4' : 'py-8')}>
                 {children}

package/dist/components/02-molecules/Modal/Modal.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/components/02-molecules/Modal/useDialogFocus.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+type UseDialogFocusProps = {
+    containerRef: RefObject<HTMLElement | null>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    isOpen: boolean;
+    onEscape: () => void;
+};
+export declare function useDialogFocus({ containerRef, initialFocusRef, isOpen, onEscape, }: UseDialogFocusProps): void;
+export {};
+//# sourceMappingURL=useDialogFocus.d.ts.map

package/dist/components/02-molecules/Modal/useDialogFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogFocus.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/useDialogFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAW1D,KAAK,mBAAmB,GAAG;IACzB,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAaF,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,eAAe,EACf,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,GAAG,IAAI,CAsE5B"}

package/dist/components/02-molecules/Modal/useDialogFocus.js

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react';
+const focusableSelector = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+function getFocusableElements(container) {
+    return Array.from(container.querySelectorAll(focusableSelector)).filter((element) => element.tabIndex >= 0 &&
+        element.getAttribute('aria-hidden') !== 'true' &&
+        !element.hasAttribute('hidden'));
+}
+export function useDialogFocus({ containerRef, initialFocusRef, isOpen, onEscape, }) {
+    const previousFocusRef = useRef(null);
+    const onEscapeRef = useRef(onEscape);
+    useEffect(() => {
+        onEscapeRef.current = onEscape;
+    }, [onEscape]);
+    useEffect(() => {
+        if (!isOpen || !containerRef.current) {
+            return;
+        }
+        const container = containerRef.current;
+        previousFocusRef.current =
+            document.activeElement instanceof HTMLElement
+                ? document.activeElement
+                : null;
+        const animationFrame = window.requestAnimationFrame(() => {
+            const target = initialFocusRef?.current ??
+                getFocusableElements(container)[0] ??
+                container;
+            target.focus();
+        });
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                onEscapeRef.current();
+                return;
+            }
+            if (event.key !== 'Tab') {
+                return;
+            }
+            const focusableElements = getFocusableElements(container);
+            if (focusableElements.length === 0) {
+                event.preventDefault();
+                container.focus();
+                return;
+            }
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            if (event.shiftKey &&
+                (document.activeElement === firstElement ||
+                    document.activeElement === container)) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+            else if (!event.shiftKey && document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.cancelAnimationFrame(animationFrame);
+            document.removeEventListener('keydown', handleKeyDown);
+            previousFocusRef.current?.focus();
+            previousFocusRef.current = null;
+        };
+    }, [containerRef, initialFocusRef, isOpen]);
+}
+//# sourceMappingURL=useDialogFocus.js.map

package/dist/components/02-molecules/Modal/useDialogFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogFocus.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/useDialogFocus.ts"],"names":[],"mappings":"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"}

package/dist/components/02-molecules/Pagination/Pagination.d.ts

@@ -6,6 +6,10 @@ type PaginationProps = {
     totalItems?: number;
     disableNavigation?: boolean;
     disabledNext?: boolean;
+    navigationLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    itemsPerPageLabel?: string;
 } & HTMLAttributes<HTMLDivElement>;
 /**
  * Pagination component for rendering pagination controls.
@@ -33,6 +37,6 @@ type PaginationProps = {
  *
  * @returns {ReactNode} The rendered Pagination component.
  */
-export declare function Pagination({ currentPage, pageChange, itemsPerPage, totalItems, disableNavigation, disabledNext, ...restProps }: PaginationProps): ReactNode;
+export declare function Pagination({ currentPage, pageChange, itemsPerPage, totalItems, disableNavigation, disabledNext, navigationLabel, previousPageLabel, nextPageLabel, itemsPerPageLabel, ...restProps }: PaginationProps): ReactNode;
 export {};
 //# sourceMappingURL=Pagination.d.ts.map

package/dist/components/02-molecules/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Pagination/Pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAItE,KAAK,eAAe,GAAG;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,UAAc,EACd,iBAAyB,EACzB,YAAoB,EACpB,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CA+I7B"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Pagination/Pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAI7E,KAAK,eAAe,GAAG;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,UAAc,EACd,iBAAyB,EACzB,YAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,iBAAsC,EACtC,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CAgK7B"}