[{"_1":2,"_459":-5,"_460":-5},"loaderData",{"_3":4,"_45":-7,"_46":47,"_211":212},"root",{"_5":6,"_7":8,"_32":33},"lang","no","menu",[9,14,17,20,23,26,29],{"_10":11,"_12":13},"name","navigation.intro","href","/no/intro",{"_10":15,"_12":16},"navigation.fundamentals","/no/fundamentals",{"_10":18,"_12":19},"navigation.components","/no/components",{"_10":21,"_12":22},"navigation.patterns","/no/patterns",{"_10":24,"_12":25},"navigation.best-practices","/no/best-practices",{"_10":27,"_12":28},"navigation.blog","/no/blog",{"_10":30,"_12":31},"navigation.theme-builder","https://theme.designsystemet.no/no","centerLinks",[34,39,42],{"_35":36,"_37":38},"text","footer.about","url","no/intro/about-the-design-system",{"_35":40,"_37":41},"footer.privacy","no/intro/privacy-policy",{"_35":43,"_37":44},"footer.accessibility","https://uustatus.no/nb/erklaringer/publisert/faeb324d-9b3f-40b0-b715-92cac356a916","layouts/root/layout","layouts/components/layout",{"_5":6,"_48":49,"_208":209},"cats",{"_50":51,"_58":59,"_168":169,"_182":183}," ",[52],{"_53":54,"_37":55,"_56":57},"title","Endringslogg","/no/components/changelog","order",1,"components",[60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,120,123,126,129,132,135,138,141,144,147,150,153,156,159,162,165],{"_53":61,"_37":62},"Alert","/no/components/docs/alert",{"_53":64,"_37":65},"Avatar","/no/components/docs/avatar",{"_53":67,"_37":68},"AvatarStack","/no/components/docs/avatar-stack",{"_53":70,"_37":71},"Badge","/no/components/docs/badge",{"_53":73,"_37":74},"Breadcrumbs","/no/components/docs/breadcrumbs",{"_53":76,"_37":77},"Button","/no/components/docs/button",{"_53":79,"_37":80},"Card","/no/components/docs/card",{"_53":82,"_37":83},"Checkbox","/no/components/docs/checkbox",{"_53":85,"_37":86},"Chip","/no/components/docs/chip",{"_53":88,"_37":89},"Details","/no/components/docs/details",{"_53":91,"_37":92},"Dialog","/no/components/docs/dialog",{"_53":94,"_37":95},"Divider","/no/components/docs/divider",{"_53":97,"_37":98},"Dropdown","/no/components/docs/dropdown",{"_53":100,"_37":101},"ErrorSummary","/no/components/docs/error-summary",{"_53":103,"_37":104},"Field","/no/components/docs/field",{"_53":106,"_37":107},"Fieldset","/no/components/docs/fieldset",{"_53":109,"_37":110},"Input","/no/components/docs/input",{"_53":112,"_37":113},"Link","/no/components/docs/link",{"_53":115,"_37":116},"List","/no/components/docs/list",{"_53":118,"_37":119},"Pagination","/no/components/docs/pagination",{"_53":121,"_37":122},"Popover","/no/components/docs/popover",{"_53":124,"_37":125},"Radio","/no/components/docs/radio",{"_53":127,"_37":128},"Search","/no/components/docs/search",{"_53":130,"_37":131},"Select","/no/components/docs/select",{"_53":133,"_37":134},"Skeleton","/no/components/docs/skeleton",{"_53":136,"_37":137},"SkipLink","/no/components/docs/skip-link",{"_53":139,"_37":140},"Spinner","/no/components/docs/spinner",{"_53":142,"_37":143},"Suggestion","/no/components/docs/suggestion",{"_53":145,"_37":146},"Switch","/no/components/docs/switch",{"_53":148,"_37":149},"Table","/no/components/docs/table",{"_53":151,"_37":152},"Tabs","/no/components/docs/tabs",{"_53":154,"_37":155},"Tag","/no/components/docs/tag",{"_53":157,"_37":158},"Textarea","/no/components/docs/textarea",{"_53":160,"_37":161},"Textfield","/no/components/docs/textfield",{"_53":163,"_37":164},"ToggleGroup","/no/components/docs/toggle-group",{"_53":166,"_37":167},"Tooltip","/no/components/docs/tooltip","typography",[170,173,176,179],{"_53":171,"_37":172},"Heading","/no/components/docs/heading",{"_53":174,"_37":175},"Label","/no/components/docs/label",{"_53":177,"_37":178},"Paragraph","/no/components/docs/paragraph",{"_53":180,"_37":181},"ValidationMessage","/no/components/docs/validation-message","utilities",[184,188,192,196,200,204],{"_53":185,"_37":186,"_56":187},"RovingFocus","/no/components/utilities/roving-focus",10,{"_53":189,"_37":190,"_56":191},"useCheckboxGroup","/no/components/utilities/use-checkbox-group",20,{"_53":193,"_37":194,"_56":195},"useRadioGroup","/no/components/utilities/use-radio-group",30,{"_53":197,"_37":198,"_56":199},"usePagination","/no/components/utilities/use-pagination",40,{"_53":201,"_37":202,"_56":203},"useSynchronizedAnimation","/no/components/utilities/use-synchronized-animation",50,{"_53":205,"_37":206,"_56":207},"clickdelegatefor","/no/components/utilities/clickdelegatefor",60,"sidebarSuffix",{"_58":210,"_168":210},"/accessibility","components-page",{"_213":214,"_215":216,"_238":239,"_240":241,"_242":243,"_248":249,"_276":277,"_278":279,"_298":299,"_300":301,"_302":303,"_449":450,"_457":458},"component","pagination","stories",[217,223,226,229,232,235],{"_10":218,"_219":220,"_221":222},"Preview","code","const Preview = () => {\n return (\n \n \n \n \n Forrige\n \n \n\n \n \n 1\n \n \n\n \n \n 2\n \n \n\n \n\n \n \n 9\n \n \n\n \n \n 10\n \n \n\n \n \n Neste\n \n \n \n \n );\n};","file","pagination.stories.tsx",{"_10":224,"_219":225,"_221":222},"PreviewEn","const PreviewEn = () => {\n return (\n \n \n \n \n Previous\n \n \n\n \n \n 1\n \n \n\n \n \n 2\n \n \n\n \n\n \n \n 9\n \n \n\n \n \n 10\n \n \n\n \n \n Next\n \n \n \n \n );\n};",{"_10":227,"_219":228,"_221":222},"WithAnchor","const WithAnchor = () => {\n const [currentPage, setCurrentPage] = useState(2);\n const { pages, nextButtonProps, prevButtonProps } = usePagination({\n currentPage,\n setCurrentPage,\n totalPages: 10,\n showPages: 7,\n });\n\n return (\n \n \n \n \n Forrige\n \n \n {pages.map(({ page, itemKey, buttonProps }) => (\n \n {typeof page === 'number' && (\n \n {page}\n \n )}\n \n ))}\n \n \n Neste\n \n \n \n \n );\n};",{"_10":230,"_219":231,"_221":222},"WithAnchorEn","const WithAnchorEn = () => {\n const [currentPage, setCurrentPage] = useState(2);\n const { pages, nextButtonProps, prevButtonProps } = usePagination({\n currentPage,\n setCurrentPage,\n totalPages: 10,\n showPages: 7,\n });\n\n return (\n \n \n \n \n Previous\n \n \n {pages.map(({ page, itemKey, buttonProps }) => (\n \n {typeof page === 'number' && (\n \n {page}\n \n )}\n \n ))}\n \n \n Next\n \n \n \n \n );\n};",{"_10":233,"_219":234,"_221":222},"Mobile","const Mobile = () => {\n return (\n \n \n \n \n \n\n \n \n 2\n \n \n\n \n 3\n \n\n \n \n 4\n \n \n\n \n \n \n \n \n );\n};",{"_10":236,"_219":237,"_221":222},"MobileEn","const MobileEn = () => {\n return (\n \n \n \n \n \n\n \n \n 2\n \n \n\n \n 3\n \n\n \n \n 4\n \n \n\n \n \n \n \n \n );\n};","dodont",[],"mdxCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},d=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!g.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return t};var b=(t,e,n)=>(n=t!=null?p(h(t)):{},d(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>d(s({},\"__esModule\",{value:!0}),t);var l=x((A,c)=>{c.exports=_jsx_runtime});var w={};j(w,{default:()=>m,frontmatter:()=>k});var o=b(l()),k=void 0;function a(t){let e={a:\"a\",p:\"p\",...t.components},{Alert:n}=e;return n||y(\"Alert\",!0),(0,o.jsx)(n,{\"data-color\":\"info\",children:(0,o.jsxs)(e.p,{children:[\"Vi jobber med \\xE5 forbedre dokumentasjonen for tilgjengelighet p\\xE5 denne komponenten. Har du sp\\xF8rsm\\xE5l eller ser noe som b\\xF8r prioriteres, ta gjerne kontakt med oss p\\xE5 \",(0,o.jsx)(e.a,{href:\"https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml\",children:\"Github\"}),\" eller \",(0,o.jsx)(e.a,{href:\"https://designsystemet.no/slack\",children:\"Slack\"}),\".\"]})})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(a,{...t})}):a(t)}function y(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(w);})();\n;return Component;","metadata",{"_53":118,"_244":245,"_246":247},"subtitle","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),k=(e,n)=>{for(var t in n)s(e,t,{get:n[t],enumerable:!0})},i=(e,n,t,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of x(n))!_.call(e,r)&&r!==t&&s(e,r,{get:()=>n[r],enumerable:!(c=p(n,r))||c.enumerable});return e};var h=(e,n,t)=>(t=e!=null?u(f(e)):{},i(n||!e||!e.__esModule?s(t,\"default\",{value:e,enumerable:!0}):t,e)),M=e=>i(s({},\"__esModule\",{value:!0}),e);var d=j((D,l)=>{l.exports=_jsx_runtime});var g={};k(g,{default:()=>m,frontmatter:()=>b});var o=h(d()),b=void 0;function a(e){let n={code:\"code\",p:\"p\",...e.components};return(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:\"Pagination\"}),\" er en liste med knapper som brukes for \\xE5 navigere mellom ulike sider med innhold, for eksempel s\\xF8keresultater eller tabeller.\"]})}function m(e={}){let{wrapper:n}=e.components||{};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}return M(g);})();\n;return Component;","image","Pagination.svg","linkMetadata",[250,252,256,260,262,264,267,269,271,274],{"_53":251},"Pagination - Designsystemet",{"_10":253,"_254":255},"description","content","`Pagination` er en liste med knapper som brukes for å navigere mellom ulike sider med innhold, for eksempel søkeresultater eller tabeller.",{"_257":258,"_254":259},"property","og:image","/img/designsystemet-meta.png",{"_257":261,"_254":118},"og:title",{"_257":263,"_254":255},"og:description",{"_257":265,"_254":266},"og:url","https://designsystemet.no",{"_257":268,"_254":118},"twitter:title",{"_257":270,"_254":255},"twitter:description",{"_257":272,"_254":273},"twitter:card","summary_large_image",{"_257":275,"_254":259},"twitter:image","cssSource",".ds-pagination{--dsc-pagination-gap:var(--ds-size-2);--dsc-pagination-icon-size:var(--ds-size-6);--dsc-pagination-icon-url:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E\");--dsc-pagination-ellipsis:\"\\2026\";--_ds-aria-label:var(--dsc-pagination-label)}.ds-pagination:is([lang=nb],[lang=nn],[lang=no]),:is([lang=nb],[lang=nn],[lang=no]) .ds-pagination{--dsc-pagination-label:\"Bla i sider\"}.ds-pagination :is(ol,ul){align-items:center;flex-wrap:wrap;gap:var(--dsc-pagination-gap);list-style:none;margin:0;padding:0}:is(.ds-pagination :is(ol,ul)):not([hidden]){display:flex}:is(.ds-pagination :is(ol,ul))>li:first-child>[aria-hidden=true],:is(.ds-pagination :is(ol,ul))>li:last-child>[aria-hidden=true]{visibility:hidden}:is(.ds-pagination :is(ol,ul))>li>[aria-current=true]{--dsc-button-background--active:var(--ds-color-base-active);--dsc-button-background--hover:var(--ds-color-base-hover);--dsc-button-background:var(--ds-color-base-default);--dsc-button-color:var(--ds-color-base-contrast-default)}:is(.ds-pagination :is(ol,ul))>li:has([aria-label=hidden]){display:none}:is(.ds-pagination :is(ol,ul))>li>[aria-label]:empty:before{content:attr(aria-label)}:is(.ds-pagination :is(ol,ul))>li>[aria-label=\"0\"]:empty{color:inherit;pointer-events:none;text-decoration:none}:is(.ds-pagination :is(ol,ul))>li>[aria-label=\"0\"]:empty:before{content:var(--dsc-pagination-ellipsis) /\"\"}:is(.ds-pagination :is(ol,ul))>li:first-child>:before,:is(.ds-pagination :is(ol,ul))>li:last-child>:before{background:currentcolor;content:\"\";height:var(--dsc-pagination-icon-size);-webkit-mask:center/contain no-repeat var(--dsc-pagination-icon-url);mask:center/contain no-repeat var(--dsc-pagination-icon-url);order:1;width:var(--dsc-pagination-icon-size)}@media (forced-colors:active){:is(.ds-pagination :is(ol,ul))>li:first-child>:before,:is(.ds-pagination :is(ol,ul))>li:last-child>:before{background:LinkText}}:is(.ds-pagination :is(ol,ul))>li:first-child>:before{order:0;rotate:180deg}:dir(rtl) :is(.ds-pagination :is(ol,ul))>li:first-child>:before{rotate:0deg}:dir(rtl) :is(.ds-pagination :is(ol,ul))>li:last-child>:before{rotate:180deg}:is(.ds-pagination :is(ol,ul))>li:empty:before{content:var(--dsc-pagination-ellipsis);display:block;min-width:var(--ds-size-12);text-align:center}","cssVars",{"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"--dsc-pagination-gap","var(--ds-size-2)","--dsc-pagination-icon-size","var(--ds-size-6)","--dsc-pagination-icon-url","url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E\")","--dsc-pagination-ellipsis","\"\\2026\"","--dsc-pagination-label","\"Bla i sider\"","--dsc-button-background--active","var(--ds-color-base-active)","--dsc-button-background--hover","var(--ds-color-base-hover)","--dsc-button-background","var(--ds-color-base-default)","--dsc-button-color","var(--ds-color-base-contrast-default)","cssAttrs",{},"toc",[],"componentDocs",[304,369,415,432],{"_305":306,"_309":310,"_253":311,"_312":118,"_313":314,"_315":316},"tags",{"_307":308},"example","\n \n \n Forrige\n \n \n 1\n \n \n 2\n \n \n","filePath","/usr/src/app/packages/react/src/components/pagination/pagination.tsx","Pagination component, used to navigate through a list of items.","displayName","methods",[],"props",{"_317":318,"_340":341,"_348":349,"_356":357},"aria-label",{"_319":320,"_253":323,"_10":317,"_324":-7,"_325":326,"_331":332,"_333":334},"defaultValue",{"_321":322},"value","'Bla i sider'","Sets the screen reader label for the Pagination area","parent","declarations",[327],{"_328":329,"_10":330},"fileName","app/packages/react/src/components/pagination/pagination.tsx","TypeLiteral","required",false,"type",{"_10":335,"_336":337,"_321":338},"enum","raw","string",[339],{"_321":337},"data-current",{"_319":-5,"_253":342,"_10":340,"_324":-7,"_325":343,"_331":332,"_333":345},"Current page number",[344],{"_328":329,"_10":330},{"_10":335,"_336":337,"_321":346},[347],{"_321":337},"data-total",{"_319":-5,"_253":350,"_10":348,"_324":-7,"_325":351,"_331":332,"_333":353},"Total number of pages",[352],{"_328":329,"_10":330},{"_10":335,"_336":337,"_321":354},[355],{"_321":337},"asChild",{"_319":358,"_253":360,"_10":356,"_324":-7,"_325":361,"_331":332,"_333":363},{"_321":359},"false","Change the default rendered element for the one passed as a child, merging their props and behavior.\n@deprecated This is not supported anymore, as the element needs to be `ds-pagination`",[362],{"_328":329,"_10":330},{"_10":335,"_336":364,"_321":365},"boolean",[366,367],{"_321":359},{"_321":368},"true",{"_305":370,"_309":372,"_253":373,"_312":374,"_313":375,"_315":376},{"_307":371},"\n Forrige\n","/usr/src/app/packages/react/src/components/pagination/pagination-button.tsx","PaginationButton component, use within a Pagination.Item.","PaginationButton",[],{"_377":378,"_356":406},"aria-current",{"_319":379,"_253":380,"_10":377,"_324":-7,"_325":381,"_331":332,"_333":387},{"_321":359},"Toggle button as active\nIndicates the element that represents the current item within a container or set of related elements.",[382,384],{"_328":383,"_10":330},"app/packages/react/src/components/pagination/pagination-button.tsx",{"_328":385,"_10":386},"app/node_modules/.pnpm/@types+react@19.2.14/node_modules/@types/react/index.d.ts","AriaAttributes",{"_10":335,"_336":388,"_321":389},"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"",[390,391,392,394,396,398,400,402,404],{"_321":359},{"_321":368},{"_321":393},"\"false\"",{"_321":395},"\"true\"",{"_321":397},"\"page\"",{"_321":399},"\"step\"",{"_321":401},"\"location\"",{"_321":403},"\"date\"",{"_321":405},"\"time\"",{"_319":407,"_253":408,"_10":356,"_324":-7,"_325":409,"_331":332,"_333":411},{"_321":359},"Change the default rendered element for the one passed as a child, merging their props and behavior.",[410],{"_328":383,"_10":330},{"_10":335,"_336":364,"_321":412},[413,414],{"_321":359},{"_321":368},{"_305":416,"_309":418,"_253":419,"_312":420,"_313":421,"_315":422},{"_307":417},"\n \n Forrige\n \n","/usr/src/app/packages/react/src/components/pagination/pagination-item.tsx","PaginationItem component, use within a Pagination.List.","PaginationItem",[],{"_356":423},{"_319":424,"_253":408,"_10":356,"_324":-7,"_325":425,"_331":332,"_333":428},{"_321":359},[426],{"_328":427,"_10":330},"app/packages/react/src/components/pagination/pagination-item.tsx",{"_10":335,"_336":364,"_321":429},[430,431],{"_321":359},{"_321":368},{"_305":433,"_309":435,"_253":436,"_312":437,"_313":438,"_315":439},{"_307":434},"\n \n \n Forrige\n \n \n","/usr/src/app/packages/react/src/components/pagination/pagination-list.tsx","PaginationList component, use within a Pagination.","PaginationList",[],{"_356":440},{"_319":441,"_253":408,"_10":356,"_324":-7,"_325":442,"_331":332,"_333":445},{"_321":359},[443],{"_328":444,"_10":330},"app/packages/react/src/components/pagination/pagination-list.tsx",{"_10":335,"_336":364,"_321":446},[447,448],{"_321":359},{"_321":368},"navigation",{"_451":452,"_453":454,"_455":456},"overviewLink","/no/components/docs/pagination/overview","codeLink","/no/components/docs/pagination/code","accessibilityLink","/no/components/docs/pagination/accessibility","githubLink","https://github.com/digdir/designsystemet/tree/main/apps/www/app/content/components/pagination/no/accessibility.mdx","actionData","errors"]