@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-75e5086d

package/esm/navigation/NavList/__stories__/NavVerticalLayout.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Link from '@digigov/ui/navigation/Link';
-import NavList, { isNavListItemLinkInterface, Nav, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle } from '@digigov/ui/navigation/NavList';
+import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle } from '@digigov/ui/navigation/NavList';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 var links = [{
   name: 'home',
@@ -42,49 +42,35 @@ export var NavVerticalLayout = function NavVerticalLayout() {
   var border = false;
 
   var _useNavList = useNavList(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return _extends({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return _extends({}, registerLink(name));
-  };
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/React.createElement(Nav, {
     open: true,
-    layout: layout,
     border: border
-  }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
-    }, /*#__PURE__*/React.createElement(NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
-      layout: layout
-    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
       layout: layout,
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
       role: "menu"
     }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
-        role: "presentation",
-        key: menuIndex
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
       }, /*#__PURE__*/React.createElement(Link, {
         role: "menuitem",
         id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
-    }))))));
+    })))));
   })));
 };
 export default NavVerticalLayout;

package/esm/navigation/NavList/hooks/useNavList.js

@@ -19,7 +19,7 @@ export var useNavList = function useNavList() {
       opened = _useTogglableNav.opened,
       rest = _objectWithoutProperties(_useTogglableNav, _excluded);
 
-  var container = useCallback(function (key) {
+  var registerNavItemMenu = useCallback(function (key) {
     return {
       ref: function ref(el) {
         if (el && !registeredContainers.current[el.id]) {
@@ -34,6 +34,6 @@ export var useNavList = function useNavList() {
     registerButton: registerButton,
     registerLink: registerLink,
     opened: opened,
-    container: container
+    registerNavItemMenu: registerNavItemMenu
   }, rest);
 };

package/esm/navigation/NavList/hooks/useTogglableNav.js

@@ -18,24 +18,6 @@ export function useTogglableNav(_ref) {
 
   var registered = useRef({});
   var openedKeys = useRef([]);
-  var registerButtonRef = useCallback(function (el) {
-    if (!el) return;
-    var key = el.getAttribute('aria-controls');
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el: el,
-      type: 'button'
-    };
-  }, []);
-  var registerLinkRef = useCallback(function (el) {
-    if (!el) return;
-    var key = el.getAttribute('aria-controls');
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el: el,
-      type: 'link'
-    };
-  }, []);
   var toggle = useCallback(function (e) {
     var key = e.currentTarget.getAttribute('aria-controls');
     var selected = e.currentTarget.getAttribute('aria-selected') === 'true';
@@ -261,6 +243,24 @@ export function useTogglableNav(_ref) {
         break;
     }
   }, []);
+  var registerButtonRef = useCallback(function (el) {
+    if (!el) return;
+    var key = el.getAttribute('aria-controls');
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el: el,
+      type: 'button'
+    };
+  }, []);
+  var registerLinkRef = useCallback(function (el) {
+    if (!el) return;
+    var key = el.getAttribute('aria-controls');
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el: el,
+      type: 'link'
+    };
+  }, []);
   var registerButton = useCallback(function (key) {
     var _extends2;
 
@@ -279,8 +279,23 @@ export function useTogglableNav(_ref) {
       onKeyDown: onKeyDown
     });
   }, [opened]);
+  var registerNavItem = useCallback(function (item) {
+    if (item.subMenu || item.menu) {
+      return _extends({}, registerButton(item.name), {
+        role: 'button'
+      });
+    } else if (item.href) {
+      return _extends({}, registerLink(item.name), {
+        href: item.href
+      });
+    } else {
+      console.error(item);
+      throw new Error('Invalid nav item. Must be either button or link');
+    }
+  }, [opened]);
   return useMemo(function () {
     return {
+      registerNavItem: registerNavItem,
       registerButton: registerButton,
       registerLink: registerLink,
       registered: registered,

package/esm/navigation/NavList/index.js

@@ -1,20 +1,19 @@
-export * from '@digigov/ui/navigation/NavList/NavListItem';
-export * from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto';
-export * from '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto';
-export * from '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto';
-export * from '@digigov/ui/navigation/NavList/Nav';
-export * from '@digigov/ui/navigation/NavList/NavList';
-export * from '@digigov/ui/navigation/NavList/NavListItemLink';
-export * from '@digigov/ui/navigation/NavList/NavListItemButton';
-export * from '@digigov/ui/navigation/NavList/NavMenu';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainer';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerTitle';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerContent';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerContentList';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem';
-export * from '@digigov/ui/navigation/NavList/NavVertical';
-export * from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import NavList from '@digigov/react-core/NavList';
+export * from '@digigov/ui/navigation/NavList/NavListAuto';
+export * from '@digigov/ui/navigation/NavList/NavMenuContentList';
 export * from '@digigov/ui/navigation/NavList/types';
 export * from '@digigov/ui/navigation/NavList/hooks/useNavList';
-import NavList from '@digigov/ui/navigation/NavList/NavList';
+export * from '@digigov/react-core/Nav';
+export * from '@digigov/react-core/NavList';
+export * from '@digigov/react-core/NavMenuContainer';
+export * from '@digigov/react-core/NavMenuContent';
+export * from '@digigov/react-core/NavMenuContentListBase';
+export * from '@digigov/react-core/NavMenuContentListItem';
+export * from '@digigov/react-core/NavMenuTitle';
+export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/react-core/NavListItemActionContainer';
+export * from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/react-core/NavListItemButton';
+export * from '@digigov/react-core/NavListItemAction';
 export default NavList;

package/esm/navigation/NavList/index.mdx

@@ -11,19 +11,11 @@ import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
 
 ### Vertical NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/NavList" story="Default.tsx" />
 
 ### Horizontal NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="NavVerticalLayout.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/NavList" story="NavVerticalLayout.tsx" />
 
 ## Accessibility
 

package/esm/navigation/NavList/types.js

@@ -1,6 +1 @@
-export var isNavListItemLinkInterface = function isNavListItemLinkInterface(item) {
-  return item && 'href' in item;
-};
-export var isNavListItemSubMenuInterface = function isNavListItemSubMenuInterface(item) {
-  return item && 'subMenu' in item;
-};
+export {};

package/esm/navigation/Pagination/__stories__/Default.js

@@ -6,9 +6,9 @@ import { Link } from '@digigov/ui/navigation/Link';
 import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/navigation/Pagination';
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
+  start: 21,
+  end: 30,
+  total: 90
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
@@ -34,67 +34,9 @@ var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
-}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
-}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "left"
-}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, {
-  currentPage: true
-}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page2"
-}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page3"
-}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
-  variant: "dots"
-}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page7"
-}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page8"
-}, "8")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page9"
-}, "9")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "right"
-})))));
-
-var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, {
-  size: "lg"
-});
-
-var _ref5 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
-}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "left"
-}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page1"
-}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page3"
-}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
-  variant: "dots"
-}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page7"
-}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page8"
-}, "8")), /*#__PURE__*/React.createElement(PaginationListItem, {
-  currentPage: true
-}, "9"), /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
-}, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "right"
-})))));
-
-var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
-  size: "lg"
-});
-
-var _ref7 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 1,
-  end: 10,
-  total: 15
+  start: 81,
+  end: 90,
+  total: 197
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
@@ -120,6 +62,6 @@ export var Default = function Default() {
     t: function t(str) {
       return str;
     }
-  }, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7);
+  }, _ref, _ref2, _ref3);
 };
 export default Default;

