@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/pagination/Pagination.js

@@ -1,17 +1,14 @@
-import{c as I,p as O,b as r,q as U,t as _,h as b,i as S,j as n,e as V,u as W,n as ne,a as oe,v as y,l as ce,f as k,s as J,d as N,r as w,m as l,z,g as K,w as B}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as de,i as ue}from"../../each.js";import{s as x,a as X,f as ge,d as fe}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var me=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(v,t){O(t,!1);let d=r(t,"id",12,void 0),u=r(t,"style",12,void 0),c=r(t,"className",12,void 0),g=r(t,"fill",12,void 0),f=r(t,"size",12,"1.5rem");var o=me();return _(()=>{x(o,"id",d()),X(o,u()),V(o,0,W(c())),x(o,"fill",g())}),b(v,o),S({get id(){return d()},set id(a){d(a),n()},get style(){return u()},set style(a){u(a),n()},get className(){return c()},set className(a){c(a),n()},get fill(){return g()},set fill(a){g(a),n()},get size(){return f()},set size(a){f(a),n()}})}customElements.define("chevron-left-24",I(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ve=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function D(v,t){O(t,!1);let d=r(t,"id",12,void 0),u=r(t,"style",12,void 0),c=r(t,"className",12,void 0),g=r(t,"fill",12,void 0),f=r(t,"size",12,"1.5rem");var o=ve();return _(()=>{x(o,"id",d()),X(o,u()),V(o,0,W(c())),x(o,"fill",g())}),b(v,o),S({get id(){return d()},set id(a){d(a),n()},get style(){return u()},set style(a){u(a),n()},get className(){return c()},set className(a){c(a),n()},get fill(){return g()},set fill(a){g(a),n()},get size(){return f()},set size(a){f(a),n()}})}customElements.define("chevron-right-24",I(D,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function pe(v,t){const d=Number(v.target.value);t(d)}var he=k("<option> </option>"),be=k('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-1se9xc3"></select></div>'),xe=k('<span class="mc-pagination__label svelte-1se9xc3" aria-current="page"> </span>'),we=k('<nav class="mc-pagination svelte-1se9xc3" aria-label="pagination"><!> <!> <!></nav>');const _e={hash:"svelte-1se9xc3",code:`/**
+import{c as I,p as S,b as o,A as U,t as _,i as h,j as D,k as i,e as V,g as W,v as ne,a as ce,w as y,l as de,f as z,d as N,s as K,m as l,L as k,r as w,x as B,h as O}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as ue,i as fe}from"../../each.js";import{s as x,a as X,d as ve,f as ge}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var me=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(g,a){S(a,!1);let d=o(a,"id",12,void 0),u=o(a,"style",12,void 0),c=o(a,"className",12,void 0),f=o(a,"fill",12,void 0),v=o(a,"size",12,"1.5rem");var m={get id(){return d()},set id(t){d(t),i()},get style(){return u()},set style(t){u(t),i()},get className(){return c()},set className(t){c(t),i()},get fill(){return f()},set fill(t){f(t),i()},get size(){return v()},set size(t){v(t),i()}},n=me();return _(()=>{x(n,"id",d()),X(n,u()),V(n,0,W(c())),x(n,"fill",f())}),h(g,n),D(m)}customElements.define("chevron-left-24",I(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var pe=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function A(g,a){S(a,!1);let d=o(a,"id",12,void 0),u=o(a,"style",12,void 0),c=o(a,"className",12,void 0),f=o(a,"fill",12,void 0),v=o(a,"size",12,"1.5rem");var m={get id(){return d()},set id(t){d(t),i()},get style(){return u()},set style(t){u(t),i()},get className(){return c()},set className(t){c(t),i()},get fill(){return f()},set fill(t){f(t),i()},get size(){return v()},set size(t){v(t),i()}},n=pe();return _(()=>{x(n,"id",d()),X(n,u()),V(n,0,W(c())),x(n,"fill",f())}),h(g,n),D(m)}customElements.define("chevron-right-24",I(A,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function be(g,a){const d=Number(g.target.value);a(d)}var he=z("<option> </option>"),xe=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),we=z('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),_e=z('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const ye={hash:"svelte-19eta05",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-pagination.svelte-1se9xc3 {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-1se9xc3 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
+ */.mc-pagination.svelte-19eta05 {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-19eta05 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
 
-/* stylelint-disable string-no-newline */.mc-select.svelte-1se9xc3 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:1rem;line-height:1.3;height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:1px solid #666666;border-radius:0.25rem;display:block;width:100%;color:#000000;background-color:#ffffff;text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-1se9xc3:hover {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-select.svelte-1se9xc3:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-1se9xc3:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:#d9d9d9;border-color:transparent;cursor:not-allowed;box-shadow:none;color:#737373;}
+/* stylelint-disable string-no-newline */.mc-select.svelte-19eta05 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--radius-s, 0.25rem);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-19eta05:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-19eta05:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-19eta05:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}
 
-/* stylelint-enable string-no-newline */`};function ye(v,t){O(t,!0),oe(v,_e);let d=r(t,"id",7),u=r(t,"value",15,1),c=r(t,"total",7,10),g=r(t,"compact",7,!1),f=r(t,"selectLabel",7,"Page selector"),o=r(t,"pagelabel",7,"of"),a=r(t,"prefixlabel",7,"Page"),m=y(ce(Number(u())));const P=y(()=>l(m)<=1),L=y(()=>l(m)>=c()),Y=y(()=>Array.from({length:c()},(e,s)=>s+1));function q(){l(P)()||B(m,Number(l(m))-1)}function A(){l(L)()||B(m,Number(l(m))+1)}var C=we(),F=N(C);{var Z=e=>{{let s=z(()=>l(P)());Q(e,{iconOnly:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:q,children:(i,p)=>{j(i,{})},$$slots:{default:!0}})}},$=e=>{{let s=z(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:q,$$slots:{icon:(i,p)=>{j(i,{slot:"icon"})}}})}};M(F,e=>{g()?e($,!1):e(Z)})}var R=J(F,2);{var ee=e=>{var s=be(),i=N(s);i.__change=[pe,u],de(i,21,()=>l(Y)(),ue,(p,E)=>{var h=he(),ie=N(h);w(h);var G={};_((re,H)=>{ge(h,re),K(ie,`${a()??""}
+/* stylelint-enable string-no-newline */`};function Ne(g,a){S(a,!0),ce(g,ye);let d=o(a,"id",7),u=o(a,"value",15,1),c=o(a,"total",7,10),f=o(a,"compact",7),v=o(a,"selectLabel",7,"Page selector"),m=o(a,"prefixlabel",7,"Page"),n=o(a,"pagelabel",7,"of"),t=y(de(Number(u())));const P=y(()=>l(t)<=1),L=y(()=>l(t)>=c()),Y=y(()=>Array.from({length:c()},(e,s)=>s+1));function F(){l(P)()||B(t,Number(l(t))-1)}function R(){l(L)()||B(t,Number(l(t))+1)}var Z={get id(){return d()},set id(e){d(e),i()},get value(){return u()},set value(e=1){u(e),i()},get total(){return c()},set total(e=10){c(e),i()},get compact(){return f()},set compact(e){f(e),i()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),i()},get prefixlabel(){return m()},set prefixlabel(e="Page"){m(e),i()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),i()}},C=_e(),q=N(C);{var $=e=>{{let s=k(()=>l(P)());Q(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}},ee=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}};M(q,e=>{f()?e(ee,!1):e($)})}var G=K(q,2);{var te=e=>{var s=xe(),r=N(s);r.__change=[be,u],ue(r,21,()=>l(Y)(),fe,(p,E)=>{var b=he(),oe=N(b);w(b);var H={};_((ie,J)=>{ge(b,ie),O(oe,`${m()??""}
             ${l(E)??""}
-            ${o()??""}
-            ${c()??""}`),G!==(G=H)&&(h.value=(h.__value=H)??"")},[()=>Number(l(E))==Number(l(m)),()=>Number(l(E))]),b(p,h)}),w(i),w(s),_(()=>{x(i,"id",d()),x(i,"aria-label",f()),i.disabled=c()<=1}),fe(i,()=>l(m),p=>B(m,p)),b(e,s)},te=e=>{var s=xe(),i=N(s);w(s),_(()=>K(i,`${a()??""}
+            ${n()??""}
+            ${c()??""}`),H!==(H=J)&&(b.value=(b.__value=J)??"")},[()=>Number(l(E))==Number(l(t)),()=>Number(l(E))]),h(p,b)}),w(r),w(s),_(()=>{x(r,"id",d()),x(r,"aria-label",v()),r.disabled=c()<=1}),ve(r,()=>l(t),p=>B(t,p)),h(e,s)},ae=e=>{var s=we(),r=N(s);w(s),_(()=>O(r,`${m()??""}
       ${u()??""}
-      ${o()??""}
-      ${c()??""}`)),b(e,s)};M(R,e=>{g()?e(te,!1):e(ee)})}var ae=J(R,2);{var le=e=>{{let s=z(()=>l(L)());Q(e,{iconOnly:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:A,children:(i,p)=>{D(i,{})},$$slots:{default:!0}})}},se=e=>{{let s=z(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:A,$$slots:{icon:(i,p)=>{D(i,{slot:"icon"})}}})}};M(ae,e=>{g()?e(se,!1):e(le)})}return w(C),b(v,C),S({get id(){return d()},set id(e){d(e),n()},get value(){return u()},set value(e=1){u(e),n()},get total(){return c()},set total(e=10){c(e),n()},get compact(){return g()},set compact(e=!1){g(e),n()},get selectLabel(){return f()},set selectLabel(e="Page selector"){f(e),n()},get pagelabel(){return o()},set pagelabel(e="of"){o(e),n()},get prefixlabel(){return a()},set prefixlabel(e="Page"){a(e),n()}})}ne(["change"]);customElements.define("m-pagination",I(ye,{id:{},value:{},total:{},compact:{},selectLabel:{},pagelabel:{},prefixlabel:{}},[],[],!0));
+      ${n()??""}
+      ${c()??""}`)),h(e,s)};M(G,e=>{f()?e(ae,!1):e(te)})}var le=K(G,2);{var se=e=>{{let s=k(()=>l(L)());Q(e,{iconposition:"only","aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}},re=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}};M(le,e=>{f()?e(re,!1):e(se)})}return w(C),h(g,C),D(Z)}ne(["change"]);customElements.define("m-pagination",I(Ne,{id:{},value:{},total:{},compact:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!0));
 //# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n\n  interface Props {\n    id: string;\n    value?: number;\n    total?: number;\n    compact?: boolean;\n    selectLabel?: string;\n    pagelabel?: string;\n    prefixlabel?: string;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact = false,\n    selectLabel = 'Page selector',\n    pagelabel = 'of',\n    prefixlabel = 'Page',\n    ...events\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page}\n          <option\n            value={Number(page)}\n            selected={Number(page) == Number(selected)}\n          >\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","pagelabel","prefixlabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"kxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,gHC8CWE,GAAeC,EAAcC,EAAA,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;;;;2DAxDF,sBAwBIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,kBAAU,EAAK,EACfC,sBAAc,eAAe,EAC7BC,oBAAY,IAAI,EAChBC,sBAAc,MAAM,EAIlBP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAqBL,EAAA,IAAA,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,6CAacU,CAAW,EAAA,CAAA,oFACZM,0EAQCN,CAAW,EAAA,CAAA,oFACZM,yDAdPZ,EAAO,EAAAe,EAAAC,EAAA,EAAA,EAAAD,EAAAE,CAAA,2DA4BGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAKjBjB,EAAW,GAAA,EAAA;AAAA,gBACXiB,CAAI,GAAA,EAAA;AAAA,cACJlB,EAAS,GAAA,EAAA;AAAA,cACTH,EAAK,GAAA,EAAA,EAAA,2CALI,IAAA,OAAOQ,EAAAa,CAAI,CAAK,GAAA,SAAOxB,CAAQ,CAAA,EADlC,IAAA,SAAOwB,CAAI,CAAA,6DAPVnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAkBrBnB,EAAW,GAAA,EAAA;AAAA,QACXR,EAAK,GAAA,EAAA;AAAA,QACLO,EAAS,GAAA,EAAA;AAAA,QACTH,EAAK,GAAA,EAAA,EAAA,CAAA,kBA5BJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CAoCChB,CAAU,EAAA,CAAA,gFACXM,2EAQCN,CAAU,EAAA,CAAA,gFACXM,0DAdPd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,uGAvFO,EAAC,+CACX,GAAE,mDACA,GAAK,2DACD,gBAAe,uDACjB,KAAI,2DACF,OAAM,YA2BxB","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page}\n          <option\n            value={Number(page)}\n            selected={Number(page) == Number(selected)}\n          >\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","prefixlabel","pagelabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"uxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,gHCmEWE,GAAeC,EAAYC,EAAE,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;2DA7EF,sBA8CIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,sBAAc,eAAe,EAC7BC,sBAAc,MAAM,EACpBC,oBAAY,IAAI,EAGdP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAKL,EAAA,IAAgB,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,qFAzBoB,EAAC,+CACX,GAAE,8GAEI,gBAAe,2DACf,OAAM,uDACR,KAAI,oDAiCJU,CAAW,EAAA,CAAA,4FACZM,uEAQCN,CAAW,EAAA,CAAA,oFACZM,yDAdPZ,EAAO,EAAAe,EAAAC,GAAA,EAAA,EAAAD,EAAAE,CAAA,2DA4BGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAKjBlB,EAAW,GAAA,EAAA;AAAA,gBACXkB,CAAI,GAAA,EAAA;AAAA,cACJjB,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,2CALI,IAAA,OAAMQ,EAACa,CAAI,CAAA,GAAK,SAAOxB,CAAQ,CAAA,EADlC,IAAA,SAAOwB,CAAI,CAAA,6DAPVnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAkBrBpB,EAAW,GAAA,EAAA;AAAA,QACXP,EAAK,GAAA,EAAA;AAAA,QACLQ,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,kBA5BJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CAoCChB,CAAU,EAAA,CAAA,wFACXM,uEAQCN,CAAU,EAAA,CAAA,gFACXM,0DAdPd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,2BAvDf","x_google_ignoreList":[0,1]}

package/dist/components/pagination/Pagination.spec.js

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Pagination from './Pagination.svelte';
+import { tick } from 'svelte';
+describe('m-pagination component', () => {
+    const baseProps = {
+        id: 'test-pagination',
+        value: 1,
+        total: 5,
+        selectLabel: 'Page selector',
+        prefixlabel: 'Page ',
+        pagelabel: ' of ',
+    };
+    it('renders with correct initial state', () => {
+        const { container, getByLabelText } = render(Pagination, {
+            props: baseProps,
+        });
+        const select = getByLabelText(baseProps.selectLabel);
+        expect(select.value).toBe('1');
+        const prevBtn = container.querySelector('button[aria-label="Previous page"]');
+        const nextBtn = container.querySelector('button[aria-label="Next page"]');
+        expect(prevBtn).toBeDisabled();
+        expect(nextBtn).not.toBeDisabled();
+    });
+    it('updates value when select changes', async () => {
+        const { container, getByLabelText } = render(Pagination, {
+            props: baseProps,
+        });
+        const select = getByLabelText(baseProps.selectLabel);
+        await fireEvent.change(select, { target: { value: '3' } });
+        await tick();
+        expect(select.value).toBe('3');
+    });
+    it('previous and next buttons navigate pages correctly', async () => {
+        const { container, getByLabelText } = render(Pagination, {
+            props: baseProps,
+        });
+        const prevBtn = container.querySelector('button[aria-label="Previous page"]');
+        const nextBtn = container.querySelector('button[aria-label="Next page"]');
+        const select = getByLabelText(baseProps.selectLabel);
+        expect(prevBtn.disabled).toBe(true);
+        await fireEvent.click(nextBtn);
+        await tick();
+        expect(select.value).toBe('2');
+        expect(prevBtn.disabled).toBe(false);
+        await fireEvent.click(prevBtn);
+        await tick();
+        expect(select.value).toBe('1');
+        expect(prevBtn.disabled).toBe(true);
+    });
+    it('disables next button on last page', async () => {
+        const props = { ...baseProps, value: 5, total: 5 };
+        const { container, getByLabelText } = render(Pagination, { props });
+        const nextBtn = container.querySelector('button[aria-label="Next page"]');
+        expect(nextBtn.disabled).toBe(true);
+        const prevBtn = container.querySelector('button[aria-label="Previous page"]');
+        expect(prevBtn.disabled).toBe(false);
+    });
+    it('renders compact version correctly', () => {
+        const props = { ...baseProps, compact: true };
+        const { container, getByText } = render(Pagination, { props });
+        expect(container.querySelector('select')).toBeNull();
+        expect(getByText(/Page 1 of 5/)).toBeTruthy();
+    });
+});

package/dist/components/pagination/Pagination.stories.d.ts

@@ -1,12 +1,9 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages.
- * It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently.
- * Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Compact: any;
-export declare const LongList: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const First: Story;
+export declare const Last: Story;
+export declare const Compact: Story;
 //# sourceMappingURL=Pagination.stories.d.ts.map

package/dist/components/pagination/Pagination.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;GAIG;wBA0CE,IAAI;AAxCT,wBAwCU;AAmBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAiBzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,QAAQ,KAAoB,CAAC"}
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/pagination/Pagination.stories.js

@@ -1,97 +1,43 @@
-import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages.
- * It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently.
- * Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Navigation/Pagination',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        id: {
-            description: 'Unique ID of the pagination component',
-            control: 'text',
-        },
-        value: {
-            description: 'Current page number (1-based)',
-            control: { type: 'number', min: 1 },
-        },
-        total: {
-            description: 'Total number of pages',
-            control: { type: 'number', min: 1 },
-        },
-        compact: {
-            description: 'Display pagination in compact mode (icons and label only)',
-            control: { type: 'boolean' },
-        },
-        selectLabel: {
-            description: 'Aria label for the select element',
-            control: 'text',
-        },
-        prefixlabel: {
-            description: 'Label prefix before the page number',
-            control: 'text',
-        },
-        pagelabel: {
-            description: 'Label suffix after the page number',
-            control: 'text',
-        },
-        changePage: {
-            description: 'Triggered when a new page is selected',
-            action: 'changePage',
-            table: {
-                category: 'Events',
-            },
-        },
+    component: 'm-pagination',
+    args: {
+        id: 'paginationId',
+        value: 10,
+        total: 99,
+        selectLabel: 'Select page',
     },
+    render: (args) => html `
+    <m-pagination
+      id=${ifDefined(args.id)}
+      value=${ifDefined(args.value)}
+      compact=${ifDefined(args.compact)}
+      total=${ifDefined(args.total)}
+      selectLabel=${ifDefined(args.selectLabel)}
+      prefixlabel=${ifDefined(args.prefixlabel)}
+      pagelabel=${ifDefined(args.pagelabel)}
+    ></m-pagination>
+  `,
 };
-const Template = (args) => {
-    const el = document.createElement('m-pagination');
-    el.setAttribute('id', args.id || 'paginationID');
-    el.setAttribute('value', args.value?.toString() || '1');
-    el.setAttribute('total', args.total?.toString() || '10');
-    if (args.compact)
-        el.setAttribute('compact', 'true');
-    if (args.selectLabel)
-        el.setAttribute('selectLabel', args.selectLabel);
-    if (args.prefixlabel)
-        el.setAttribute('prefixlabel', args.prefixlabel);
-    if (args.pagelabel)
-        el.setAttribute('pagelabel', args.pagelabel);
-    el.changePage = action('changePage');
-    return el;
-};
-export const Default = Template.bind({});
-Default.args = {
-    id: 'paginationID',
-    value: 1,
-    total: 5,
-    prefixlabel: 'Page',
-    pagelabel: 'of',
-};
-Default.play = async ({ canvasElement }) => {
-    const pagination = canvasElement.querySelector('m-pagination');
-    const select = pagination?.shadowRoot?.querySelector('select');
-    expect(pagination).not.toBeNull();
-    await userEvent.selectOptions(select, '3');
-    expect(select).toHaveValue('3');
-};
-export const Compact = Template.bind({});
-Compact.args = {
-    value: 1,
-    total: 3,
-    compact: true,
+export default meta;
+export const Default = {};
+export const First = {
+    args: {
+        id: 'firstId',
+        value: 1,
+    },
 };
-export const LongList = Template.bind({});
-LongList.args = {
-    value: 50,
-    total: 500,
+export const Last = {
+    args: {
+        id: 'lastId',
+        value: 99,
+    },
 };
-LongList.play = async ({ canvasElement }) => {
-    const pagination = canvasElement.querySelector('m-pagination');
-    const select = pagination?.shadowRoot?.querySelector('select');
-    expect(select).toBeInTheDocument();
-    await userEvent.selectOptions(select, '51');
-    expect(select).toHaveValue('51');
+export const Compact = {
+    args: {
+        id: 'compactId',
+        compact: true,
+    },
 };

package/dist/components/pagination/Pagination.svelte

@@ -9,27 +9,48 @@
   import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
   import Button from '../button/Button.svelte';
   import IconButton from '../iconbutton/IconButton.svelte';
-
+  /**
+   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
+   */
   interface Props {
+    /**
+     * A unique identifier for the pagination.
+     */
     id: string;
-    value?: number;
-    total?: number;
+    /**
+     * The current value of the selected page.
+     */
+    value: number;
+    /**
+     * If `true`, display a compact version without the select.
+     */
     compact?: boolean;
+    /**
+     * Total number of pages.
+     */
+    total?: number;
+    /**
+     * Accessible label for the select of the pagination.
+     */
     selectLabel?: string;
-    pagelabel?: string;
+    /**
+     * Word displayed before the current page number.
+     */
     prefixlabel?: string;
-    [key: string]: any;
+    /**
+     * Word displayed between the current page number and total page number.
+     */
+    pagelabel?: string;
   }
 
   let {
     id,
     value = $bindable(1),
     total = 10,
-    compact = false,
+    compact,
     selectLabel = 'Page selector',
-    pagelabel = 'of',
     prefixlabel = 'Page',
-    ...events
+    pagelabel = 'of',
   }: Props = $props();
 
   let selected = $state(Number(value));
@@ -60,12 +81,12 @@
 <nav class="mc-pagination" aria-label="pagination">
   {#if !compact}
     <Button
-      iconOnly
+      iconposition="only"
       aria-label="Previous page"
       disabled={isFirstPage()}
       onclick={previous}
     >
-      <ChevronLeft24 />
+      <ChevronLeft24 slot="icon" />
     </Button>
   {:else}
     <IconButton
@@ -112,12 +133,12 @@
 
   {#if !compact}
     <Button
-      iconOnly
+      iconposition="only"
       aria-label="Next page"
       disabled={isLastPage()}
       onclick={next}
     >
-      <ChevronRight24 />
+      <ChevronRight24 slot="icon" />
     </Button>
   {:else}
     <IconButton
@@ -134,9 +155,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-pagination {
   align-items: center;
   display: flex;
@@ -159,54 +177,54 @@
   appearance: none;
   font-family: inherit;
   transition: box-shadow 200ms ease;
-  font-size: 1rem;
-  line-height: 1.3;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
   height: 3rem;
   padding: 0 3rem 0 0.75rem;
   background-position: right 1rem center;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
-  border: 1px solid #666666;
-  border-radius: 0.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--radius-s, 0.25rem);
   display: block;
   width: 100%;
-  color: #000000;
-  background-color: #ffffff;
+  color: var(--forms-color-text-default, #000000);
+  background-color: var(--forms-color-background-default, #ffffff);
   text-overflow: ellipsis;
   background-repeat: no-repeat;
   background-size: 1rem;
 }
 .mc-select:hover {
-  border-color: #4d4d4d;
-  box-shadow: 0 0 0 1px #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-select:focus {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
 .mc-select:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
-  background-color: #d9d9d9;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   border-color: transparent;
   cursor: not-allowed;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
 }
 .mc-select--readonly {
-  border-color: #cccccc;
+  border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
 .mc-select.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-select.is-invalid:hover {
-  border-color: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-select--s {
-  font-size: 0.875rem;
-  line-height: 1.3;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
   height: 2rem;
   padding: 0 2rem 0 0.5rem;
   background-position: right 0.5rem center;

package/dist/components/pagination/Pagination.svelte.d.ts

@@ -1,12 +1,35 @@
+/**
+ * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
+ */
 interface Props {
+    /**
+     * A unique identifier for the pagination.
+     */
     id: string;
-    value?: number;
-    total?: number;
+    /**
+     * The current value of the selected page.
+     */
+    value: number;
+    /**
+     * If `true`, display a compact version without the select.
+     */
     compact?: boolean;
+    /**
+     * Total number of pages.
+     */
+    total?: number;
+    /**
+     * Accessible label for the select of the pagination.
+     */
     selectLabel?: string;
-    pagelabel?: string;
+    /**
+     * Word displayed before the current page number.
+     */
     prefixlabel?: string;
-    [key: string]: any;
+    /**
+     * Word displayed between the current page number and total page number.
+     */
+    pagelabel?: string;
 }
 declare const Pagination: import("svelte").Component<Props, {}, "value">;
 type Pagination = ReturnType<typeof Pagination>;

package/dist/components/pagination/Pagination.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AASE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAgGH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAQE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+FH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/pagination/README.md

@@ -0,0 +1,16 @@
+# `m-pagination`
+
+Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the pagination. | `string` |   |
+| `value*` | The current value of the selected page. | `number` | `$bindable(1)` |
+| `compact` | If `true`, display a compact version without the select. | `boolean` |   |
+| `total` | Total number of pages. | `number` | `10` |
+| `selectLabel` | Accessible label for the select of the pagination. | `string` | `Page selector` |
+| `prefixlabel` | Word displayed before the current page number. | `string` | `Page` |
+| `pagelabel` | Word displayed between the current page number and total page number. | `string` | `of` |
+