package/esm/navigation/Pagination/__stories__/PaginationSmall.js

@@ -10,7 +10,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   end: 10,
   total: 15
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }))), /*#__PURE__*/React.createElement(PaginationListItem, {

package/esm/navigation/Pagination/__stories__/PaginationWithSmallFont.js

@@ -7,7 +7,7 @@ import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from
 import { ArrowIcon } from '@digigov/ui/utils/SvgIcon';
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, {
-  fontSize: "sm"
+  size: "sm"
 }, /*#__PURE__*/React.createElement(PaginationLabel, {
   start: 1,
   end: 10,

package/esm/navigation/Pagination/__stories__/WithInactiveValues.js

@@ -10,7 +10,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   end: 20,
   total: 10000
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, {
@@ -54,7 +54,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
 }, "8")), /*#__PURE__*/React.createElement(PaginationListItem, {
   currentPage: true
 }, "9"), /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "right"
 })))));

package/esm/navigation/Pagination/index.mdx

@@ -9,27 +9,19 @@ import Pagination from '@digigov/ui/app/Pagination';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination" story="Default.tsx"/>
 
 ## With inactive values
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="WithInactiveValues.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination" story="WithInactiveValues.tsx" />
+
+## With small fonts
+
+<Story packageName="@digigov/ui" component="navigation/Pagination"story="PaginationWithSmallFont.tsx" />
 
 ## With results per page
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="WithResultsPerPage.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination"story="WithResultsPerPage.tsx" />
 
 ## API
 

package/esm/navigation/SkipLink/SkipLink.stories.js

@@ -0,0 +1,8 @@
+import SkipLink from '@digigov/ui/navigation/SkipLink';
+export default {
+  title: 'Digigov UI/navigation/SkipLink',
+  description: 'Use the skip link component to help keyboard-only users skip to the main content on a page.',
+  component: SkipLink,
+  displayName: 'SkipLink'
+};
+export * from '@digigov/ui/navigation/SkipLink/__stories__/Default';

package/esm/navigation/SkipLink/__stories__/Default.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SkipLink } from '@digigov/ui/navigation/SkipLink';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+var _ref = /*#__PURE__*/React.createElement(Paragraph, null, "\u0393\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03BC\u03C6\u03B1\u03BD\u03B9\u03C3\u03C4\u03B5\u03AF \u03BF \u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03C2, \u03C0\u03B5\u03C1\u03B9\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B5 \u03C4\u03BF \u03BA\u03BF\u03C5\u03BC\u03C0\u03AF tab \u03AE \u03BA\u03AC\u03BD\u03BF\u03BD\u03C4\u03B1\u03C2 \u03BA\u03BB\u03B9\u03BA \u03C3\u03C4\u03BF \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03BA\u03B1\u03B9 \u03BC\u03B5\u03C4\u03AC \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03BF\u03C5\u03BC\u03C0\u03AF tab.");
+
+var _ref2 = /*#__PURE__*/React.createElement(SkipLink, null, "\u039C\u03B5\u03C4\u03AC\u03B2\u03B1\u03C3\u03B7 \u03C3\u03C4\u03BF \u03B2\u03B1\u03C3\u03B9\u03BA\u03CC \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2);
+};
+export default Default;

package/esm/navigation/Tabs/Tabs.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             }
           ],

package/esm/navigation/Tabs/__stories__/Default.js

@@ -1,20 +1,24 @@
 import React from 'react';
 import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/content/SummaryList';
 import { Link } from '@digigov/ui/navigation/Link';
-import { Tabs, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/navigation/Tabs';
+import { Tabs, TabsHeading, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/navigation/Tabs';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Heading, {
+var _ref = /*#__PURE__*/React.createElement(TabsHeading, {
+  size: "md"
+}, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1");
+
+var _ref2 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
 }, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
 
-var _ref2 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, {
+var _ref3 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, {
   href: "#"
 }, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, null, ' ', "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
 
-var _ref3 = /*#__PURE__*/React.createElement(Heading, {
+var _ref4 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
 }, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
@@ -24,6 +28,6 @@ export function Default() {
       register = _useTabs.register,
       panel = _useTabs.panel;
 
-  return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(TabsPanel, panel('a'), _ref, _ref2), /*#__PURE__*/React.createElement(TabsPanel, panel('b'), _ref3, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"));
+  return /*#__PURE__*/React.createElement(Tabs, null, _ref, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(TabsPanel, panel('a'), _ref2, _ref3), /*#__PURE__*/React.createElement(TabsPanel, panel('b'), _ref4, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"));
 }
 export default Default;

package/esm/navigation/Tabs/index.js

@@ -19,7 +19,7 @@ export var useTabs = function useTabs() {
 
   var _useTogglableTab = useTogglableTab({
     singleOpen: true,
-    toggleProperty: 'selected',
+    toggleProperty: 'open',
     onToggleProperty: 'onClick',
     firstOpen: true,
     ariaNavigation: true,

package/esm/navigation/Tabs/index.mdx

@@ -11,11 +11,13 @@ import Tabs from '@digigov/ui/navigation/Tabs';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Tabs"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Tabs" story="Default.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Tabs
+implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) section.
+
 
 ## API